html 小三角折叠菜单
时间: 2023-07-01 21:14:04 浏览: 77
可以使用HTML和CSS实现小三角折叠菜单。具体实现步骤如下:
1. 创建HTML菜单结构,使用<ul>和<li>标签来创建菜单列表。
2. 在<li>标签中添加一个<a>标签,来定义每个菜单项的链接。
3. 在每个菜单项后添加一个<span>标签,并设置其class属性为“arrow”,来创建小三角。
4. 使用CSS来控制菜单的样式,包括菜单项和小三角的颜色、大小和位置等。
5. 使用JavaScript来实现菜单的折叠和展开功能。
示例代码如下:
HTML代码:
```
<ul class="menu">
<li><a href="#">菜单项1</a><span class="arrow"></span>
<ul class="sub-menu">
<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><span class="arrow"></span>
<ul class="sub-menu">
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
<li><a href="#">子菜单项3</a></li>
</ul>
</li>
<li><a href="#">菜单项3</a><span class="arrow"></span>
<ul class="sub-menu">
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
<li><a href="#">子菜单项3</a></li>
</ul>
</li>
</ul>
```
CSS代码:
```
.menu > li {
position: relative;
display: inline-block;
padding: 5px 10px;
background-color: #eee;
}
.menu > li > a {
color: #333;
text-decoration: none;
}
.menu > li > .arrow {
position: absolute;
top: 50%;
right: 10px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: #eee;
}
.sub-menu > li {
display: block;
width: 100%;
padding: 5px 10px;
}
.sub-menu > li > a {
color: #333;
text-decoration: none;
}
.menu > li:hover > .sub-menu {
display: block;
}
```
JavaScript代码:
```
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("click", function() {
var subMenu = this.parentElement.querySelector(".sub-menu");
if (subMenu.style.display == "block") {
subMenu.style.display = "none";
} else {
subMenu.style.display = "block";
}
});
}
```
这样就可以创建一个简单的小三角折叠菜单,点击菜单项的小三角可以展开或折叠子菜单。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)