一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。
之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了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 |
2. CSS源码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
} 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 |
{ $('<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'); }); }); |