免費AI編程助手
W3.CSS Sidebar (側(cè)欄)
W3.CSS垂直導航欄
使用側(cè)面導航時，您有幾種選擇：
- 始終在頁面內(nèi)容的左側(cè)顯示導航窗格
- 使用可折疊的“全自動”響應式側(cè)面導航
- 打開頁面內(nèi)容左側(cè)的導航窗格
- 在所有頁面內(nèi)容上打開導航窗格
- 打開導航窗格時，將頁面內(nèi)容向右滑動
- 在右側(cè)而不是左側(cè)顯示導航窗格
基本側(cè)欄 （始終顯示）
實例
<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%">
... 頁面內(nèi)容 ...
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
可折疊側(cè)欄
實例
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
側(cè)欄打開遮擋所有頁面內(nèi)容
實例
function w3_open() {
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
可折疊響應式側(cè)欄
實例
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
將頁面內(nèi)容向右滑動
實例
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";
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
右側(cè)欄
實例
<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%">
... 頁面內(nèi)容 ...
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
右側(cè)可折疊側(cè)欄
實例
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
左右側(cè)欄
實例
<script>
function openLeftMenu() {
document.getElementById("leftMenu").style.display = "block";
}
function closeLeftMenu() {
document.getElementById("leftMenu").style.display = "none";
}
function openRightMenu() {
document.getElementById("rightMenu").style.display = "block";
}
function closeRightMenu() {
document.getElementById("rightMenu").style.display = "none";
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
彩色側(cè)欄
添加 w3-color 類的 w3-sidebar 來改變背景顏色。如果您想要一個活動/當前鏈接，要讓用戶知道他/她所在的頁面，請將 w3- color 類也添加到其中一個鏈接中：
帶邊框的側(cè)欄
使用w3-border類在側(cè)面導航周圍添加邊框：
將 w3-border-bottom 類添加到鏈接中以創(chuàng)建鏈接分隔符：
實例
<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 類將側(cè)面導航顯示為卡片：
懸停鏈接
當您將鼠標懸停在條形塊內(nèi)的鏈接上時，背景顏色將變?yōu)榛疑?/p>
如果要在懸停時使用不同的背景色，請使用任何 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 類關(guān)閉默認的懸停效果。當您只想在懸停時突出顯示文本顏色（而不是背景顏色）時，通常使用此方法：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
側(cè)欄尺寸
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶有圖標的側(cè)欄
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶有下拉菜單的側(cè)欄
實例
<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">下拉<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
下拉菜單為“打開”時，下拉鏈接的背景顏色為灰色，表示該菜單處于活動狀態(tài)。要覆蓋它，請將 w3-hover-color 類添加到“下拉列表” <div>和<a>中。
帶有折疊欄的側(cè)欄
實例
<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()">下拉</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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
動畫側(cè)欄
使用 w3-animate 類來淡入，縮放或滑動側(cè)面導航：
帶有疊加效果的側(cè)欄
w3-overlay 類可用于打開所述邊欄時創(chuàng)建的覆蓋效果。w3-overlay 類向“頁面內(nèi)容”添加了不透明度為50％的黑色背景-此效果將“突出顯示”側(cè)面導航。
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
側(cè)欄內(nèi)容
在側(cè)面導航欄中添加您喜歡的任何內(nèi)容：
實例
<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">主頁</a>
<a href="#" class="w3-bar-item w3-button">項目
<span class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">關(guān)于</a>
<a href="#" class="w3-bar-item w3-button">聯(lián)系</a>
<div class="w3-panel w3-blue-grey w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem ipsum 盒子...</p>
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：