技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS+JS實現可伸縮可折疊的左邊側欄項目導航菜單

作者:admin    時間:2023-5-9 0:27:14    瀏覽:

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

效果如圖

demodownload

示例介紹

本示例由CSS+JavaScript實現。

  • 當點擊第一層導航項目時，菜單可折疊或展開。
  • 當點擊第二層菜單項目時，我們可以給它一個點擊事件，在右側出現相應的內容。
  • 當點擊導航右上角的圖標時，菜單向左縮進，最后菜單變成一列文字，其上端是一個按鈕圖標，當點擊該圖標時，菜單會向右推出。

HTML代碼

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

<div id="open">
  <div class="navH">
    國內各地景點
    <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結構比較清晰易理解。有兩個并列的外層div，前一個是<div id="ensconce">...</div>，后一個是<div id="open">...</div>，前一個是隱藏菜單后顯示的div，后一個是顯示菜單后的div。

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

JavaScript

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

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

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

CSS

本示例包含兩個CSS文件。

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

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

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

#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 { ... } 是設置該div區(qū)域內文字的樣式。

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

#menu #open .navH 設置導航菜單的頭部位置及文字等樣式。

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

總結

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

相關文章

x