用js做一个下拉菜单的特效
时间: 2023-11-28 17:48:52 浏览: 29
好的,下面是一个简单的下拉菜单特效的代码示例:
HTML:
```
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</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="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</nav>
```
CSS:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
position: relative;
}
nav a {
display: block;
padding: 2px 10px;
color: #333;
text-decoration: none;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul a {
padding: 5px 10px;
}
nav li:hover > ul {
display: block;
}
```
JavaScript:
```
// 获取所有的菜单项
var menuItems = document.querySelectorAll('nav > ul > li');
// 遍历菜单项
menuItems.forEach(function(menuItem) {
// 获取子菜单
var subMenu = menuItem.querySelector('ul');
// 如果存在子菜单,则给父菜单添加特殊的 class
if (subMenu) {
menuItem.classList.add('has-submenu');
}
});
```
在上面的代码中,我们首先使用 CSS 实现了一个简单的下拉菜单样式,然后使用 JavaScript 获取所有的菜单项并遍历它们。对于每个菜单项,我们检查它是否有子菜单,如果有,则添加一个特殊的 class(例如“has-submenu”),用于显示子菜单。最后,我们只需要使用 CSS 将子菜单设置为不可见,并在菜单项上添加事件监听器,以便在鼠标悬停时显示子菜单即可。