了解如何創建一個動畫，可關閉側邊導航菜單。
創建動畫側面導航
步驟1）添加HTML：
例
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
<!-- Add all page content inside this div if you want the side nav to
push page content to the right (not used if you only want the sidenav to
sit on top of the page -->
<div id="main">
...
</div>步驟2）添加CSS：
例
/* The side navigation menu */
.sidenav {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links,
change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}步驟3）添加JavaScript的：
下面側面導航幻燈片的例子中，並使其250像素寬：
Sidenav疊加實施例
/* Set
the width of the side navigation to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} 試一試» 下面側面導航幻燈片的例子中，並推動頁面內容向右（用於設置sidenav的寬度值也被用於設置“頁內容”的左邊距）：
Sidenav推送內容
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
} 試一試» 下面的例子也滑動側面導航，並推動網頁內容的權利，只是這次，我們添加了一個黑色的背景顏色與透明度為40％至body元素，以"highlight"側面導航：
Sidenav推送內容W /不透明
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to body */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0, and the background color of body to
white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
} 試一試» 以下在從左側側面導航幻燈片的示例並覆蓋整個頁面(100% width) ：
Sidenav全寬：
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} 試一試» 下面的示例打開和關閉側邊導航菜單不動畫：
Sidenav沒有動畫
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
} 試一試» 提示：去我們的CSS教程導航欄 ，以了解更多關於導航欄。