好看的二级菜单缓慢下拉,网站导航下拉自动伸缩效果_JavaScript

好看的二级菜单缓慢下拉,网站导航下拉自动伸缩效果

<script language="javascript"> 
var fgm = {
	shit: !-[1,] && !window.XMLHttpRequest,	
	scrollTop: function() {
		return document.documentElement.scrollTop || document.body.scrollTop;
	},
	currentStyle: function(obj, attr) {
		return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]);
	},
	fixed: function(element) {
		if(this.shit) {
			var top = this.currentStyle(element, "top") || 0,
			dd = "(document.documentElement)";
			document.documentElement.style.textOverflow = "ellipsis";
			element.style.position = "absolute";
			element.style.setExpression("top", "eval(" + dd + ".scrollTop + " + (top - this.scrollTop()) + ') + "px"');
		}
		else {
			element.style.position = "fixed";	
		}
	},
	doMove: function(obj, iTarget, callback) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var iCur = fgm.currentStyle(obj, "height"),
			iSpeed = (iTarget - iCur) / 5;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			iTarget == iCur ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = iSpeed + iCur + "px";
		}, 30);		
	}
};
window.onload = function() {
	var oWrap = document.getElementById("wrap"), 
	oTopBar = document.getElementById("topBar"),
	oNav = document.getElementById("nav"),
	fnStatus = function(status) {
		!!status ?
		(function() {
			oNav.className = "hide";
			fgm.doMove(oTopBar, 0);
			fgm.doMove(oNav, 50);
		})() :
		(function() {
			fgm.doMove(oTopBar, 28);
			fgm.doMove(oNav, 50, function() {
				this.className = ""	;
			})
		})();
	};	
	fgm.fixed(oWrap);//IE6 Fixed
	window.onscroll = function() {
		var iScrollTop = fgm.scrollTop();
		fnStatus(iScrollTop > 0);
		document.onmouseover = function(ev) {
			var oEv = ev || event,
			oTarget = oEv.target || oEv.srcElement,
			contains = function() {
				if(oWrap.contains) {
					return oWrap.contains(oTarget);	
				}
				else if(oWrap.compareDocumentPosition) {
					return !!(oWrap.compareDocumentPosition(oTarget) & 16);
				}
			}();
			fnStatus(!contains && iScrollTop > 0);
		};
	};
	window.onscroll();
};
</script>

html代码:

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <!--/topBar--> 
   <div id="nav"> 
    <dvi class="logo">
     <a href="http://www.awzsr.com"><img height="60" style="margin-top:15px;" src="/templets/default/images/logo.png" border="0" /></a>
    </dvi> 
    <div id="topBar"> 
     <div class="navtel400">
      <img src="/templets/default/images/tel400.png" border="0" />
     </div> 
     <div class="navtel">
      服务热线： 400-888-888
     </div> 
    </div> 
    <div class="navdh"> 
     <ul id="menu"> 
      <li><a href="http://www.awzsr.com/"><span>网站首页</span></a></li> 
      <li><a href="http://www.awzsr.com/product/8.html"><span>产品中心</span></a> 
       <ul> 
        <li><a href="/product/8.html">爱问知识人</a></li> 
        <li><a href="/product/9.html">智能网络</a></li> 
        <li><a href="/product/10.html">高清网络</a></li> 
        <li><a href="/product/11.html">无线网络</a></li> 
        <li><a href="/product/12.html">信息查询</a></li> 
       </ul> </li> 
      <li><a href="http://www.awzsr.com/solution/275.html"><span>解决方案</span></a> 
       <ul> 
        <li><a href="/solution/275.html">互动电视解决方案</a></li> 
        <li><a href="/solution/276.html">智慧互动解决方案</a></li> 
        <li><a href="/solution/277.html">前端电视解决方案</a></li> 
        <li><a href="/solution/278.html">无线覆盖解决方案</a></li> 
        <li><a href="/solution/279.html">旅游智慧解决方案</a></li> 
       </ul> </li> 
      <li><a rel="dropmenu3" href="http://www.awzsr.com/news/"><span>新闻中心</span></a> 
       <ul> 
        <li><a href="/news/new/">最新活动</a></li> 
        <li><a href="/news/active/">公司动态</a></li> 
       </ul> </li> 
      <li><a href="http://www.awzsr.com/services/5.html"><span>支持服务中心</span></a> 
       <ul> 
        <li><a href="/services/5.html">400呼叫中心</a></li> 
        <li><a href="/services/6.html">客服中心</a></li> 
        <li><a href="/services/7.html">服务流程</a></li> 
       </ul> </li> 
      <li><a href="http://www.awzsr.com/about/1.html"><span>关于快乐世界</span></a> 
       <ul> 
        <li><a href="/about/1.html">公司简介</a></li> 
        <li><a href="/about/2.html">企业文化</a></li> 
        <li><a href="/about/3.html">分支机构</a></li> 
        <li><a href="/about/4.html">战略伙伴</a></li> 
       </ul> </li> 
      <li><a href="http://www.awzsr.com/contact/284.html"><span>联系我们</span></a> 
       <ul> 
        <li><a href="/contact/284.html">联系我们</a></li> 
        <li><a href="/contact/285.html">在线留言</a></li> 
       </ul> </li> 
     </ul> 
    </div> 
   </div> 
   <!--/nav--> 
  </div>
 </body>
