jquery二级高亮下拉导航效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery二级高亮下拉导航效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery二级高亮下拉导航效果</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>

<!-- 导航代码end -->
  <div class="nav">
    <ul class="nav_list">
      <li class="drop-menu-effect"><a href="#" class="selected2"><span>首页</span></a></li>
      <li class="drop-menu-effect"><a href="#"><span>活动比赛</span></a>
        <ul class="submenu">
          <li><a href="show_dig.html">诗赋擂台</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="#"><span>诗赋直播</span></a></li>
      <li class="drop-menu-effect"><a href="#"><span>诗坛新闻</span></a></li>
      <li class="drop-menu-effect"><a href="#"><span>诗人社团</span></a>
        <ul class="submenu">
          <li><a href="plan_spreed.html">诗赋星家</a></li>
          <li><a href="plan_list.html">社团比拼</a></li>
          <li><a href="plan_list.html">诗友互动</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="#"><span>楹联天地</span></a></li>
      <li class="drop-menu-effect"><a href="#"><span>直通纸媒</span></a> </li>
      <li class="drop-menu-effect"><a href="#"><span>我的诗话</span></a></li>
      <li class="drop-menu-effect"><a href="#"><span>阅读欣赏</span></a>
        <ul class="submenu">
          <li><a href="#">自编诗集</a></li>
          <li><a href="#">刊物阅读</a></li>
          <li><a href="#">诗赋欣赏</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="#"><span>经典诗库</span></a></li>
    </ul>
  </div>
<!-- 导航代码begin -->

<script src="js/jquery.min.js"></script>
<script>
function dropMenu(obj){
		$(obj).each(function(){
			var theSpan = $(this);
			var theMenu = theSpan.find(".submenu");
			var tarHeight = theMenu.height();
			theMenu.css({height:0,opacity:0});
			
			var t1;
			
			function expand() {
				clearTimeout(t1);
				theSpan.find('a').addClass("selected");
				theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
			}
			
			function collapse() {
				clearTimeout(t1);
				t1 = setTimeout(function(){
					theSpan.find('a').removeClass("selected");
					theMenu.stop().animate({height:0,opacity:0},200,function(){
						$(this).css({display:"none"});
					});
				}, 250);
			}
			
			theSpan.hover(expand, collapse);
			theMenu.hover(expand, collapse);
		});
	}

$(document).ready(function(){
	dropMenu(".drop-menu-effect");
});
</script>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;}
* + html{z-index:6666;}
* + html .search{z-index:5555;}
body{font-family:"宋体";color:#000;font-size:12px;text-align:left;background:url(../images/bg.jpg) no-repeat center top #F9F9F9;}
ul,li{list-style:none;}
img{border:none;}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;color:#000;}
.nav{width:1100px;height:57px;margin:0 auto;z-index:9999;}
.nav .nav_list{float:right;}
.nav li{float:left;height:57px;width:82px;line-height:57px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;width:82px;height:57px;text-align:center;line-height:57px;background:url(../images/nav_line.jpg) no-repeat left center;}
.nav li a:hover{background:url(../images/nav_hover.jpg) no-repeat center center;text-decoration:none;}
.nav li a span{float:left;display:block;width:82px;height:57px;line-height:57px;cursor:pointer;font-family:"Microsoft YaHei";text-align:center;color:#fff;font-size:13px;}
.nav li a.selected{background:url(../images/nav_hover.jpg) no-repeat center center;color:#fff;}
.nav li a.selected2{background:url(../images/nav_hover.jpg) no-repeat center center;color:#fff;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:57px;left:0px;background:url(../images/nav_bg.jpg) center center repeat-y;}
.nav li .submenu{width:82px;}
.nav li .submenu{z-index:9999;}
.nav li .submenu li{float:left;padding:0;background:none;height:25px;line-height:25px;}
.nav li .submenu li a{float:none;padding:0;text-align:left;font-family:"Microsoft YaHei";height:25px;line-height:25px;background:none;color:#fff;padding-left:6px;width:76px;}
.nav li .submenu li a:hover{background:url(../images/nav_hover2.jpg) no-repeat center center;;font-weight:normal;color:#fff;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)