下拉導(dǎo)航顯示隱藏代碼


<!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>首頁(yè)</span><span class="bkg"></span></a></li>
    <li class="n2 more"><a href="about.aspx" idx="0" class=""><span>萬(wàn)科集團(tuán)</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>投資者關(guān)系</span><span class="bkg"></span></a></li>
    <li class="n5 more"><a href="service.aspx" idx="3" class=""><span>產(chǎn)品服務(wù)</span><span class="bkg"></span></a></li>
    <li class="n6 more"><a href="citizenship.aspx" idx="4" class=""><span>企業(yè)公民</span><span class="bkg"></span></a></li>
    <li class="n7"><a  target="_blank" class=""><span>加入萬(wàn)科</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">集團(tuán)介紹<span></span></a><a href="about.aspx?type=5">團(tuán)隊(duì)介紹<span></span></a><a href="about.aspx?type=6">大事記<span></span></a>
        </div>
        <div class="item news">
            <a href="news.aspx?type=8">集團(tuán)新聞<span></span></a><a href="news.aspx?type=9">地方動(dòng)態(tài) <span></span></a><a href="news.aspx?type=31">媒體報(bào)道<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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容