卡卡網(wǎng)

前面介紹過一個(gè)《簡單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)》，那是簡約風(fēng)格的設(shè)計(jì)，適合用于某些簡約網(wǎng)頁模板上。今天，我要介紹的是，一個(gè)非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)，這個(gè)導(dǎo)航欄做得非常用心，哪怕一個(gè)邊角，都是精雕細(xì)琢的精致設(shè)計(jì)。下面我們就來看看吧。

實(shí)例介紹

PC端，導(dǎo)航欄目在右上邊對(duì)齊排列，每個(gè)欄目名稱前面有個(gè)圖標(biāo)，這里使用的是font-awesome圖標(biāo)，當(dāng)前欄目以圓角高亮凸顯出來，欄目切換有過渡動(dòng)畫。

移動(dòng)端，右上角有一個(gè)打開/關(guān)閉導(dǎo)航按鈕，導(dǎo)航欄向下滑出打開，向上滑動(dòng)關(guān)閉。導(dǎo)航欄目在屏幕左側(cè)豎向排列，欄目切換有過渡動(dòng)畫。

代碼介紹

插件

本實(shí)例需要用到的插件比較多，CSS要用到bootstrap樣式文件，由于項(xiàng)目名稱前加了一個(gè)圖標(biāo)，這個(gè)圖標(biāo)用的是font-awesome字體圖標(biāo)插件。所以，CSS需要引用以下兩個(gè)文件：

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

欄目切換動(dòng)畫、點(diǎn)擊事件，用JQuery程序?qū)崿F(xiàn)，另外用到bootstrap插件。因此，需要引用以下兩個(gè)js文件：

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

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

CSS代碼

PC端和移動(dòng)端的臨界寬度定義，991px。

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

使用Li的排版結(jié)構(gòu)。我們可以調(diào)整各項(xiàng)目間距和寬度。

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

HTML代碼

使用Li的排版結(jié)構(gòu)。我們可以通過CSS調(diào)整各項(xiàng)目間距和寬度。

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

<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

您可能對(duì)以下文章也感興趣

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

標(biāo)簽: 響應(yīng)式導(dǎo)航  導(dǎo)航欄  導(dǎo)航菜單