jQuery滑动导航菜单

2010年06月4日作者： Artcss 类别：个人随笔

分享到: 百度 QQ空间微博豆瓣人人开心 QQ书签

今天用jQuery写了个滑动导航菜单，加入了缓动展开的效果。比以前常用的用css伪类:hover+ie6模拟:hover的js写的那个效果好，所以拿出来分享一下，可能还可以更好的改进，欢迎大家多拍砖。

先看一下效果图

实例：Demo

用到的javascript代码如下:

$(function(){
	$("ul.sub").parent().append("<span></span>");
	$("ul.sub ul").parent().append("<em></em>");
	$('#nav ul').closest('li').hover(function(){
		$(this).find("span").addClass("arrow");
		$(this).find("em").removeClass("arrow");
		$(this).children("ul").stop(true,true).slideDown('fast').show();
		$("#nav ul>li").hover(function(){$(this).addClass("hover")},
		function(){$(this).removeClass("hover")});
	},function(){
		$(this).children("ul").stop(true,true).hide();
		$(this).find("span").removeClass("arrow");
		$(this).find("em").addClass("arrow");
	})
});

点击下面“运行”直接查看效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="Web Layout:LiQiang.Gu;" /> <meta name="description" content="前端思考 web前端前端制作 artskin www.artcss.com" /> <meta name="Keywords" content="前端思考 web前端前端制作 artskin www.artcss.com" /> <title>下拉导航菜单</title> <script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script> <link rel="stylesheet" rev="stylesheet" href="http://www.artcss.com/test/menu/menu.css" type="text/css" /> <script type="text/javascript"> $(function(){ $("ul.sub").parent().append("<span></span>"); $("ul.sub ul").parent().append("<em></em>"); $('#nav ul').closest('li').hover(function(){ $(this).find("span").addClass("arrow"); $(this).find("em").removeClass("arrow"); $(this).children("ul").stop(true,true).slideDown('fast').show(); $("#nav ul>li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}); },function(){ $(this).children("ul").stop(true,true).hide(); $(this).find("span").removeClass("arrow"); $(this).find("em").addClass("arrow"); }) }); </script> </head> <body> <div class="nav"> <ul id="nav"> <li class="first">游戏介绍 <ul class="sub"> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a></li> </ul> </li> <li class="first">新手引导 <ul class="sub"> <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> <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> </ul> </li> <li class="first">进阶资料 <ul class="sub"> <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> </ul> </li> <li class="first">职业技能 <ul class="sub"> <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> <ul> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> </ul> </li> </ul> </li> <li class="first">装备道具 <ul class="sub"> <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> <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> <ul> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> </ul> </li> </ul> </li> <li class="first">任务指引 <ul class="sub"> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单二</a> </li> </ul> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

jQuery滑动导航菜单

用到的javascript代码如下:

点击下面“运行”直接查看效果

相关博文

相关日志

Comments

给作者留言：

关于

RSS订阅前端思考

最新动态

友情链接

jQuery滑动导航菜单

用到的javascript代码如下:

点击下面“运行”直接查看效果

相关博文

相关日志

Comments

给作者留言：

关于

RSS订阅前端思考

最新动态

常用标签

友情链接