卡卡網(wǎng)

我們經(jīng)?？吹揭恍┚W(wǎng)頁左側(cè)浮動固定著一個導(dǎo)航，利用它可以快速切換到你想到的內(nèi)容目錄上，今天給大家分享一個非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航，它是純CSS實現(xiàn)，卻設(shè)計樣式漂亮實用。

下面是實現(xiàn)代碼

HTML

<ul class="side_nav">

    <dt class="f-hover"><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>游戲推薦</strong></dt>

    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>應(yīng)用推薦</strong></dt>

    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>最新專題</strong></dt>

    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>知識專欄</strong></dt>

    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>高清美圖</strong></dt>

    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>精彩視頻</strong></dt>

    <dd></dd>

</ul>

CSS

.side_nav {line-height:34px;color:#999;width:138px; height: 385px; display: block; overflow: hidden; position: fixed; left:10px; bottom: 130px;z-index:999;}

.side_nav dt {width: 100%; height: auto; margin: 10px 0 0; display: block; position: relative; zoom: 1; z-index: 10; cursor: pointer; }

.side_nav dt .i1{border:2px solid #e7e7e7;width:18px;height:18px;border-radius:18px;z-index:9;position:absolute;background-color:#fff;left:0px;}

.side_nav dt .i2 {width: 12px; height: 12px; border: 2px solid #f4f4f4; background: #f4f4f4; border-radius:12px; box-shadow: inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC;display:block;margin:1px 0 0 1px;}

.side_nav dt .i3{display:block;width:0;border:3px solid #e7e7e7;border-radius:6px;position:relative;left: 22px;top:9px; }

.side_nav dt strong {padding:2px 15px 4px 15px;font-size:14px; font-weight: normal; color: #333; background:#e7e7e7; border-radius: 4px;position:relative;left:28px;border-radius:20px;top:-13px;}

.side_nav .f-hover strong {background:#518ABC; color: #fff;}

.side_nav .f-hover .i1, .side_nav .f-hover .i3{border-color:#518abc;}

.side_nav .f-hover .i2{background:#518ABC;}

.side_nav dd {width:1px;height:265px; background: #aaa; position: absolute; left:10px; top:30px; display: block;overflow:hidden;}

JS

$(function(){

    $(".side_nav dt").click(function(){

        var n = $(this).index();

        $(".side_nav dt").eq(n).addClass("f-hover").siblings("dt").removeClass("f-hover");

    })

})

execcodegetcode

代碼解釋

1、JS代碼是實現(xiàn)點擊效果，由于用的是jQuery代碼，所以要先引用jQuery庫文件。

2、CSS代碼 .side_nav { ...left:10px; bottom: 130px;...} 是設(shè)置導(dǎo)航位置。

標(biāo)簽: 導(dǎo)航菜單  導(dǎo)航欄  目錄導(dǎo)航