html折叠菜单列子,js实现顶部可折叠的菜单工具栏效果实例
时间: 2024-03-05 16:53:28 浏览: 34
好的,下面是一个简单的 HTML 折叠菜单列子,使用 JavaScript 实现顶部可折叠的菜单工具栏效果:
HTML 代码:
```html
<div class="menu">
<button class="menu-btn" onclick="toggleMenu()">菜单</button>
<ul class="menu-list">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
```
CSS 代码:
```css
.menu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.menu-btn {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
}
.menu-list {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: #333;
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
padding: 10px;
}
.menu-list li a {
color: #fff;
text-decoration: none;
}
```
JavaScript 代码:
```js
function toggleMenu() {
const menuList = document.querySelector('.menu-list');
menuList.classList.toggle('show');
}
```
以上代码实现了一个简单的 HTML 折叠菜单和 JavaScript 实现顶部可折叠的菜单工具栏效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)