jQuery滑动导航菜单

最新推荐文章于 2021-08-07 09:52:20 发布

weixin_33750452

最新推荐文章于 2021-08-07 09:52:20 发布

阅读量139

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xupeiyu/p/3981306.html

版权

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>

转载于:https://www.cnblogs.com/xupeiyu/p/3981306.html