用js写一个平滑的二级菜单
时间: 2024-05-04 17:18:39 浏览: 11
以下是一个基于JavaScript和CSS实现的平滑的二级菜单的示例代码:
HTML代码:
```html
<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>
<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>
</ul>
</nav>
```
CSS代码:
```css
nav ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px 20px;
color: #333;
font-size: 16px;
text-decoration: none;
}
nav ul li:hover > a {
background-color: #666;
color: #fff;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f2f2f2;
padding: 0;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
padding: 10px 20px;
color: #333;
font-size: 14px;
text-decoration: none;
}
nav ul ul li a:hover {
background-color: #666;
color: #fff;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul ul {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: #f2f2f2;
}
nav ul ul ul li {
display: block;
}
nav ul ul ul li a {
display: block;
padding: 10px 20px;
color: #333;
font-size: 14px;
text-decoration: none;
}
nav ul ul ul li a:hover {
background-color: #666;
color: #fff;
}
nav ul ul li:hover > ul {
display: inherit;
}
@media screen and (max-width: 768px) {
nav ul li {
display: block;
width: 100%;
}
nav ul li:hover {
background-color: #666;
}
nav ul ul {
position: static;
display: none;
}
nav ul ul li {
display: inline-block;
width: 100%;
}
}
```
JavaScript代码:
```js
// 获取所有的一级菜单项
var menuItems = document.querySelectorAll('nav > ul > li');
// 遍历一级菜单项,并为每个菜单项添加事件监听器
menuItems.forEach(function(item) {
// 获取当前菜单项下的二级菜单
var subMenu = item.querySelector('ul');
// 如果当前菜单项下有二级菜单,则为其添加事件监听器
if (subMenu) {
// 为鼠标移入事件添加监听器
item.addEventListener('mouseenter', function() {
subMenu.style.opacity = 0; // 让二级菜单的透明度从0开始渐变到1
subMenu.style.display = 'block'; // 显示二级菜单
var opacity = 0; // 透明度初始化为0
var timer = setInterval(function() {
opacity += 0.1; // 每10毫秒透明度增加0.1
subMenu.style.opacity = opacity; // 设置当前透明度
if (opacity >= 1) { // 如果透明度达到1,则停止定时器
clearInterval(timer);
}
}, 10);
});
// 为鼠标移出事件添加监听器
item.addEventListener('mouseleave', function() {
var opacity = 1; // 透明度初始化为1
var timer = setInterval(function() {
opacity -= 0.1; // 每10毫秒透明度减少0.1
subMenu.style.opacity = opacity; // 设置当前透明度
if (opacity <= 0) { // 如果透明度达到0,则停止定时器
clearInterval(timer);
subMenu.style.display = 'none'; // 隐藏二级菜单
}
}, 10);
});
}
});
```
通过以上代码,可以实现一个平滑的二级菜单,当鼠标移入一级菜单项时,二级菜单会从透明度为0的状态渐变到透明度为1的状态,当鼠标移出一级菜单项时,二级菜单会从透明度为1的状态渐变到透明度为0的状态并最终消失。同时,该菜单还支持响应式布局,当屏幕宽度小于等于768px时,菜单项会变为纵向排列。