卡卡網

前面介紹過一個《簡單實用的響應式導航菜單設計》，那是簡約風格的設計，適合用于某些簡約網頁模板上。今天，我要介紹的是，一個非常漂亮的響應式導航欄設計，這個導航欄做得非常用心，哪怕一個邊角，都是精雕細琢的精致設計。下面我們就來看看吧。

實例介紹

PC端，導航欄目在右上邊對齊排列，每個欄目名稱前面有個圖標，這里使用的是font-awesome圖標，當前欄目以圓角高亮凸顯出來，欄目切換有過渡動畫。

移動端，右上角有一個打開/關閉導航按鈕，導航欄向下滑出打開，向上滑動關閉。導航欄目在屏幕左側豎向排列，欄目切換有過渡動畫。

代碼介紹

插件

本實例需要用到的插件比較多，CSS要用到bootstrap樣式文件，由于項目名稱前加了一個圖標，這個圖標用的是font-awesome字體圖標插件。所以，CSS需要引用以下兩個文件：

<link rel='stylesheet' href='bootstrap/css/bootstrap.min.css'>
<link rel='stylesheet' href='font-awesome/5.10.2/css/all.css'>

欄目切換動畫、點擊事件，用JQuery程序實現，另外用到bootstrap插件。因此，需要引用以下兩個js文件：

<script src='js/jquery-3.2.1.min.js'></script>
<script src='bootstrap/js/bootstrap-4.3.1.min.js'></script>

需要注意的是，以上CSS和JS插件，并非單一的文件，它們有一些關聯的文件不能缺失，比如font-awesome除了一個all.css樣式文件外，關聯的文件多大15個。

CSS代碼

PC端和移動端的臨界寬度定義，991px。

@media (max-width: 991px){
   ... ...
}

使用Li的排版結構。我們可以調整各項目間距和寬度。

#navbarSupportedContent ul{
  padding: 0px;
  margin: 0px;
}
#navbarSupportedContent ul li a i{
  margin-right: 10px;
}
#navbarSupportedContent li {
  list-style-type: none;
  float: left;
}

HTML代碼

使用Li的排版結構。我們可以通過CSS調整各項目間距和寬度。

fa-address-book、fa-clone、fa-calendar-alt等這些類，都是font-awesome字體圖標，可以看看這篇文章《Font Awesome V5 1000個圖標及對應編碼【含庫文件下載】》，你也可以選用不同的圖標。

<ul class="navbar-nav ml-auto">
  <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
    </li>
</ul>

demodownload

您可能對以下文章也感興趣

• 簡單實用的響應式導航菜單設計
• CSS3實現的可縮進的側欄導航菜單
• 漂亮的純CSS3水平導航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導航菜單
• 又一個隨內容滾動而變化的側邊/左側目錄導航
• 側邊/左側目錄導航隨內容滾動而變化
• 純CSS：非常漂亮的左側導航/內容目錄導航
• 簡單卻實用的CSS水平和垂直導航欄【演示/源碼】

標簽: 響應式導航  導航欄  導航菜單