jquery导航菜单

最新推荐文章于 2025-08-04 14:12:50 发布

原创最新推荐文章于 2025-08-04 14:12:50 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #XHTML #JavaScript #ViewUI

Html 专栏收录该内容

13 篇文章

订阅专栏

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
		 (function(a){
			a.fn.hoverClass=function(b){
				var a=this;
				a.each(function(c){
					a.eq(c).hover(function(){
						$(this).addClass(b)
					},function(){
						$(this).removeClass(b)
					})
				});
				return a
			};
		})(jQuery);

		$(function(){
			$("#navbox").hoverClass("current");
		});
	</script>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		a,img{border:0;}
		a{color:#333;text-decoration:none;}
		a:hover{color:#3366cc;text-decoration:underline;}
		body{font:12px/180% "宋体";}
		/* menu */
		
		.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}
		.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}
		.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:110px;border:solid 1px #ddd;}
		#navbox.current .subnav{display:block;}
		.menu .subnav a{border:none;}
		.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:bold;}
	</style>
</head>

<body>




<div id="navbox" class="menu">
	<a class="tit" href="#">jquery特效</a>
	<ul class="subnav">
		<li><a href="http://www.mb5u.com/">jquery图片特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery导航菜单</a></li>
		<li><a href="http://www.mb5u.com/">jquery选项卡特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery文字特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery表单特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery表格特效</a></li>
	</ul>
</div>