首页 > 代码库 > jQuery下拉菜单
jQuery下拉菜单
下拉菜单如果采用原生javascript制作代码比较多，但是使用jquery就大大提高了开发效率，几行代码就搞定
<div id="wrap"> <ul id="menu"> <li><a href="#">Study</a> <ul class="submenu"> <li><a href="#">JavaScript</a></li> <li><a href="#">Python</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Travel</a> <ul class="submenu"> <li><a href="#">ZhangJiaJie</a></li> <li><a href="#">YunNanDaLi</a></li> <li><a href="#">JiuZhaiGou</a></li> </ul> </li> <li><a href="#">Music</a> <ul class="submenu"> <li><a href="#">JayChou</a></li> <li><a href="#">Eason</a></li> <li><a href="#">Andy</a></li> </ul> </li> <li><a href="#">FineFood</a> <ul class="submenu"> <li><a href="#">Hunan</a></li> <li><a href="#">Sichuan</a></li> </ul> </li> </ul> </div>
CSS代码
*{ margin:0; padding:0; } body{ background:url(QinShiMingYue.jpg); } a{ text-decoration:none; color:#000000; font-family:Arial, Helvetica, sans-serif; } #wrap{ width:388px; margin:50px auto; } #menu li{ list-style-type:none; float:left; margin-right:2px; width:95px; } #menu>li{ border-bottom:1px solid #000; } #menu li a{ display:block; height:30px; line-height:30px; background-color:#CCCCCC; text-align:center; } #menu li a:hover{ color:#CCCCCC; background-color:#000000; } .submenu{ display:none; margin-top:2px; } .submenu li{ margin-bottom:1px; }
jquery代码
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--引入百度cdn的jquery库--><script type="text/javascript"> $(document).ready(function(){ var lis=$("#menu>li"); lis.hover( function(){ $(this).find(".submenu").show("fast"); }, function(){ $(this).find(".submenu").hide("fast"); } ) });</script>
jQuery下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。