css+jquery导航列表
《1》
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>导航列表</title> <script src="jquery-1.11.2.js"></script> <link href="jquery.autocompleter.css" rel="stylesheet" /> <script src="jquery.autocompleter.js"></script> </head> <body> <ul class="list"> <li> 导航列表 <ul class="anv"> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> </ul> </li> <li> 导航列表 <ul class="anv"> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> </ul> </li> <li> 导航列表 <ul class="anv"> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> </ul> </li> <li> 导航列表 <ul class="anv"> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> </ul> </li> <li> 导航列表 <ul class="anv"> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> <li>导航列表</li> </ul> </li> </ul> </body> </html>
<style type="text/css"> .list { margin: 50px auto; width: 750px; padding:0px; color: #fff; } .list li { margin: 0px auto; padding: 0px; float: left; background-color: #171111; line-height: 35px; text-align: center; list-style: none; height: 35px; font-size: 15px; width: 150px; } </style>
<script type="text/javascript"> $(function () { $(".anv").parent().find(".anv").css({ "list-style": "none", "margin": "0px", "padding": "0px", "display": "none", "color": "orange" }); //首先隐藏clas=anv的ul $(".list li").hover( function () { $(this).find(".anv").slideDown(400) }, //当时鼠标移入到$(.list li)上面的时候滑动显示出class=.anv的ul function () { $(this).find(".anv").stop(true).slideUp(400)} //离开的时候立即使用stop(true)方法来停止动画,然后又使用slideUp这个动画将class=anv的ul收起来(隐藏) ); }) </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。