jquery横向二级导航菜单当前频道高亮插件


jquery横向二级导航菜单当前频道高亮插件
jquery横向二级导航菜单当前频道高亮插件以及二级导航菜单、当前频道高亮等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

	<div id="nav">
		<div class="l"></div>
		<ul class="c">
			<li>
				<span class="v"><a href="http://www.51qianduan.com/" target="_blank">首页</a></span> 
				<div class="kind_menu" style="left:50px">jsfoot 网页特效主要有jquery 特效 js特效 flash特效 div+css教程 html5教程!</div>
			</li>
			<li>
				<span class="v"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></span> 
				<div class="kind_menu" style="left:40px">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span>
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span>
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span>
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li>
				<span class="v"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></span> 
				<div class="kind_menu">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li>
				<span class="v"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></span> 
				<div class="kind_menu" style="left:40px">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li>
				<span class="v"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></span> 
				<div class="kind_menu" style="left:40px">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li>
				<span class="v"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></span> 
				<div class="kind_menu" style="left:40px">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><span>|</span> 
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
		</ul>
	</div><!--nav-->
<script type="text/javascript">
    var site_url = window.location.href.toLowerCase();	
	switch (true) {
		case site_url.indexOf("/jsfoot") > 0 || site_url.indexOf("/jquery") > 0 || site_url.indexOf("/js") > 0 : 
		//判断当前频道属于哪个根目录模块就设置频道标签高亮
			$("#nav li").attr("class","");
			$("#nav li").eq(1).attr("class","nav_lishw"); //设置当前频道标签高亮
			$(".nav_lishw .v a").attr("class","sele");
			$(".nav_lishw .kind_menu").show();
			break;
		default :
			$("#nav li").attr("class","");
			$("#nav li").eq(0).attr("class","nav_lishw");
			$(".nav_lishw .v a").attr("class","sele");
			$(".nav_lishw .kind_menu").show();
	}
	$("#nav li").hover(
		function(){
			clearTimeout(setTimeout("0")-1);
			$("#nav .kind_menu").hide(); 
			$("#nav li .v .sele").attr("class","shutAhover");
			$(this).attr("id","nav_hover")
			$("#nav_hover .v a").attr("class","sele");
			$("#nav_hover .kind_menu").show(); 
		},
		function(){
			if($(this).attr("class") != "nav_lishw"){
				$("#nav_hover .v .sele").attr("class","");
				$("#nav_hover .kind_menu").hide(); 
			}
			$(this).attr("id","")
			$("#nav li .v .shutAhover").attr("class","sele");
			setTimeout(function(){
				$(".nav_lishw .kind_menu").show();
				$(".nav_lishw .v a").attr("class","sele");
			},50); 
		}
	);
</script>

相关推荐

发表评论

相关文章