</html>

css代码：

#wrap{width:100%;top:0; z-index:200; background:url("images/nav_bg.png") repeat-x;border-top: 2px solid #6fb946;}
#topBar{color:#214f9a;overflow:hidden;width:750px; float:right; vertical-align:middle;font-size:19px;text-align:right;font-family:微软雅黑;}
#topBar a{color:#FFF;}
.topdh {float:right;}
#nav{width:960px;height:71px; margin:0 auto;padding-top:14px;padding-bottom:23px;}
#nav .logo{float:left;width:auto;overflow:hidden;}
#nav .logo a{float:left;overflow:hidden;}
#nav .logo a:hover{background-position:0 -50px;}
#nav.hide .logo a{width:100px;height:50px;background-position:0 -100px;_background-position:0 -130px;}
#nav.hide .logo a img{height:30px;width:100px;}
#nav.hide .logo a:hover{background-position:0 -130px;}
#nav.hide {padding-bottom:0px;padding-top:0px;}
#nav ul{z-index:999;}
#nav ul li{z-index:999;}
#nav ul li a{color:#333333;height:50px;font:16px/50px 微软雅黑; font-family:微软雅黑;}
#nav ul li a:hover{color:#bc2931;}
#nav.hide ul{display:none;}
.navdh {float:right; width:750px;}
.navtel{float:right;}
.navtel400{float:left;width:500px; text-align: right;}
.search {width:171px; height:16px; float:right; background-image:url("images/searchbg.png")/*tpa=http://www.www.awzsr.com/images/searchbg.png*/; margin-top:15px;}


#menu {}
#menu, #menu ul {list-style: none;}
#menu > li {	float: left;padding-left:34px;margin-top:3px;height:64px;	position: relative;	}
#menu > li:first-child {}
#menu li ul li{height:32px;}
#menu a {}
#menu > li:hover > a {	text-shadow:none;}
#menu li ul  {position: absolute;text-align:center;top:48px;left: 10px;visibility: hidden;z-index: 1;padding: 0;opacity: 0.9;;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background: transparent;overflow: hidden;transform-origin: 50% 0%;}
#menu li:hover ul {height:auto;background: #dcdcdc;opacity: 0.9;visibility: visible;box-shadow: 1px 1px 7px rgba(0,0,0,.5);animation-name: swingdown;animation-duration: 1s;animation-timing-function: ease;padding-bottom:15px;}
#menu li li a {	font-size:13px;	color: #bc2931;	text-shadow: none;	border-top: dotted 1px transparent;	border-bottom: dotted 1px transparent;	transition: all .15s linear;}
#menu li li a:hover {	color: rgba(0,0,0,1);	border-top: dotted 1px rgba(255,255,255,.15);	border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);}
.clear {clear:both;}

您必须 登录 才能发表评论！

您必须登录才能发表评论！