html折叠菜单栏附带css样式
时间: 2023-07-25 14:17:51 浏览: 70
实现HTML折叠菜单栏可以使用HTML、CSS和JavaScript。下面是一个简单的示例代码:
HTML:
```html
<nav class="nav">
<ul>
<li>
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
<li><a href="#">子菜单项3</a></li>
</ul>
</li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</nav>
```
CSS:
```css
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
position: relative;
margin: 0;
padding: 0;
}
.nav a {
display: block;
padding: 10px;
background-color: #f7f7f7;
color: #333;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
}
.nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f7f7f7;
z-index: 999;
}
.nav ul ul li {
display: block;
width: 100%;
}
.nav ul ul a {
padding: 10px;
color: #333;
}
.nav ul ul a:hover {
background-color: #ddd;
}
```
JavaScript:
```javascript
var nav = document.querySelector('.nav');
var navItems = nav.querySelectorAll('li');
for (var i = 0; i < navItems.length; i++) {
var navItem = navItems[i];
var subNav = navItem.querySelector('ul');
if (subNav) {
navItem.classList.add('has-subnav');
navItem.addEventListener('click', function(event) {
event.preventDefault();
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
var activeNavItem = nav.querySelector('.active');
if (activeNavItem) {
activeNavItem.classList.remove('active');
}
this.classList.add('active');
}
});
}
}
```
以上代码实现了一个具有折叠效果的菜单栏,点击菜单项时可以展开或折叠其子菜单。需要注意的是,CSS中的绝对定位和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)