如何操作 - 摺疊側邊欄
瞭解如何建立可摺疊的側邊欄選單。
點選按鈕開啟可摺疊側邊欄
自己動手試一試 »
建立可摺疊側邊欄
步驟 1) 新增 HTML
示例
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">關於</a>
<a href="#">服務</a>
<a href="#">客戶</a>
<a href="#">聯絡</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ 開啟側邊欄</button>
<h2>可摺疊側邊欄</h2>
<p>內容...</p>
</div>
步驟 2) 新增 CSS
示例
/* 側邊欄選單 */
.sidebar {
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 秒過渡效果，滑動側邊欄 */
}
/* 側邊欄連結 */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* 當滑鼠懸停在導航連結上時，改變它們的顏色 */
.sidebar a:hover {
color: #f1f1f1;
}
/* 定位並樣式化關閉按鈕（右上角）*/
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* 用於開啟側邊欄的按鈕 */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* 樣式頁面內容 - 如果您想在開啟側邊導航時將頁面內容推到右側，請使用此樣式 */
#main {
transition: margin-left .5s; /* 如果您想要過渡效果 */
padding: 20px;
}
/* 在較小的螢幕上，當高度小於 450px 時，改變側邊導航的樣式（更少的內邊距和更小的字型大小）*/
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
步驟 3) 新增 JavaScript
示例
/* 設定側邊欄寬度為 250px，頁面內容左邊距為 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* 設定側邊欄寬度為 0，頁面內容左邊距為 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
自己動手試一試 »
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
