JavaScript实现二级菜单的制作

2023年6月11日下午12:14 • JavaScript

下面是详细的JavaScript实现二级菜单的制作攻略：

1. 准备工作

在制作二级菜单之前，需要先准备好以下内容：

一个 HTML 文件
一个 CSS 文件
一个 JavaScript 文件

其中，HTML 文件是页面的基础结构，CSS 文件是用来美化页面的样式，JavaScript 文件则是用来实现菜单的交互效果的。

在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。

在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。

在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等。

2. HTML 结构

下面是一个简单的菜单 HTML 结构示例：

<ul id="menu">
  <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="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
    </ul>
  </li>
  <li><a href="#">菜单3</a></li>
</ul>

在该结构中，ul 元素的 id 属性被设置为 menu，该元素下是一些 li 元素，每个 li 元素又包含一个 a 元素和一个子菜单 ul 元素。其中，一级菜单项的 a 元素是可点击的超链接，而二级菜单项的 a 元素则只起到了文本展示的作用。

3. CSS 样式

通过 CSS 样式可以让菜单的外观更加美观，下面是一个简单的菜单 CSS 样式示例：

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu > li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

#menu > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

#menu > li:hover > ul {
  display: block;
}

#menu > li > ul > li {
  display: block;
  white-space: nowrap;
}

#menu > li > ul > li > a {
  display: block;
  padding: 5px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

#menu > li > ul > li > a:hover {
  background-color: #ccc;
}

通过以上代码，我们可以完成基本的菜单样式设计，其中：

#menu 的样式设置了菜单的基本全局样式。
#menu > li 的样式设置了一级菜单项的样式，其中 position: relative 用来定位二级菜单。
#menu > li > ul 的样式设置了二级菜单项的样式，display: none 表示一开始隐藏二级菜单。
#menu > li:hover > ul 的样式表示当鼠标悬停在一级菜单项上时，显示对应的二级菜单。
#menu > li > ul > li 的样式设置了二级菜单项的宽度，以及其它一些样式设置。
#menu > li > ul > li > a 的样式设置了二级菜单项内部文本的样式，以及背景颜色、文字颜色等样式设置。
#menu > li > ul > li > a:hover 的样式表示当鼠标悬停在二级菜单项上时，改变其背景颜色。

4. JavaScript 实现

通过 JavaScript 代码，我们可以实现菜单的交互效果，下面是一个简单的菜单 JavaScript 实现示例：

var menu = document.getElementById('menu');

menu.addEventListener('mouseover', function (e) {
  if (e.target.nodeName === 'LI') {
    var ul = e.target.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  }
});

menu.addEventListener('mouseout', function (e) {
  if (e.target.nodeName === 'LI') {
    var ul = e.target.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  }
});

通过以上代码，我们实现了菜单的鼠标悬停效果，其中：