卡卡網(wǎng)

前面介紹過一個側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動而變化，今天再介紹一個。

隨內(nèi)容滾動而變化的側(cè)邊/左側(cè)目錄導(dǎo)航

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

HTML

<div class="help-container">
    <ul id="nav" class="help-nav">
        <li class="current"><a class="btn" href="#c1">寶塔跑分</a></li>
        <li><a class="btn" href="#c2">UnixBench跑分</a></li>
        <li><a class="btn" href="#c3">端口帶寬</a></li>
        <li><a class="btn" href="#c4">硬盤IO</a></li>         
        <li><a class="btn" href="#c5">CPU壓測</a></li>
    </ul>
    <div class="help-content">
        <section id="c1">
            <h2>寶塔跑分</h2>                
        </section>
        <section id="c2">
            <h2>UnixBench跑分</h2>
        </section>
        <section id="c3">
            <h2>端口帶寬</h2>
        </section>
        <section id="c4">
            <h2>硬盤IO</h2>
        </section>           
        <section id="c5">
            <h2>CPU壓測</h2>
        </section>
    </div>
</div>

CSS

*{margin:0; padding:0;}
.header{width:100%; height:60px; background:#fff;}
.help-banner{width:100%; height:80px; background:#e52e17;}
.help-banner h2{font-size:24px; color:#fff; line-height:24px; padding:26px 0 26px 30px;}
.help-container{margin-top:10px;}
#nav{position:fixed; top:180px; left:70px;}
ul,li{list-style-type:none;}
.btn{width:160px; display:block; height:40px; line-height:40px; font-size:14px; font-weight:normal; text-align:center; border:1px solid #fe5050; border-radius:3px; cursor:pointer;    -webkit-transition: background ease .2s, color ease .2s;}
#nav li{margin-bottom:10px;}
#nav li a{color:#333; text-decoration: none;}
#nav li.current a{background:#fe5050; color:#fff;}
.help-content{float:left; margin-left:300px}
.help-content section{width:700px; height:300px; margin-bottom:20px;}

JS

$("#nav").navScrollSpy({
  navContainer: '#nav',
  current:"current",
  scrollSpeed: 750
});

execcodegetcode

代碼解釋

1、HTML help-content div是內(nèi)容區(qū)域，而 section 則是各目錄的內(nèi)容單元。

2、CSS #nav{position:fixed; top:180px; left:70px;} 設(shè)置導(dǎo)航位置。

.help-content{float:left; margin-left:300px} 設(shè)置內(nèi)容區(qū)域的位置。

.help-content section{width:700px; height:300px; margin-bottom:20px;} 設(shè)置目錄內(nèi)容單元的區(qū)域大小及位置。

3、JS scrollSpeed: 750 設(shè)置滾動速度。

推薦

本文介紹的這個內(nèi)容目錄導(dǎo)航代碼比較復(fù)雜，使用修改起來不太容易，故強烈推薦使用另一個隨內(nèi)容滾動而變化的側(cè)邊目錄導(dǎo)航。

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