|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
非常漂亮的響應式導航欄設計
作者:admin 時間:2021-8-31 14:4:55 瀏覽:前面介紹過一個《簡單實用的響應式導航菜單設計》，那是簡約風格的設計，適合用于某些簡約網(wǎng)頁模板上。今天，我要介紹的是，一個非常漂亮的響應式導航欄設計，這個導航欄做得非常用心，哪怕一個邊角，都是精雕細琢的精致設計。下面我們就來看看吧。
實例介紹
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程序實現(xiàn)，另外用到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插件，并非單一的文件，它們有一些關聯(lián)的文件不能缺失，比如font-awesome除了一個all.css樣式文件外，關聯(lián)的文件多大15個。
CSS代碼
PC端和移動端的臨界寬度定義，991px。
@media (max-width: 991px){
... ...
}使用Li的排版結構。我們可以調(diào)整各項目間距和寬度。
#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調(diào)整各項目間距和寬度。
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>
您可能對以下文章也感興趣
- 站長推薦
