下拉导航显示隐藏代码


<!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>
下拉导航显示隐藏代码

下拉导航显示隐藏代码

相关阅读更多精彩内容

友情链接更多精彩内容
