好看的二级菜单缓慢下拉,网站导航下拉自动伸缩效果
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;} |