码迷,mamicode.com
首页 > Web开发 > 详细

jQuery滑动导航菜单

时间:2014-09-19 15:11:55      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   os   java   ar   div   

js:

$(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滑动导航菜单

标签:des   style   blog   http   io   os   java   ar   div   

原文地址:http://www.cnblogs.com/xupeiyu/p/3981306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!