下拉導航顯示隱藏代碼


<!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>企業(yè)公民</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">地方動態(tài) <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>

最后編輯于：2017.12.11 04:33:22

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末擎场，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌蓬蝶，老刑警劉巖限煞，帶你破解...
沈念sama閱讀 221,198評論 6贊 514
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異膀捷，居然都是意外死亡骑篙，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
沈念sama閱讀 94,334評論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門乌妙，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人建钥，你說我怎么就攤上這事藤韵。” “怎么了熊经？”我有些...
開封第一講書人閱讀 167,643評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵泽艘，是天一觀的道長欲险。經常有香客問我，道長匹涮，這世上最難降的妖魔是什么天试？我笑而不...
開封第一講書人閱讀 59,495評論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮然低，結果婚禮上喜每，老公的妹妹穿的比我還像新娘。我一直安慰自己雳攘，他們只是感情好带兜，可當我...
茶點故事閱讀 68,502評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著吨灭，像睡著了一般刚照。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上喧兄，一...
開封第一講書人閱讀 52,156評論 1贊 308
城市分裂傳說
那天无畔，我揣著相機與錄音，去河邊找鬼吠冤。笑死浑彰，一個胖子當著我的面吹牛，可吹牛的內容都是我干的咨演。我是一名探鬼主播闸昨，決...
沈念sama閱讀 40,743評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼薄风！你這毒婦竟也來了饵较？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 39,659評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤遭赂，失蹤者是張志新（化名）和其女友劉穎循诉，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體撇他，經...
沈念sama閱讀 46,200評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡茄猫，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 38,282評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了困肩。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片划纽。...
茶點故事閱讀 40,424評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖锌畸，靈堂內的尸體忽然破棺而出勇劣，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 36,107評論 5贊 349
?日本核電站爆炸內幕
正文年R本政府宣布比默，位于F島的核電站幻捏，受9級特大地震影響，放射性物質發(fā)生泄漏命咐。R本人自食惡果不足惜篡九，卻給世界環(huán)境...
茶點故事閱讀 41,789評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望醋奠。院中可真熱鬧榛臼，春花似錦、人聲如沸钝域。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,264評論 0贊 23
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽例证。三九已至路呜，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間织咧，已是汗流浹背胀葱。一陣腳步聲響...
開封第一講書人閱讀 33,390評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留笙蒙，地道東北人抵屿。一個月前我還...
沈念sama閱讀 48,798評論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長得像捅位，于是被迫代替她去往敵國和親轧葛。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,435評論 2贊 359

下拉導航顯示隱藏代碼

推薦閱讀更多精彩內容