欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

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

贊助商

分類目錄

贊助商

最新文章

搜索

很漂亮的 Bootstrap 3 側欄滑動導航菜單【演示/源碼下載】

作者:admin    時間:2023-5-11 19:53:39    瀏覽:

本文介紹一款由 Bootstrap 3 框架實現的側欄滑動導航菜單，設計得非常漂亮好看。

效果圖

 很漂亮的 Bootstrap 3 側欄滑動導航菜單

demodownload

示例介紹

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

  • 默認隱藏側欄導航。
  • 點擊左上角三橫圖標時，滑出導航。
  • 點擊叉圖標時，縮進導航。
  • 鼠標懸停到菜單項上時，該菜單背景顏色以動畫形式轉換。
  • 主菜單可以有二級菜單，當點擊主菜單時顯示二級菜單。

HTML代碼

下面是導航的HTML代碼結構。

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
  <ul class="nav sidebar-nav">
    <li class="sidebar-brand">
      <a href="#">卡卡測速網</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> 網站測速</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> 網站診斷</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> 網站優化 <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>

外層標簽是一個nav，其id屬性值是sidebar-wrapper。

ul為導航的容器，li是菜單項。

當li的class屬性值為dropdown時，該菜單項下有個二級菜單。二級菜單也是ul li的結構。

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

CSS

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

nav標簽的id屬性值sidebar-wrapper，設置導航盒子的位置等樣式；.navbar-inverse是背景顏色設置。

#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標簽的class屬性值 sidebar-nav 是設置導航容器的位置、大小等樣式。

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

sidebar-nav設置導航容器的位置、大小等樣式 

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

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

.sidebar-nav li 設置列舉項位置、高寬等樣式 

.fa .fa-fw ... 是設置菜單文字前面的字體圖標。

.fa-folder::before {
  content: "\f07b"; /* 字體圖標 */
}
.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;
}

.fa .fa-fw ... 是設置菜單文字前面的字體圖標 

JavaScript

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

<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圖標字體的使用

本示例用了圖標字體FontAwesome，所以需要引用FontAwesome的圖標字體庫文件，本示例的style.css文件里導入FontAwesome文件：

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

注意，需要在你的web服務器進行相關配置，以支持該圖標字體。

FontAwesome是最常用的圖標字體，有關FontAwesome字體的介紹及使用，可看看我寫的幾篇文章。

總結

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

相關文章

x