如何操作 - 固定側邊欄
瞭解如何使用 CSS 建立一個固定的側邊導航選單。
建立固定側邊欄
步驟 1) 新增 HTML
示例
<!-- 側邊導航 -->
<div class="sidenav">
<a href="#">關於</a>
<a href="#">服務</a>
<a href="#">客戶</a>
<a href="#">聯絡</a>
</div>
<!-- 頁面內容 -->
<div class="main">
...
</div>
步驟 2) 新增 CSS
示例
/* 側邊欄選單 */
.sidenav {
height: 100%; /* 全高：如果您想要“自動”高度，請刪除此行 */
width: 160px; /* 設定側邊欄的寬度 */
position: fixed; /* 固定側邊欄（滾動時保持在原位） */
z-index: 1; /* 保持在頂部 */
top: 0; /* 保持在頂部 */
left: 0;
background-color: #111; /* 黑色 */
overflow-x: hidden; /* 停用水平滾動 */
padding-top: 20px;
}
/* 導航菜單鏈接 */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* 當滑鼠懸停在導航連結上時，改變它們的顏色 */
.sidenav a:hover {
color: #f1f1f1;
}
/* 樣式頁面內容 */
.main {
margin-left: 160px; /* 與側邊欄寬度相同 */
padding: 0px 10px;
}
/* 在較小的螢幕上，當高度小於 450px 時，更改側邊欄的樣式（減少內邊距和字型大小） */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
嘗試一下（全高）» 嘗試一下（自動高度）»提示： 請參閱我們的 CSS 導航欄 教程，瞭解更多關於導航欄的資訊。
提示： 請參閱我們的 如何操作 - 側邊導航 教程，瞭解如何建立可動畫、可關閉的側邊導航。
