Question

我想基于以下HTML创建一个非常简单的水平导航栏：

<div id="nav">
    <ol class="clear">
        <li><a href="#">Parent 1</a></li>
        <li><a href="#">Parent 2</a>
            <ul class="clear">
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
            </ul>   
        </li>
        <li><a href="#">Parent 3</a></li>
     </ol>
</div>

..它会在鼠标悬停时显示subnav（如果存在）。

我知道伟大的SuperFish插件，但我想在这里保持简单，如果可能的话不要使用任何插件。

非常感谢！

Answer 1

这应该让你开始正确的方向

$(document).ready(function() {
    $("div#nav > ol.clear > li > ul").hide();
    $("div#nav > ol.clear > li:has(> ul)").hover(function() {
        var x = $(this);
        x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
    }, function () {
        $(this).children("ul").eq(0).hide();
    });
});

<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>

检查此网站以获取演示http://jsbin.com/ejuxa

Answer 2

如果你不想使用任何插件，你为什么不用CSS做呢？这是“Ultimate”CSS下拉菜单的链接。为什么使用javascript时可以轻松地在简单的'CSS？

中完成

修改

很抱歉，这里是链接：http://www.cssplay.co.uk/menus/final_drop.html

我刚刚在Firefox 3.5，Safari 4，IE8和Chrome 3中对此进行了测试，并且它在所有这些方面都运行良好。

水平导航栏（jQuery）

2 个答案: