如何做 - 側邊導航
瞭解如何建立一個可動畫、可關閉的側邊導航選單。
自己動手試一試 »
建立動畫側邊導航
步驟 1) 新增 HTML
示例
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">關於</a>
<a href="#">服務</a>
<a href="#">客戶</a>
<a href="#">聯絡</a>
</div>
<!-- 使用任何元素開啟側導航 -->
<span onclick="openNav()">開啟</span>
<!-- 如果您只想讓側邊導航位於頁面頂部，請將所有頁面內容放在此 div 中（如果只希望側邊導航覆蓋頁面，則不使用此 div） -->
<div id="main">
...
</div>
步驟 2) 新增 CSS
示例
/* 側邊導航選單 */
.sidenav {
height: 100%; /* 100% 全高 */
width: 0; /* 0 寬度 - 透過 JavaScript 更改 */
position: fixed; /* 定位 */
z-index: 1; /* 保持在頂層 */
top: 0; /* 保持在頂部 */
left: 0;
background-color: #111; /* 黑色 */
overflow-x: hidden; /* 停用水平滾動 */
padding-top: 60px; /* 內容距離頂部 60px */
transition: 0.5s; /* 0.5 秒過渡效果，用於滑動側邊導航 */
}
/* 導航菜單鏈接 */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* 當滑鼠懸停在導航連結上時，改變它們的顏色 */
.sidenav a:hover {
color: #f1f1f1;
}
/* 定位並樣式化關閉按鈕（右上角）*/
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* 樣式頁面內容 - 如果您想在開啟側邊導航時將頁面內容推到右側，請使用此樣式 */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* 在較小的螢幕上，當高度小於 450px 時，改變側邊導航的樣式（更少的內邊距和更小的字型大小）*/
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
步驟 3) 新增 JavaScript
以下示例滑動側邊導航，並使其寬度為 250px
側導航覆蓋示例
/* 設定側邊導航的寬度為 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* 設定側邊導航的寬度為 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
自己動手試一試 »
以下示例滑動側邊導航，並將頁面內容推到右側（用於設定側邊導航寬度的值也用於設定“頁面內容”的左邊距）
側導航推送內容
/* 將側邊導航的寬度設定為 250px，並將頁面內容的左邊距設定為 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* 將側邊導航的寬度設定為 0，並將頁面內容的左邊距設定為 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
自己動手試一試 »
以下示例也滑動側邊導航，並將頁面內容推到右側，但這次我們為 body 元素添加了帶有 40% 不透明度的黑色背景顏色，以“突出”側邊導航
側導航推送內容（帶不透明度）
/* 將側邊導航的寬度設定為 250px，並將頁面內容的左邊距設定為 250px，併為 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)";
}
/* 將側邊導航的寬度設定為 0，並將頁面內容的左邊距設定為 0，並將 body 的背景顏色設定為白色 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
自己動手試一試 »
以下示例從左側滑動側邊導航，並覆蓋整個頁面（100% 寬度）
側導航全寬
/* 開啟側導航 */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
/* 關閉/隱藏側導航 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
自己動手試一試 »
以下示例會在沒有動畫的情況下開啟和關閉側邊導航選單
無動畫側導航
/* 開啟側導航 */
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}
/* 關閉/隱藏側導航 */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
自己動手試一試 »
以下示例顯示如何建立右側導航選單
以下示例顯示如何建立始終顯示（固定）的側邊導航選單
始終顯示側邊導航
/* 側邊導航 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* 頁面內容 */
.main {
margin-left: 200px; /* 與側邊導航寬度相同 */
}
自己動手試一試 »
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
