jQuery:两个样式下拉菜单(click hover)

一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。

之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。

运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。

说明：第一个导航#nav1是点击后出现下拉菜单，而第二个导航#nav2是鼠标移动到上面后出现导航。(样式只为效果，没有美化，望见谅)

1.html代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<ul class="nav" id="nav1"> <li>点击方式下拉菜单:click</li> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">技术</a> <ul class="subnav"> <li><a href="#">wordpress</a></li> <li><a href="#">php</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li><a href="#">影视</a> <ul class="subnav"> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <li><a href="#">舞台剧</a></li> </ul> </li> <li><a href="#">联系</a></li> </ul>   <ul class="nav" id="nav2"> <li>移动方式下拉菜单:hover</li> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">技术</a> <ul class="subnav"> <li><a href="#">wordpress</a></li> <li><a href="#">php</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li><a href="#">影视</a> <ul class="subnav"> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <li><a href="#">舞台剧</a></li> </ul> </li> <li><a href="#">联系</a></li> </ul>

2. CSS源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

* { margin:0; padding:0;} body { font:14px '宋体';} li { list-style:none;} a { text-decoration:none;} a:hover { text-decoration:underline;}   #nav1 { margin-bottom:200px;}   .nav { margin:10px auto; width:500px; background:#333; height:35px; padding:0 10px; color:#F60;} .nav li { float:left; padding-right:10px; text-align:center; position:relative; height:35px; line-height:35px;} .nav li a { padding:0 10px; height:35px; line-height:35px; display:block; color:#fff; float:left;}   .nav li span { float:left; width:17px; height:35px; background:url(subnav_btn.gif) no-repeat center top;} .nav li span.subhover { background-position:center bottom; cursor:pointer;}   ul.subnav { display:none; float:left; position:absolute; top:35px; left:-20px; width:100px; background:#666;} ul.subnav li { padding:0; clear:both; width:100px;}

3. jQuery代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$(document).ready(function() { $('<span></span>').insertBefore($('.subnav'));   //鼠标点击向下箭头 $('#nav1 li span').hover(function() { $(this).addClass('subhover'); $(this).parent().hover(function() { }, function() { $(this).parent().find('ul.subnav').slideUp('fast'); }); }, function() { $(this).removeClass('subhover'); }).click(function() { $(this).parent().find('ul.subnav').slideDown('slow'); });   // 鼠标移动到含有下拉菜单的li标签上时 $('#nav2 li').hover(function() { $(this).find('span').addClass('subhover').end() .find('ul.subnav').slideDown('slow'); }, function() { $(this).find('span').removeClass('subhover').end() .find('ul.subnav').slideUp('fast'); }); });