W3.CSS 側邊欄
W3.CSS 垂直導航欄
使用側邊導航，您有幾種選擇
- 始終將導航窗格顯示在頁面內容的左側
- 使用可摺疊的“全自動”響應式側邊導航
- 在頁面內容左側開啟導航窗格
- 在所有頁面內容上開啟導航窗格
- 開啟導航窗格時將頁面內容向右滑動
- 將導航窗格顯示在右側而不是左側
始終顯示側邊欄
示例
<div class="w3-sidebar w3-bar-block" style="width:25%">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
<div style="margin-left:25%">
... 頁面內容 ...
</div>
自己試試 »
在內容的一部分上開啟側邊欄導航
示例
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
自己試試 »
在內容上開啟側邊欄導航
示例
function w3_open() {
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
自己試試 »
可摺疊響應式側邊導航
示例
<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">關閉 ×</button>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
<div class="w3-main" style="margin-left:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>我的頁面</h1>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
自己試試 »
將頁面內容滑動到右側
示例
function w3_open() {
document.getElementById("main").style.marginLeft = "25%";
document.getElementById("mySidebar").style.width = "25%";
document.getElementById("mySidebar").style.display = "block";
document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}
自己試試 »
右側側邊導航
示例
<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
<h5 class="w3-bar-item">選單</h5>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
<div style="margin-right:25%">
... 頁面內容 ...
</div>
自己試試 »
右側可摺疊導航
示例
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">關閉 ×</button>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
<div class="w3-main" style="margin-right:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">☰</button>
<div class="w3-container">
<h2>我的頁面</h2>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
自己試試 »
左側和右側導航
側邊導航樣式
為 w3-sidebar 新增 w3-color 類以更改背景顏色。如果您想突出顯示當前連結（讓使用者知道他們在哪個頁面上），也請為其中一個連結新增 w3-color 類。
帶邊框的側邊導航
使用 w3-border 類在側邊導航周圍新增邊框
為連結新增 w3-border-bottom 類以建立連結分隔符
示例
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-border-bottom">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
自己試試 »
使用 w3-card 類將側邊導航顯示為卡片
可懸停連結
當您將滑鼠移到 bar block 中的連結上時，背景顏色將變為灰色。如果您希望在懸停時顯示不同的背景顏色，請使用任何 w3-hover-color 類。
如果您想在懸停時顯示不同的背景顏色，請使用任何 w3-hover-color 類
示例
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">連結 3</a>
</div>
自己試試 »
您可以使用 w3-hover-none 類關閉預設的懸停效果。這通常用於您只想突出顯示文字顏色（而不是背景顏色）在懸停時
示例
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">連結 3</a>
</div>
自己試試 »
側邊導航尺寸
增大字號（w3-large 等）
增大內邊距（w3-padding 等）
示例
<div class="w3-sidebar w3-bar-block w3-large">
<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>
自己試試 »
帶圖示的側邊導航
示例
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
</div>
自己試試 »
帶下拉選單的側邊欄
示例
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block">
<a href="#" class="w3-bar-item w3-button">連結</a>
<a href="#" class="w3-bar-item w3-button">連結</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
自己試試 »
提示: 當下拉選單“開啟”時，下拉鍊接將獲得灰色背景顏色以指示它是活動的。要覆蓋此設定，請為“dropdown”<div> 和 <a> 都新增 w3-hover-color 類。
帶摺疊面板的側邊欄
示例
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">摺疊面板</button>
<div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">連結</a>
<a href="#" class="w3-bar-item w3-button">連結</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</button>
<div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">連結</a>
<a href="#" class="w3-bar-item w3-button">連結</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
動畫側邊欄
使用任何 w3-animate-classes 來淡入、縮放或滑動側邊導航
側邊欄覆蓋
w3-overlay 類可用於在開啟側邊欄時建立覆蓋效果。w3-overlay 類為“頁面內容”添加了 50% 透明度的黑色背景 - 這種效果會“突出”側邊導航。
示例
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
<button class="w3-bar-item w3-button" onclick="w3_close()">關閉</button>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<!-- 頁面內容 -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>側邊欄覆蓋</h1>
<p>單擊“漢堡”圖示以滑動側邊導航。</p>
</div>
<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
自己試試 »
側邊欄內容
在側邊導航中隨意新增您喜歡的內容
示例
<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
<div class="w3-container w3-dark-grey">
<h4>選單</h4>
</div>
<img src="img_snowtops.jpg">
<a href="#" class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects
<span class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
<div class="w3-panel w3-blue-grey w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem ipsum box...</p>
</div>
</div>
自己試試 »
