一个jQuery下拉菜单，代码简单，适合新手阅读。

最近发现一个简单的jQuery下拉菜单，代码很少，很适合有基础的新手学习提高。
这是jQuery代码：
<script type="text/javascript">
$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>");
   
    $("ul.topnav li span").click(function() {
        $(this).parent().find("ul.subnav").slideDown('fast');

        $(this).parent().hover(function() {
        }, function(){   
            $(this).parent().find("ul.subnav").slideUp('slow');
        });

   
        }).hover(function() {
            $(this).addClass("subhover");
        }, function(){    //On Hover Out
            $(this).removeClass("subhover");
    });

});
</script>
下面是html代码：
<div id="header">
       
        <ul class="topnav">
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">原创作品</a>
                <ul class="subnav">
                    <li><a href="#">绘画艺术</a></li>
                    <li><a href="#">平面设计</a></li>
                    <li><a href="#">交互设计</a></li>
                    <li><a href="#">3D艺术</a></li>
                    <li><a href="#">摄影艺术</a></li>
                    <li><a href="#">其他艺术</a></li>
                </ul>
            </li>
            <li>
                <a href="#">设计素材</a>
                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
            <li>
                <a href="#">佳作欣赏</a>
                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">网址导航</a></li>
        </ul>
    </div>

评论

4 楼 yuanjianhang 2011-10-17  

这个很早写的了，都快忘了。

3 楼 dianljl 2011-10-15  

谢谢分享！！！

2 楼 yuanjianhang 2011-01-20  

Thank you!

1 楼 qp7711 2011-01-07