写一段可折叠展开的左侧菜单栏代码
时间: 2023-07-10 21:23:09 浏览: 55
好的,下面是一个简单的可折叠展开的左侧菜单栏代码:
HTML:
```
<div class="sidebar">
<button class="sidebar-toggle">菜单</button>
<nav class="sidebar-nav">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
</ul>
</nav>
</div>
```
CSS:
```
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px; /* 侧边栏宽度 */
height: 100%;
background: #333;
color: #fff;
z-index: 9999;
}
.sidebar-toggle {
display: block;
width: 100%;
padding: 10px;
text-align: center;
background: #444;
border: none;
color: #fff;
cursor: pointer;
}
.sidebar-nav {
display: none;
}
.sidebar-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-nav li {
margin: 0;
padding: 0;
}
.sidebar-nav a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #666;
}
.sidebar-nav a:hover {
background: #444;
}
```
JavaScript:
```
const sidebarToggle = document.querySelector('.sidebar-toggle');
const sidebarNav = document.querySelector('.sidebar-nav');
sidebarToggle.addEventListener('click', () => {
sidebarNav.classList.toggle('show');
});
```
在这个代码中,我们通过添加一个按钮和一个侧边栏导航菜单来创建侧边栏。通过 JavaScript,我们为按钮添加了一个点击事件监听器,当点击按钮时,侧边栏导航菜单的显示状态会切换。在 CSS 中,我们使用了一些样式来设置侧边栏和菜单项的样式,并使用了一个隐藏类来控制菜单栏的显隐。