jquery导航栏
html
<ul class="list"> <li>下拉菜单 <ul class="nav"> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> </ul> </li> <li>下拉菜单 <ul class="nav"> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> </ul> </li> <li>下拉菜单 <ul class="nav"> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> </ul> </li> <li>下拉菜单 <ul class="nav"> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> </ul> </li> <li>下拉菜单 <ul class="nav"> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> <li>下拉菜单1</li> </ul> </li> </ul>
css
*{margin:0;padding:0;} .list{width:500px;height:30px;line-height:30px;list-style-type:none;margin:50px auto;color:#fff;} .list li{width:100px;height:30px;text-align:center;float:left;font-size:14px;background:#333;cursor:pointer}
js
<script type="text/javascript"> /**全局的 (function($){ $.fn.extend({ "nav":function(){ $(".nav").css({ "list-style-type":"none", "margin":0, "padding":0, "display":"none" }); $(this).find(".nav").parent().mouseover(function(){ $(this).find(".nav").slideDown("normal") }); $(this).find(".nav").parent().mouseout(function(){ $(this).find(".nav").stop().slideUp("normal") }) } }) })(jQuery); $(function(){ $(".list").eq(0).nav(); }) **/ //局部的 (function($){ $.extend({ "nav":function(color){ $(".nav").css({ "list-style-type":"none", "margin":0, "padding":0, "display":"none", "color":color }); $(".nav").parent().mouseover(function(){ $(this).find(".nav").slideDown("normal") }); $(".nav").parent().mouseout(function(){ $(this).find(".nav").stop().slideUp("normal") }) } }) })(jQuery); $(function(){ $.nav("blue"); }) </script>