JS+CSS实现简单的二级下拉导航菜单效果

下面是对"JS+CSS实现简单的二级下拉导航菜单效果"的完整攻略：

1. 前言

二级下拉导航菜单是网页设计中常见的一种交互效果，可以为整个网页增加更好的用户体验，而实现方法主要可以使用JS和CSS来完成。下面将介绍其中一种具体实现方法。

2. 实现步骤

2.1 HTML结构

首先，要实现二级下拉导航菜单，需要先构建对应的HTML结构。

<ul class="navbar">
  <li><a href="#">菜单1</a></li>
  <li class="submenu">
    <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>

在这里，.navbar是一级导航菜单的容器，li.submenu是拥有二级子菜单的菜单项，ul是子菜单的容器。

2.2 CSS样式

接下来，使用CSS样式对菜单进行修饰。

.navbar {
  list-style: none;
  background-color: #333;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar li a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
}

.navbar li.submenu ul {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  background-color: #eee;
  padding: 0;
}

.navbar li.submenu ul li {
  padding: 10px;
}

.navbar li.submenu:hover ul {
  display: block;
}

在这里，只需简单地设置了导航菜单和子菜单的背景颜色、高度、对齐方式、间距等样式。

2.3 JS脚本

最后需要用JS脚本实现二级菜单的显示和隐藏。

let submenu = document.querySelectorAll('.navbar li.submenu');

for (let i = 0; i < submenu.length; i++) {
  submenu[i].addEventListener('click', function() {
    let ul = this.querySelector('ul');
    if (ul.style.display === 'none') {
      ul.style.display = 'block';
    } else {
      ul.style.display = 'none';
    }
  });
}

在这里，当用户单击一个 .submenu 菜单项时，JS脚本会寻找到它的子元素 ul，并切换其显示状态。

3. 示例说明

以下是两个使用示例。第一个示例实现了基本的导航菜单及不同的子菜单效果；第二个示例实现了简明的右侧导航菜单。

示例1：基本导航菜单及不同的子菜单效果

该示例实现了一个基本的导航菜单，并具备可选择的不同子菜单效果。可查看这里的在线演示

示例2：简明右侧导航菜单

该示例实现了一个简明的右侧导航菜单，同时具备不同的子菜单效果。可查看这里的在线演示

4. 总结

这篇攻略介绍了一种使用JS和CSS实现二级下拉导航菜单效果的方法。除了基本的HTML和CSS，还使用了JS脚本来实现子菜单的显示和隐藏。如果你有类似的需求，相信这篇攻略能对你有所帮助。