一个简单的JQ导航(二级三级菜单)

这其实是一个很简单的JQ的特效,对于像我这样的新手也能快速掌握，甚至是触类旁通。

那么就简单地说下这个特效是怎么做的。

在页面中插入这样一段js代码
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

然后在页面的body里面编写导航代码，如下

<ul class="nav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">产品中心</a>
<ul>
<li><a href="#">干燥柜</a></li>
<li>
<a href="#">氮气柜</a>
<ul>
<li><a href="#">智能氮气柜</a></li>
<li><a href="#">不锈钢氮气柜</a></li>
<li><a href="#">洁净氮气柜</a></li>
<li><a href="#">非标订制氮气柜</a></li>
</ul>
</li>
<li><a href="#">工业烘箱</a></li>
<li><a href="#">培养箱</a></li>
<li><a href="#">环境试验箱</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a></li>
</ul>

因为有三级菜单，所以里面嵌套了下，再加上一个class就够了。

之后是设置菜单样式

<style type="text/css">
  *{ margin:0; padding:0;}
  body{ padding:20px;}
  ul{ list-style:none;}
  a:link{ text-decoration:none;}
  /*以下样式*/
  .nav{ background:#eee;}
  .nav:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
  .nav li{ float:left; position:relative;}
  .nav li a{ display:block; width:150px; height:30px; line-height:30px; padding-left:20px;}
  .nav li a:hover{ background:#c00; color:#fff;}
  .nav li ul{ position:absolute; top:30px; left:0; background:#f3f3f3;}
  .nav li ul li{ float:none;}
  .nav li ul li ul{ position:absolute; left:170px; top:0;}
  .nav li ul li ul li{}
  </style>


最后就是加入特效的一段JQ代码了：

<script type="text/javascript">
  $(".nav li ul").hide();
  $(".nav li").mouseover(function(){
$(this).addClass("cur")
$(this).find('ul:first').slideDown("fast")
})

$(".nav li").mouseleave(function(){
$(this).removeClass("cur")
$(this).find('ul:first').slideUp("fast")

})

</script>


tip：在样式表中我并没有让二级菜单隐藏，其实也可以在样式表中加入display:none;事先隐藏二级三级菜单的。
我是在JQ的代码里面第一行就让ul li下的所有的ul都隐藏，这样在打开页面的时候就隐藏了。

还有如果是特别熟悉css的人，可能对:first-child比较熟悉，这样这个简短的JQ代码应该是更容易看懂了。