側滑菜單在網站設計中應用比較廣泛，在許多網站上都可以看到此種類型的菜單。它可以展示重點信息，使其更有可讀性和美觀性，滿足用戶體驗價值！
今天小編給大家展示如何使用jquery和css實現側滑菜單。
為了建立導航菜單，讓我們先看看html結構：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Animation Menu Demo</title><link rel="stylesheet" ><link rel='stylesheet' type='text/css'><link rel="stylesheet" ><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></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%的寬度，使透明部分占用的所有鏈接的寬度。
而透明的部分可以用其他顏色。這將創建一個線的另一個顏色填充的錯覺，但實際上它只是一二色線。
新聞熱點
疑難解答
