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; /* 如果側欄的內容太多,則啟用滾動條 */ }
注意:本例在移動設備上可能無法正常工作。