CSS 垂直導航欄

垂直導航欄

如需構建垂直導航欄,除了上一章中的代碼外,還可以在列表中設置 <a> 元素的樣式:

實例

li a {
  display: block;
  width: 60px;
}

親自試一試

例子解釋:

  • 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" 類,以使用戶知道他/她在哪個頁面上:

實例

.active {
  background-color: #4CAF50;
  color: white;
}

親自試一試

居中鏈接以及添加邊框

text-align:center 添加到 <li> 或 <a>,使鏈接居中。

border 屬性添加到 <ul>,在導航欄周圍添加邊框。如果您還希望在導航欄內添加邊框,請為所有 <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; /* 如果側欄的內容太多,則啟用滾動條 */
}

親自試一試

注意:本例在移動設備上可能無法正常工作。