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-color 类添加到 w3-sidebar 以更改背景颜色。如果你想使用一个活动/当前链接，以便让用户知道他/她在哪个页面上，请将 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 类将侧边导航显示为卡片
可悬停的链接
当你将鼠标悬停在条形块内的链接上时，背景颜色将变为灰色。
如果你想在悬停时使用不同的背景颜色，请使用任何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">下拉菜单 <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>
亲自试一试 »
提示： 当下拉菜单“打开”时，下拉链接将获得灰色背景颜色，以指示其处于活动状态。 要覆盖此功能，请向“下拉菜单”<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()">下拉菜单</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% 透明度的黑色背景 - 此效果将“突出显示”侧边导航。
示例
<!-- 侧边栏 -->
<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>
<!-- 覆盖 -->
<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 -->
<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">首页</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">关于</a>
<a href="#" class="w3-bar-item w3-button">联系我们</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>
亲自试一试 »
