標籤：comment 透明 display menu dem 參數 size jquer 結構
為了建立導覽功能表，讓我們先看看html結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Menu Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link href=‘https://fonts.googleapis.com/css?family=Montserrat‘ rel=‘stylesheet‘ type=‘text/css‘>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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;
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 {
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%的寬度，使透明部分佔用的所有連結的寬度。
如何用CSS和jQuery實現一個側滑導覽功能表
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
