卡卡網(wǎng)

本文介紹一款由 Bootstrap 3 框架實現(xiàn)的側(cè)欄滑動導(dǎo)航菜單，設(shè)計得非常漂亮好看。

效果圖

demodownload

示例介紹

本示例由CSS3+jQuery實現(xiàn)，需要用到JS插件bootstrap.min.js，CSS插件bootstrap.css，還有font-awesome字體圖標(biāo)庫文件，因此本示例的構(gòu)建還是比較復(fù)雜的，不過這是一個完整的實例，我們可以直接拿來使用。

• 默認(rèn)隱藏側(cè)欄導(dǎo)航。
• 點擊左上角三橫圖標(biāo)時，滑出導(dǎo)航。
• 點擊叉圖標(biāo)時，縮進(jìn)導(dǎo)航。
• 鼠標(biāo)懸停到菜單項上時，該菜單背景顏色以動畫形式轉(zhuǎn)換。
• 主菜單可以有二級菜單，當(dāng)點擊主菜單時顯示二級菜單。

HTML代碼

下面是導(dǎo)航的HTML代碼結(jié)構(gòu)。

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
  <ul class="nav sidebar-nav">
    <li class="sidebar-brand">
      <a href="#">卡卡測速網(wǎng)</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-home"></i> 首頁</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-folder"></i> 網(wǎng)站測速</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-file-o"></i> Ping測試</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-cog"></i> 網(wǎng)站診斷</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> 網(wǎng)站優(yōu)化 <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">二級菜單頭部</li>
        <li><a href="#">二級菜單</a></li>
        <li><a href="#">二級菜單</a></li>
        <li><a href="#">二級菜單</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-dropbox"></i> DNS查詢</a>
    </li>
  </ul>
</nav>

外層標(biāo)簽是一個nav，其id屬性值是sidebar-wrapper。

ul為導(dǎo)航的容器，li是菜單項。

當(dāng)li的class屬性值為dropdown時，該菜單項下有個二級菜單。二級菜單也是ul li的結(jié)構(gòu)。

注意每個菜單文字前面有個<i>標(biāo)簽，這是字體圖標(biāo)，它的class屬性為fa fa-fw  ...，不同的class值，代表不同的圖標(biāo)。

CSS

本示例CSS文件包含兩個：bootstrap.css和style.css，其中bootstrap.css是bootstrap框架樣式，而style.css就是本示例導(dǎo)航的樣式設(shè)計了。

nav標(biāo)簽的id屬性值sidebar-wrapper，設(shè)置導(dǎo)航盒子的位置等樣式；.navbar-inverse是背景顏色設(shè)置。

#sidebar-wrapper {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  background: #1a1a1a;
  height: 100%;
  left: 220px;
  margin-left: -220px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.5s ease;
  width: 0;
  z-index: 1000;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

 ul標(biāo)簽的class屬性值 sidebar-nav 是設(shè)置導(dǎo)航容器的位置、大小等樣式。

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 220px;
}

.sidebar-nav li {...} 設(shè)置列舉項位置、高寬等樣式。

.sidebar-nav li {
  display: inline-block;
  line-height: 20px;
  position: relative;
  width: 100%;
}

.fa .fa-fw ... 是設(shè)置菜單文字前面的字體圖標(biāo)。

.fa-folder::before {
  content: "\f07b"; /* 字體圖標(biāo) */
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

JavaScript

本示例需要jQuery編程，并且用到JS插件：bootstrap.min.js。jQuery編程主要是實現(xiàn)鼠標(biāo)懸停和點擊事件。

<script src="statics/js/jquery-3.2.1.min.js"></script>
<script src="statics/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;
  trigger.click(function() {
    hamburger_cross();
  });

  function hamburger_cross() {
    if (isClosed == true) {
      overlay.hide();
      trigger.removeClass('is-open');
      trigger.addClass('is-closed');
      isClosed = false;
    } else {
      overlay.show();
      trigger.removeClass('is-closed');
      trigger.addClass('is-open');
      isClosed = true;
    }
  }
  $('[data-toggle="offcanvas"]').click(function() {
    $('#wrapper').toggleClass('toggled');
  });
});
</script>

FontAwesome圖標(biāo)字體的使用

本示例用了圖標(biāo)字體FontAwesome，所以需要引用FontAwesome的圖標(biāo)字體庫文件，本示例的style.css文件里導(dǎo)入FontAwesome文件：

@import "../font-awesome/4.6.0/css/font-awesome.min.css";

注意，需要在你的web服務(wù)器進(jìn)行相關(guān)配置，以支持該圖標(biāo)字體。

FontAwesome是最常用的圖標(biāo)字體，有關(guān)FontAwesome字體的介紹及使用，可看看我寫的幾篇文章。

• Linux Nginx安裝配置Font Awesome圖標(biāo)字體
• IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法
• IIS6.0安裝配置FontAwesome圖標(biāo)字體運(yùn)行環(huán)境

總結(jié)

本文介紹了一款很漂亮的 Bootstrap 3 側(cè)欄滑動導(dǎo)航菜單，喜歡的朋友可以收藏本頁，也可以直接下載源碼備用。

相關(guān)文章

• 一款漂亮的CSS3藍(lán)色垂直導(dǎo)航菜單
• 二級菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• CSS3 PC/移動響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• 常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實現(xiàn)可伸縮可折疊的左邊側(cè)欄項目導(dǎo)航菜單
• 純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)簽: Bootstrap  側(cè)欄導(dǎo)航  導(dǎo)航欄  導(dǎo)航菜單  菜單