下拉導航顯示隱藏代碼


<!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  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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容