jquery导航菜单

最新推荐文章于 2024-02-06 10:30:00 发布

iteye_7071

最新推荐文章于 2024-02-06 10:30:00 发布

阅读量80

点赞数

分类专栏： Html 文章标签： jquery XHTML JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_7071/article/details/82578625

版权

Html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<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>

iteye_7071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery导航菜单

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; (function(a){ a.fn.hoverClas..
复制链接

扫一扫

专栏目录