Willin Wang

长岛冰泪的前端开发原创博客
长岛冰泪

jQuery下拉导航效果Especially For Willin-Mood

2010年四月23日 下午 12:03

效果图

首先,需要对含有二级菜单的元素做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用户就可以忘记了,我记着了,所以引入过了)

RSS订阅也想要建立一个独立博客打造自我品牌吗?
RSS订阅如果你喜欢本文或对我的Willin OR Guy感兴趣,请订阅本博客如何订阅?


版权声明

作者:长岛冰泪,网址:http://www.willin.org/
原文标题:jQuery下拉导航效果Especially For Willin-Mood
原文链接:http://www.willin.org/develop/jquery/jquery-dropdown-nav/
(C) 长岛冰泪 版权所有,转载时必须以链接形式注明作者和原始出处及本声明。

相关日志

一条评论 在 “jQuery下拉导航效果Especially For Willin-Mood” 上

  1. willin 说:

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

发表评论


添加图片 添加表情

评论RSS

文章归档

赞助商

BloggerAds