注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

JavaScript 开心洋葱 4089次浏览 已收录 0个评论 手机上查看

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

 

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

 


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明好看的二级菜单缓慢下拉,网站导航下拉自动伸缩效果
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

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

……