jquery 好用的下拉菜单

最新推荐文章于 2024-10-02 10:11:21 发布

原创最新推荐文章于 2024-10-02 10:11:21 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

本文介绍了一种使用 jQuery 实现的多功能下拉菜单效果。该菜单支持无限层级，并且通过 hover 事件展示和隐藏子菜单，同时具备良好的用户体验。文章提供了完整的 HTML、CSS 和 JavaScript 代码。

jquery 好用的下拉菜单

http://www.cnblogs.com/ywqu/archive/2009/08/15/1546559.html

这个纵向和横向的下拉菜单

http://sc.xueit.com/down/sc470.shtml#down

jquery 38中下拉菜单

http://www.sonichtml.com/2009/09/14/38-css-and-jquery-drop-down-menu/

无限级垂直下拉:

http://www.htmldrive.net/items/show/57/Simple-unlimited-levels-vertical-drop-down-navigation-menu-jquery-plugin.html

	<html>
	<head>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<style>
	a { text-decoration:none; }
	ul, li { list-style:none; margin:0; padding:0; }

	.nav li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }
	.nav li a { color:#fff; font-size:14px; display:block; }

	ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }
	.nav li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }
	.nav li ul.sub_menu li.last { border-bottom:none; }
	.nav li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }
	.nav li ul.sub_menu li a:hover, .nav li ul.sub_menu li a.now { background:#f90;color:#fff;}
	.nav li.now,.nav li.current { background:#f60;color:#fff;}

	.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}
	.nav li a.hasmenu { background-position:right -30px;}
	.nav li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}
	.nav li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}
	</style>

	<script type="text/javascript" >
	$(document).ready(function(){
	//为导航设置默认高亮与本菜单无关
	$("ul.nav li.nav_li:eq(0)").addClass("current")
	/jquery menu 开始*/
	//为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线
	$(".sub_menu").find("li:last-child").addClass("last")
	//遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态
	$(".nav li").each(function(){
	if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}
	})
	//
	$(".nav li").hover(function(){
	$(this).addClass("now");
	var menu = $(this);
	mst = setTimeout(function(){
	menu.find("ul.sub_menu:first").slideDown("slow");
	mst = null;
	},50);
	},function(){
	$(this).removeClass("now");
	if(mst!=null)clearTimeout(mst);
	$(this).find("ul.sub_menu:first").slideUp("slow")
	});
	var submenu = $(".sub_menu").find(".sub_menu")
	submenu.css({left:"100px",top:"0px"})
	$(".sub_menu li").hover(function(){
	$(this).find("a:first").addClass("now")
	submst = setTimeout(function(){
	$(this).find("ul:first").slideDown("slow");
	submst = null;
	},500)
	},function(){
	$(this).find("a:first").removeClass("now")
	if(submst!=null)clearTimeout(submst);
	$(this).find("ul:first").slideUp("slow")
	});
	/jquery menu 结束*/
	})
	</script>
	</head>

	<body>
	<ul class="nav">
	<li class="nav_li"><a href="#">Home</a></li>
	<li class="nav_li"><a href="#">Works</a>
	<ul class="sub_menu">
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Visual Design</a></li>
	</ul>
	</li>
	<li class="nav_li"><a href="#">Products</a>
	<ul class="sub_menu">
	<li><a href="#">CMS</a>
	<ul class="sub_menu">
	<li><a href="#">asp+Acsecs</a>
	<ul class="sub_menu">
	<li><a href="#">1.2.2</a></li>
	<li><a href="#">1.1.0</a></li>
	<li><a href="#">1.0.0</a></li>
	</ul>
	</li>
	<li><a href="#">php+Mysql</a>
	<ul class="sub_menu">
	<li><a href="#">1.2.2</a></li>
	<li><a href="#">1.1.0</a></li>
	<li><a href="#">1.0.0</a></li>
	</ul>
	</li>
	<li><a href="#">Jquery+xml</a></li>
	</ul>
	</li>
	<li><a href="#">Notes Padpc</a></li>
	</ul>
	</li>
	<li class="nav_li"><a href="#">About</a>
	<ul class="sub_menu">
	<li><a href="#">Our team</a>
	<ul class="sub_menu">
	<li><a href="#">Products</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Ministry</a>
	<ul class="sub_menu">
	<li><a href="#">Products</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Ministry</a></li>
	<li><a href="#">Customer</a></li>
	<li><a href="#">Commerce</a></li>
	<li><a href="#">Officer</a>
	<ul class="sub_menu">
	<li><a href="#">Products</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Ministry</a></li>
	<li><a href="#">Customer</a></li>
	<li><a href="#">Commerce</a></li>
	<li><a href="#">Officer</a></li>
	</ul>
	</li>
	</ul>
	</li>
	<li><a href="#">Customer</a></li>
	<li><a href="#">Commerce</a></li>
	<li><a href="#">Officer</a></li>
	</ul>
	</li>
	<li><a href="#">Office</a></li>
	<li><a href="#">History</a></li>
	</ul>
	</li>
	<li class="nav_li"><a href="#">Services</a></li>
	<li class="nav_li"><a href="#">Contact</a></li>
	<li class="nav_li"><a href="#">Blog</a></li>
	</ul>

	</body>
	</html>