卡卡網(wǎng)

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

效果如圖

demodownload

示例介紹

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

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

HTML代碼

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

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

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

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

JavaScript

本示例包含兩個兩個JS文件。

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

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

CSS

本示例包含兩個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)航菜單項目的區(qū)域，包括位置、高寬、文字等樣式。

總結(jié)

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

相關(guān)文章

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

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