纯JS多级下拉菜单实现教程

想要打造一个响应式的多级下拉菜单吗？本文将详细指导你如何使用纯 JavaScript、HTML 和 CSS 实现一个在桌面端悬停展开、移动端点击展开的多级下拉菜单，无需依赖任何外部库！文章提供完整代码示例，从清晰的 HTML 结构搭建，到精细的 CSS 样式控制，再到关键的 JavaScript 交互逻辑，逐步讲解实现思路和步骤。学习后，你将掌握这一常用的 Web 开发技巧，轻松构建出更复杂、更实用的导航菜单，提升用户体验。立即开始你的纯 JS 多级下拉菜单之旅！

本文旨在指导开发者如何使用原生 JavaScript、HTML 和 CSS 构建一个响应式的多级下拉菜单。该菜单在桌面端通过鼠标悬停展开，而在移动端则通过点击展开，无需依赖任何外部库（如 jQuery）。文章将提供完整的代码示例，并详细解释实现思路和关键步骤，帮助读者理解并掌握这一常用的 Web 开发技巧。

HTML 结构

首先，我们需要一个清晰的 HTML 结构来构建菜单。以下是一个基本的示例：

<div class="menu">
  <ul>
    <li>
      <span class="menu-item">Parent 1</span>
      <ul>
        <li class="link">
          <a href="">Child 1</a>
        </li>
        <li class="link">
          <a href="">Child 2</a>
        </li>
        <li>
          <span class="menu-item">Nested child</span>
          <ul>
            <li class="link">
              <a href="">Something</a>
            </li>
            <li class="link">
              <a href="">Something</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span class="menu-item">Parent 2</span>
      <ul>
        <li class="link">
          <a href="">Basic link 1</a>
        </li>
        <li class="link">
          <a href="">Basic link 2</a>
        </li>
        <li>
          <span class="menu-item">Nested child 2</span>
          <ul>
            <li class="link">
              <a href="">Basic nested link 1</a>
            </li>
            <li class="link">
              <a href="">Basic nested link 2</a>
            </li>

          </ul>
        </li>
      </ul>
    </li>
    <li class="link"><span class="menu-item">Simple Link</span></li>
    <li class="link"><span class="menu-item">Another Link</span></li>
  </ul>
</div>

在这个结构中，menu 类是整个菜单的容器。ul 元素用于创建列表，li 元素代表菜单项。嵌套的 ul 元素用于创建子菜单。 为了方便后续的样式控制和JavaScript操作，建议将顶层 li 标签内的文本用 span 标签包裹，并赋予 menu-item 类名。

CSS 样式

接下来，我们使用 CSS 来设置菜单的样式。以下是一个示例：

.menu {
  --menu-height: 40px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
.menu ul {
  list-style: none;
  padding: 16px;
  margin: 0;
}
.menu ul li,
.menu ul li a {
  opacity: 0.8;
  color: #ffffff;
  cursor: pointer;
  transition: 200ms;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}
.menu ul li a,
.menu ul li a a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.menu ul li {
  padding-right: 36px;
}
.menu ul li::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ffa500;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.menu ul .link::before {
  padding-right: 0;
  display: none;
}
.menu > ul {
  display: flex;
  height: var(--menu-height);
  align-items: center;
  background-color: #000000;
}
.menu > ul li {
  position: relative;
  margin: 0 8px;
}
.menu > ul li ul {
  visibility: hidden;
  opacity: 0;
  padding: 0;
  min-width: 160px;
  background-color: #333;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  transition: 200ms;
  transition-delay: 200ms;
}
.menu > ul li ul li {
  margin: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  padding-right: 40px;
}
.menu > ul li ul li::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #ffa500;
}
.menu > ul li ul li ul {
  top: -2%;
  left: 100%;
  transform: translate(0);
}

.show {
  visibility: visible;
  opacity: 1;
}

.hide {
  display: none;
}

@media screen and (min-width: 1200px) {
  .menu ul li:hover,
  .menu ul li a:hover {
    opacity: 1;
  }
  .menu > ul li ul li:hover {
    background: black;
  }
  .menu > ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms;
  }
}

@media screen and (max-width: 1200px) {
  .menu {
    height: 100vh;
    top: 0;
    left: 0;
    width: 20vw;
  }
  .menu ul {
    flex-direction: column;
    height: 100vh;
  }
  .menu ul li {
    margin: 1rem 0;
  }
  .menu ul li ul {
    padding: 0;
    min-width: 160px;
    background-color: #333;
    position: absolute;
    top: 0px;
    left: 200%;
    transform: translateX(-50%);
    transition: 200ms;
    transition-delay: 200ms;
    height: fit-content;
  }

    .menu ul.show {
        visibility: visible;
        opacity: 1;
    }
}

这段 CSS 代码定义了菜单的基本样式，包括颜色、字体、间距等。关键点在于：

• visibility: hidden; 和 opacity: 0; 用于初始隐藏子菜单。
• .menu > ul li:hover > ul 在桌面端（min-width: 1200px）实现悬停展开效果。
• .menu ul.show 在移动端（max-width: 1200px）控制点击展开效果，注意同时设置 visibility 和 opacity。

JavaScript 交互

最后，我们使用 JavaScript 来实现移动端的点击展开效果。

let menu = document.querySelector(".menu ul");
menu = menu.children;

for (let i = 0; i < menu.length; i++) {
  menu[i].addEventListener("click", function(event) {
    // 阻止事件冒泡，防止点击子菜单时触发父菜单的点击事件
    event.stopPropagation();

    // 获取当前点击的菜单项的第一个子元素（即子菜单的ul元素）
    let subMenu = this.querySelector('ul');

    // 如果存在子菜单，则切换 "show" 类
    if (subMenu) {
      subMenu.classList.toggle("show");
    }
  });
}

这段代码首先获取所有顶级菜单项，然后为每个菜单项添加点击事件监听器。当点击菜单项时，它会切换其子菜单的 show 类，从而显示或隐藏子菜单。event.stopPropagation() 的作用是阻止事件冒泡，防止点击子菜单时触发父菜单的点击事件。

注意事项：

• 确保 CSS 文件在 HTML 文件中正确引用。
• 根据实际需求调整 CSS 样式和断点值。
• 可以添加更多的 JavaScript 代码来实现更复杂的功能，例如关闭其他已展开的菜单。

总结：

通过结合 HTML、CSS 和 JavaScript，我们可以创建一个响应式的多级下拉菜单，该菜单在桌面端通过鼠标悬停展开，而在移动端则通过点击展开。这种方法无需依赖任何外部库，并且可以根据实际需求进行定制。 理解了HTML结构、CSS样式控制以及JavaScript交互逻辑，就能灵活运用并扩展这个示例，构建出更复杂、更实用的导航菜单。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《纯JS多级下拉菜单实现教程》文章吧，也可关注golang学习网公众号了解相关技术文章。