如何创建 - 下拉侧边栏
了解如何在侧边导航中添加下拉菜单。
侧边导航中的下拉菜单
创建一个下拉侧边栏
步骤 1) 添加 HTML:
实例
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#contact">Search</a>
</div>
实例解析
使用任何元素打开下拉菜单，例如 <button>, <a> 或 <p> 元素。
使用容器元素（如 <div>）创建下拉菜单并在其中添加下拉链接。 我们将为 sidenav 内的所有链接使用相同的样式。
步骤 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 链接和下拉按钮的样式 */
.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;
/* 与 sidenav 的宽度相同 */
font-size: 20px;
/* Increased text to enable scrolling */
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 导航栏教程 ，了解有关导航栏的更多信息。
提示: 转到我们的 侧边导航教程，了解如何创建可关闭的侧边导航。
