W3.CSS 導航欄
水平柱狀圖
水平導航欄是常見的網頁設計元素
w3-bar 類用於設定水平導航欄的樣式
示例
<div class="w3-bar w3-green">
<div class="w3-bar-item">倫敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">東京</div>
</div>
w3-bar-item 類的目的是提供正確的間距、內邊距和定位。
垂直導航欄
垂直導航欄（側邊欄）在網頁設計中也很常見
w3-bar-block 類用於設定垂直導航欄的樣式
示例
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">倫敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">東京</div>
</div>
導航欄顏色
您可以使用任何顏色來設定導航欄的樣式
示例
<div class="w3-bar w3-black">
<div class="w3-bar-item">倫敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">東京</div>
</div>
懸停顏色
您可以使用任何懸停顏色來設定導航欄的樣式
將滑鼠懸停在導航欄項上以檢視效果
示例
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">倫敦</div>
<div class="w3-bar-item w3-hover-green">巴黎</div>
<div class="w3-bar-item w3-hover-blue">東京</div>
</div>
導航欄連結
提供導航是導航欄的典型用途
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">倫敦</a>
<a href="#" class="w3-bar-item w3-hover-green">巴黎</a>
<a href="#" class="w3-bar-item w3-hover-green">東京</a>
</div>
導航欄按鈕
w3-button 類非常適合設定導航欄中連結的樣式。
將滑鼠懸停在導航欄項上以檢視效果
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">倫敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button">東京</a>
</div>
響應式導航欄
w3-mobile 類非常適合使導航欄項實現響應式。
調整視窗大小以檢視效果
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">倫敦</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">東京</a>
</div>
右對齊導航欄項
w3-right 類非常適合使導航欄項右對齊
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">倫敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-right">東京</a>
</div>
