jQuery CSS實作一個側滑導覽選單程式碼_jquery
- PHP中文网原創
- 2016-05-16 09:00:312265瀏覽
側滑選單在網站設計中應用較廣泛，在許多網站上都可以看到此種類型的選單。它可以展示重點訊息，使其更有可讀性和美觀性，滿足用戶體驗價值！
今天小編給大家展示如何使用jquery和css實現側滑選單。
為了建立導航選單，讓我們先來看看html結構：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>animation menu demo</title> <link rel="stylesheet" href=" <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href=" <script src=" </script> <script src="script.js"> </script> <link rel="stylesheet" href="style.css"> </head><body> <!-- content goes here --> </body> </html>
首先，我們引用normalize.css作為預設樣式，以確保我們的選單在每個瀏覽器是一樣的。我們使用字體圖示fontawesome來顯示選單項目向下的圖示。我們還需要引用jquery來實現選單的切換。
面板按鈕
每個網站面板導航按鈕都類似。它往往是一個圖標字體，例如fontawesome，但在本教程中我想添加一些動畫，所以我們用橫線來實現。基本上，我們的按鈕是一個跨度，包含三個div顯示為水平橫線。
<span class="toggle-button"> <div class="menu-bar menu-bar-top"></div> <div class="menu-bar menu-bar-middle"></div> <div class="menu-bar menu-bar-bottom"></div> </span>
樣式看起來如下：
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}按鈕有固定的位置，不動時捲動頁面。它也有一個 z-index :15的樣式，以確保它總是保持在其他重疊元素之上。按鈕由三條橫線。每橫線都有自已的樣式，我們給它加上.menu-bar樣式。類別其餘的樣式被移動到單獨的樣式檔案中。動畫發生時，我們新增一個類別.button-open。我們引用jquery，可以比較方便的實現它：
$(document).ready(function() {
var $togglebutton = $('.toggle-button');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
});
});初學者可能不熟悉jquery，讓我解釋一下這是怎麼回事。首先，我們初始化一個變數稱為$togglebutton，其中包含我們的按鈕。我們將它儲存為一個變量，然後我們建立一個事件監視器監聽點擊按鈕。每點選一次，事件監聽器會執行方法 function toggleclass()來切換.button-open。
.button-open我們可以用它來改變這些元素的顯示方式。我們使用css3 translate()和rotate()功能使頂部和底部的橫線旋轉45度，與中間的橫線逐漸消失。你可以點擊demo中的按鈕來看看效果。
側滑選單
側滑選單的html的結構如下：
<div class="menu-wrap"> <div class="menu-sidebar"> <ul class="menu"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">blog</a></li> <li class="menu-item-has-children"><a href="#">click the arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <li><a href="#">alignment</a></li> <li><a href="#">markup</a></li> <li><a href="#">comments</a></li> </ul> </li> <li><a href="#">courses</a></li> <li><a href="#">get in touch</a></li> </ul> </div> </div>
在這裡不詳細解釋每個風格的選單，我們看下.menu-wrap 的div。它的樣式如下：
.menu-wrap {
background-color: #6968ab;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}它的位置是固定的，所以選單一直在同一個地方滾動。高度設為100%。注意，左邊距設定為負數，使此選單從視圖中消失。為了讓它有一個出現的特效，我們用jquery來了呼叫另一class來顯示和關閉。 javascript程式碼如下：
$(document).ready(function() {
var $togglebutton = $('.toggle-button'),
$menuwrap = $('.menu-wrap');
$togglebutton.on('click', function() {
$(this).toggleclass('button-open');
$menuwrap.toggleclass('menu-show');
});
});我們增加一個變數$menuwrap其中包含選單的所有項，並使用相同的事件來建立按鈕。這個.menu-show的左邊距為0，並增加了一些盒子陰影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #b9adad;
}子選單和連結
你可能會注意到一個清單項目的class .menu-item-has-children。包含子選單。同時，連結後，有一個class .sidebar-menu-arrow。
<li class="menu-item-has-children"><a href="#">click the arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <!-- list items --> </ul> </li>
span 有一個::after偽元素包實作fontawesome箭頭。預設情況下，子選單是隱藏的，只有在點擊父級選單時才出現：
$(document).ready(function() {
var $sidebararrow = $('.sidebar-menu-arrow');
$sidebararrow.click(function() {
$(this).next().slidetoggle(300);
});
});當我們點擊箭頭，一個函數被呼叫時，它的目標的下一個元素之後的span並使其可見。我們使用的jquery的slidetoggle。它使一個元素滑動效果的出現或消失，函數有一個動畫時間參數。
最後，我們的示範選單項目有一個懸停效果。它是使用一個::after偽元素。程式碼如下：
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #fffa3b 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}這個::after偽元素包含在每個環節下絕對定位的區塊級元素，隨著0.15em高度和寬度。我們不只是應用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個功能的目的是使顏色梯度，我們可以透過指定的百分比，做了一個漸變的顏色變化。
.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}這裡一半的線是透明的，另一半是黃色的。透過背景大小200%的寬度，使透明部分所佔用的所有連結的寬度。
而透明的部分可以用其他顏色。這將創建一個線的另一個顏色填充的錯覺，但實際上它只是一二色線。
以上就是jquery css實作一個側滑導覽選單碼_jquery的內容，更多相關內容請關注php中文網（www.php.cn）！