CSS 垂直導航欄
垂直導航欄
要構建一個垂直導航欄，除了上一頁的程式碼之外，您還可以對列表中的 <a> 元素進行樣式設定。
示例說明
display: block;- 將連結顯示為塊級元素，使整個連結區域（而不僅僅是文字）可點選，並允許我們指定寬度（以及可選的內邊距、外邊距、高度等）。width: 60px;- 預設情況下，塊級元素會佔據可用寬度的全部。我們希望將其指定為 60 畫素的寬度。
您也可以設定 <ul> 的寬度，並移除 <a> 的寬度，因為當它們顯示為塊級元素時，它們將佔據可用寬度的全部。這將產生與我們之前的示例相同的結果。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
自己動手試一試 »
垂直導航欄示例
建立具有灰色背景色的基本垂直導航欄，並在使用者滑鼠懸停在連結上時更改背景色。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 滑鼠懸停時更改連結顏色 */
li a:hover {
background-color: #555;
color: white;
}
自己動手試一試 »
活動/當前導航連結
為當前連結新增“active”類，以告知使用者他/她當前在哪個頁面。
居中文字並新增邊框
新增 text-align:center 到 <li> 或 <a> 以居中文字。
為 <ul> 新增 border 屬性，在導航欄周圍新增邊框。如果您還希望導航欄內部有邊框，請為除最後一個元素外的所有 <li> 元素新增 border-bottom。
示例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
自己動手試一試 »
全高固定垂直導航欄
建立全高、"粘性"的側邊導航。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高度 */
position: fixed; /* 使其固定，即使滾動 */
overflow: auto; /* 如果側邊導航內容過多，則啟用滾動 */
}
自己動手試一試 »
注意：此示例在移動裝置上可能無法正常工作。
