卡卡網(wǎng)

本文介紹一個(gè)左側(cè)導(dǎo)航菜單，這個(gè)導(dǎo)航菜單是可折疊的，并且它可以在左側(cè)縮進(jìn)和伸展。這個(gè)導(dǎo)航菜單適合很多應(yīng)用環(huán)境。

效果如圖

demodownload

示例介紹

本示例由CSS+JavaScript實(shí)現(xiàn)。

• 當(dāng)點(diǎn)擊第一層導(dǎo)航項(xiàng)目時(shí)，菜單可折疊或展開。
• 當(dāng)點(diǎn)擊第二層菜單項(xiàng)目時(shí)，我們可以給它一個(gè)點(diǎn)擊事件，在右側(cè)出現(xiàn)相應(yīng)的內(nèi)容。
• 當(dāng)點(diǎn)擊導(dǎo)航右上角的圖標(biāo)時(shí)，菜單向左縮進(jìn)，最后菜單變成一列文字，其上端是一個(gè)按鈕圖標(biāo)，當(dāng)點(diǎn)擊該圖標(biāo)時(shí)，菜單會(huì)向右推出。

HTML代碼

<div id="ensconce">
  <h2>
    <img src="static/show.png">
    國(guó)內(nèi)各地景點(diǎn)
  </h2>
</div>

<div id="open">
  <div class="navH">
    國(guó)內(nèi)各地景點(diǎn)
    <span><img class="obscure" src="static/obscure.png"></span>
  </div>
  <div class="navBox">
    <ul>
      <li>
        <h2 class="obtain">北京景點(diǎn)<i></i></h2>
        <div class="secondary">
          <h3>故宮</h3>
          <h3>十三陵</h3>
          <h3>圓明園</h3>
          <h3>長(zhǎng)城</h3>
          <h3>雍和宮</h3>
          <h3>天壇公園</h3>
        </div>
      </li>
      <li>
        <h2 class="obtain">南京景點(diǎn)<i></i></h2>
        <div class="secondary">
          <h3>棲霞寺</h3>
          <h3>夫子廟</h3>
          <h3>海底世界</h3>
          <h3>中山陵</h3>
          <h3>烏衣巷</h3>
          <h3>音樂臺(tái)</h3>
        </div>
      </li>
    </ul>
  </div>
</div>

這個(gè)HTML結(jié)構(gòu)比較清晰易理解。有兩個(gè)并列的外層div，前一個(gè)是<div id="ensconce">...</div>，后一個(gè)是<div id="open">...</div>，前一個(gè)是隱藏菜單后顯示的div，后一個(gè)是顯示菜單后的div。

<h2 class="obtain">...</h2>是菜單項(xiàng)目，點(diǎn)擊它后展開或折疊其對(duì)應(yīng)的<div class="secondary">...</div>里面的<h3>...</h3>菜單。

JavaScript

本示例包含兩個(gè)兩個(gè)JS文件。

<script src="static/adapter.js"></script>
<script src="static/menu.js"></script>

adapter.js是實(shí)現(xiàn)文字和標(biāo)簽的大小隨著屏幕的尺寸做變?cè)?等比縮放的功能，而menu.js是實(shí)現(xiàn)導(dǎo)航菜單的點(diǎn)擊事件。具體編程請(qǐng)看程序里的注釋文字。

CSS

本示例包含兩個(gè)CSS文件。

<link rel="stylesheet" href="static/base.css">
<link rel="stylesheet" href="static/menu.css">

base.css是全局樣式設(shè)置，而menu.css是菜單的樣式設(shè)置。

#menu{...}是菜單的區(qū)域樣式設(shè)置。這里設(shè)置高度（height）是100%，而 float:left; 是設(shè)置菜單區(qū)域在左側(cè)，user-select:none; 是禁止文本復(fù)制粘貼。

#menu {
  overflow: hidden;
  height: 100%;
  float: left;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#menu #ensconce { ... } 是隱藏菜單后顯示的div樣式，而 #menu #ensconce h2 { ... } 是設(shè)置該div區(qū)域內(nèi)文字的樣式。

#menu #open { ... } 是設(shè)置導(dǎo)航菜單區(qū)域div打開的樣式。

#menu #open .navH 設(shè)置導(dǎo)航菜單的頭部位置及文字等樣式。

#menu #open .navBox 設(shè)置導(dǎo)航菜單項(xiàng)目的區(qū)域，包括位置、高寬、文字等樣式。

總結(jié)

本文介紹了CSS+JS實(shí)現(xiàn)可伸縮可折疊的左邊側(cè)欄項(xiàng)目導(dǎo)航菜單，這個(gè)導(dǎo)航菜單很大眾化，并且其界面設(shè)計(jì)大氣不花俏，應(yīng)用場(chǎng)景很廣。喜歡的朋友可直接收藏本頁，或直接下載源碼保存?zhèn)溆谩?/p>

相關(guān)文章

• 純CSS實(shí)現(xiàn)二級(jí)導(dǎo)航菜單(具有伸縮過渡效果)
• 漂亮的左側(cè)二級(jí)導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過渡動(dòng)畫效果）
• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡(jiǎn)單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】

標(biāo)簽: 二級(jí)導(dǎo)航菜單  導(dǎo)航欄  導(dǎo)航菜單  目錄導(dǎo)航  菜單  菜單折疊