最近发现一个简单的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>
更多一个jQuery下拉菜单,代码简单,适合新手阅读。相关文章请关注PHP中文网!