美文网首页
下拉导航显示隐藏代码

下拉导航显示隐藏代码

作者: VincentH | 来源:发表于2017-10-20 11:22 被阅读0次
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        *{margin: 0;padding: 0;}
            #header,#content{clear: both;position: relative;}
            #nav {
                height: 100%;
                overflow: hidden;
            }
            #nav li {
                float: left;
                height: 100%;
                width:100px;
                list-style: none;
                position: relative;
                text-align: center;
            }
            #nav li a{color: #666;text-decoration: none;}
            #nav li a.on {
                color: #fff;
            }
            #nav li a.on .bkg, #nav li a:hover .bkg {
                top: 0;
            }
            #nav li a .bkg{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                width: 100%;
                height: 40px;
            }
            #nav li a span{position: relative;z-index: 2;}
            #nav li a .bkg {
                top: 100%;
                z-index: 1;
                background-color: #f00;
                -webkit-transition: top 200ms;
                transition: top 200ms;
            }
            #subNav{height: 40px;    position: relative;overflow: hidden;}
            #subNav .g-wrap .item {
                position: absolute;
                top: -100%;
                width: 100%;
                height: 100%;
                background-color: #4c4a4f;
                overflow: hidden;
                -webkit-transition: top 300ms;
                transition: top 300ms;
                padding-left:100px;
            }
            #subNav .g-wrap .about {
                left: 100px;
            }
            #subNav .g-wrap .news {
                left: 200px;
            }
            .g-wrap .on{top:0!important;}
            #subNav .g-wrap .item a{text-decoration: none;line-height: 40px;color:#fff;margin:0px 10px;}
        </style>
    </head>
    <body>
    <header id="header">
        <ul id="nav">
        <li class="n1"><a href="index.aspx" class="on"><span>首页</span><span class="bkg"></span></a></li>
        <li class="n2 more"><a href="about.aspx" idx="0" class=""><span>万科集团</span><span class="bkg"></span></a></li>
        <li class="n3 more"><a href="news.aspx" idx="1" class=""><span>新闻中心</span><span class="bkg"></span></a></li>
        <li class="n4 more"><a href="investors.aspx" idx="2" class=""><span>投资者关系</span><span class="bkg"></span></a></li>
        <li class="n5 more"><a href="service.aspx" idx="3" class=""><span>产品服务</span><span class="bkg"></span></a></li>
        <li class="n6 more"><a href="citizenship.aspx" idx="4" class=""><span>企业公民</span><span class="bkg"></span></a></li>
        <li class="n7"><a href="http://rc.vanke.com/" target="_blank" class=""><span>加入万科</span><span class="bkg"></span></a></li>
        <li class="n8"><a href="feedback.aspx" class=""><span>投诉建议</span><span class="bkg"></span></a></li>
    </ul>
    </header>   
    <div id="content">
        
    <div id="subNav">
        <div class="g-wrap">
            <div class="item about">
                <a href="about.aspx?type=3">集团介绍<span></span></a><a href="about.aspx?type=5">团队介绍<span></span></a><a href="about.aspx?type=6">大事记<span></span></a>
            </div>
            <div class="item news">
                <a href="news.aspx?type=8">集团新闻<span></span></a><a href="news.aspx?type=9">地方动态 <span></span></a><a href="news.aspx?type=31">媒体报道<span></span></a>
            </div>
        </div>
    </div>
    </div>
    </body>
    </html>
    
    
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    
    <script type="text/javascript">
        $('#nav li').mouseover(function() {
            $('#nav li a').removeClass('on');
            $(this).find('a').addClass('on');
            $('.g-wrap .item').removeClass('on');
            $('.g-wrap .item').eq($(this).find('a').attr('idx')).addClass('on');
        })
        $('.g-wrap .item').mouseover(function() {
            $('#nav li a').removeClass('on');
            $('[idx="'+$(this).index()+'"]').addClass('on');
            $('.g-wrap .item').removeClass('on');
            $(this).addClass('on');
        })
        $('#nav,#subNav').mouseout(function(e) {
            $('#nav li a').removeClass('on');
            $('#nav li a').eq(0).addClass('on');
            $('.g-wrap .item').removeClass('on');
        })
    
    </script>
    

    相关文章

      网友评论

          本文标题:下拉导航显示隐藏代码

          本文链接:https://www.haomeiwen.com/subject/zznmuxtx.html