操作指南 - 下拉侧边栏
了解如何在侧边导航中添加下拉菜单。
侧边栏中的下拉菜单
创建下拉侧边栏
步骤 1）添加 HTML
示例
<div class="sidenav">
<a href="#about">关于</a>
<a href="#services">服务</a>
<a href="#clients">客户</a>
<a href="#contact">联系</a>
<button class="dropdown-btn">下拉
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
<a href="#contact">搜索</a>
</div>
示例说明
使用任何元素打开下拉菜单，例如 <button>、<a> 或 <p> 元素。
使用容器元素（如 <div>）创建下拉菜单并在其中添加下拉链接。我们将对侧边栏中的所有链接使用相同的样式。
步骤 2）添加 CSS
示例
/* 固定侧边栏，全高 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* 侧边栏链接和下拉按钮样式 */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* 鼠标悬停 */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* 主要内容 */
.main {
margin-left: 200px; /* 与侧边栏宽度相同 */
font-size: 20px; /* 增大文字以允许滚动 */
padding: 0px 10px;
}
/* 为活动下拉按钮添加活动类 */
.active {
background-color: green;
color: white;
}
/* 下拉容器（默认隐藏）。可选：添加较浅的背景色和一些左填充来改变下拉内容的设计 */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* 可选：设置向下箭头图标的样式 */
.fa-caret-down {
float: right;
padding-right: 8px;
}
尝试一下 »
步骤 3) 添加 JavaScript
示例
//* 循环遍历所有下拉按钮以在隐藏和显示其下拉内容之间切换 - 这允许用户拥有多个下拉菜单而不会产生任何冲突 */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
尝试一下 »
提示：访问我们的 CSS 下拉菜单教程 以了解更多关于下拉菜单的信息。
提示：访问我们的 可点击的下拉菜单 以了解更多关于可点击的下拉菜单的信息。
提示：访问我们的 CSS 导航栏教程 以了解更多关于导航栏的信息。
提示：访问我们的 侧边导航教程 以了解如何创建可关闭的侧边导航。
