首先,需要对含有二级菜单的元素做CSS定义。(Willin-Mood的Style.css里已经有相应声明,可以跳过此步)
.haschildren {background:url('images/arrow-down.gif') no-repeat right center ;padding-right:15px !important;} /*添加小箭头*/ .nav li .children { position: absolute; list-style: none; margin: 0 0 0 -7px; padding: 0; z-index: 100; border: 1px solid #DDD; background: #FFF; overflow: hidden; width: 180px ;z-index:999;opacity:0.8;display:none;} .nav li .children li { float: none; margin: 0; padding: 3px 6px } /*下拉菜单悬浮显示*/
然后,在js文件里添加:
$('.nav li ul').addClass('children');
$('.nav>li:has(ul)').addClass('haschildren');这部分代码用来判定含有子菜单的分类,并加上向下箭头。
注意:代码都要加在Ready(function)里
jQuery(document).ready(function($){/*代码*/});核心代码:
$('.nav li:has(ul)').hover(function(){
$(this).children('ul:not(:animated)').stop(true,true).slideDown(600);
},function(){
$(this).children('ul').stop(true,true).fadeOut(1000);
});
$('.children').hover(function(){
$(this).animate({'opacity':'1'},500);
},function(){
$(this).css('opacity','0.8');
});此部分代码作用是:当鼠标移动到菜单时子菜单显示,移出则隐藏。
想偷懒?你也可以下载topnav.js(For Willin-Mood)
p.s.不要忘记引入jQuery(Willin-Mood用户就可以忘记了,我记着了,所以引入过了)
也想要建立一个独立博客打造自我品牌吗?
如果你喜欢本文或对我的Willin OR Guy感兴趣,请订阅本博客。如何订阅?
版权声明
作者:长岛冰泪,网址:http://www.willin.org/
原文标题:jQuery下拉导航效果Especially For Willin-Mood
原文链接:http://www.willin.org/develop/jquery/jquery-dropdown-nav/
(C) 长岛冰泪 版权所有,转载时必须以链接形式注明作者和原始出处及本声明。

你最近都在研究 jQuery, 小心走火入魔.. 呵呵..