用原生 JavaScript 创建自定义级联菜单

2023-12-06 09:06:10

前言

级联菜单，又称下拉菜单，是一种常见且实用的导航组件，广泛应用于各种网站和应用程序。它可以帮助用户轻松浏览网站或应用程序的各个部分，并快速访问所需的信息。级联菜单通常由主菜单和子菜单组成，当用户将鼠标悬停在主菜单项上时，子菜单就会展开，显示更详细的选项。

HTML 结构

首先，我们需要定义 HTML 结构来创建我们的级联菜单。我们将使用一个无序列表 (

)，用于导航到特定页面或部分。子菜单项也将包含链接，但它们将被隐藏，直到用户将鼠标悬停在主菜单项上。

<ul id="main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a>
    <ul class="sub-menu">
      <li><a href="#">Our Team</a></li>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our Values</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul class="sub-menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Social Media Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

CSS 样式

接下来，我们需要使用 CSS 来定义级联菜单的样式。我们将使用 CSS 选择器来定位不同的菜单元素，并设置它们的样式。例如，我们可以使用以下 CSS 规则来设置主菜单项的样式：

#main-menu li {
  display: inline-block;
  margin-right: 10px;
}

#main-menu li a {
  text-decoration: none;
  color: #000;
}

我们可以使用类似的 CSS 规则来设置子菜单项的样式，以及控制子菜单的显示和隐藏。

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
}

.sub-menu li {
  display: block;
}

.sub-menu li a {
  text-decoration: none;
  color: #000;
}

#main-menu li:hover .sub-menu {
  display: block;
}

JavaScript 代码

最后，我们需要使用 JavaScript 来控制级联菜单的行为。我们将使用 JavaScript 来添加事件监听器，以便当用户将鼠标悬停在主菜单项上时，子菜单就会展开。我们还可以使用 JavaScript 来添加额外的功能，例如在子菜单项上显示箭头图标或更改子菜单的背景颜色。

// 获取所有主菜单项
const mainMenuItems = document.querySelectorAll('#main-menu li');

// 为每个主菜单项添加事件监听器
mainMenuItems.forEach((item) => {
  item.addEventListener('mouseover', () => {
    // 获取子菜单元素
    const subMenu = item.querySelector('.sub-menu');

    // 显示子菜单
    subMenu.style.display = 'block';
  });

  item.addEventListener('mouseout', () => {
    // 获取子菜单元素
    const subMenu = item.querySelector('.sub-menu');

    // 隐藏子菜单
    subMenu.style.display = 'none';
  });
});