复杂的JavaScript实现侧面下拉菜单的示例代码
时间: 2024-03-07 19:48:59 浏览: 14
下面是一个复杂的JavaScript实现侧面下拉菜单的示例代码,支持多级菜单、鼠标悬停展开子菜单、点击菜单项跳转链接等功能:
HTML代码:
```
<div class="menu">
<button class="menu-toggle">菜单</button>
<ul class="menu-items">
<li><a href="#">菜单项1</a></li>
<li>
<a href="#">菜单项2</a>
<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>
</ul>
</li>
<li><a href="#">菜单项3</a></li>
</ul>
</div>
```
CSS代码:
```
.menu {
position: relative;
width: 200px;
}
.menu-toggle {
display: block;
width: 100%;
padding: 10px;
background-color: #eee;
border: none;
text-align: left;
cursor: pointer;
}
.menu-items {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
background-color: #fff;
border: 1px solid #999;
list-style: none;
margin: 0;
padding: 0;
}
.menu-items li {
margin: 0;
padding: 0;
}
.menu-items li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu-items li a:hover {
background-color: #f5f5f5;
}
.submenu-items {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
background-color: #fff;
border: 1px solid #999;
list-style: none;
margin: 0;
padding: 0;
}
.submenu-items li {
margin: 0;
padding: 0;
}
.submenu-items li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.submenu-items li a:hover {
background-color: #f5f5f5;
}
```
JavaScript代码:
```
var menuToggle = document.querySelector('.menu-toggle');
var menuItems = document.querySelector('.menu-items');
menuToggle.addEventListener('click', function() {
if (menuItems.style.display === 'block') {
menuItems.style.display = 'none';
} else {
menuItems.style.display = 'block';
}
});
document.addEventListener('click', function(event) {
if (!menuToggle.contains(event.target) && !menuItems.contains(event.target)) {
menuItems.style.display = 'none';
}
});
var menuLinks = document.querySelectorAll('.menu-items > li > a');
var submenuLinks = document.querySelectorAll('.menu-items ul li a');
for (var i = 0; i < menuLinks.length; i++) {
menuLinks[i].addEventListener('click', function(event) {
if (this.nextElementSibling && this.nextElementSibling.nodeName === 'UL') {
event.preventDefault();
var submenu = this.nextElementSibling;
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}
}
});
}
for (var j = 0; j < submenuLinks.length; j++) {
submenuLinks[j].addEventListener('click', function(event) {
if (this.nextElementSibling && this.nextElementSibling.nodeName === 'UL') {
event.preventDefault();
var submenu = this.nextElementSibling;
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}
}
});
submenuLinks[j].addEventListener('mouseenter', function() {
if (this.nextElementSibling && this.nextElementSibling.nodeName === 'UL') {
var submenu = this.nextElementSibling;
submenu.style.display = 'block';
}
});
submenuLinks[j].addEventListener('mouseleave', function() {
if (this.nextElementSibling && this.nextElementSibling.nodeName === 'UL') {
var submenu = this.nextElementSibling;
submenu.style.display = 'none';
}
});
}
```
以上代码实现了一个复杂的侧面下拉菜单效果,支持多级菜单、鼠标悬停展开子菜单、点击菜单项跳转链接等功能。您可以根据自己的需求进行修改和优化。