如何 TO - 側滑選單
瞭解如何建立側滑選單。
自己動手試一試 »
建立側滑選單
步驟 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";
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";
}
自己動手試一試 »
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
