功能强大、打造流畅体验：手把手教你创建二级菜单下拉效果

2024-01-19 17:44:55

背景与概述

在网站或应用程序设计中，菜单是必不可少的重要元素之一，它可以帮助用户快速浏览和访问内容，提升用户体验。其中，二级下拉菜单是一种常用的导航设计，它可以在一级菜单的基础上添加更多的选项，使导航更加清晰明了。

实现方法

为了创建二级下拉菜单，我们需要使用 HTML、CSS 和 JavaScript 等技术。首先，我们需要使用 HTML 代码创建菜单的结构，包括一级菜单和二级菜单。然后，我们需要使用 CSS 代码来设置菜单的样式，包括字体、颜色、背景等。最后，我们需要使用 JavaScript 代码来控制菜单的交互行为，包括当用户将鼠标悬停在一级菜单项上时，如何显示二级菜单。

详细步骤

1. HTML 代码

<nav>
  <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>
      </ul>
    </li>
    <li><a href="#">一级菜单项3</a></li>
  </ul>
</nav>

2. CSS 代码

nav {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

nav a {
  text-decoration: none;
  color: #000;
}

nav a:hover {
  color: #f00;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

nav li:hover ul {
  display: block;
}

3. JavaScript 代码

const nav = document.querySelector('nav');

nav.addEventListener('mouseover', (event) => {
  const target = event.target;

  if (target.tagName === 'LI') {
    const subMenu = target.querySelector('ul');

    if (subMenu) {
      subMenu.style.display = 'block';
    }
  }
});

nav.addEventListener('mouseout', (event) => {
  const target = event.target;

  if (target.tagName === 'LI') {
    const subMenu = target.querySelector('ul');

    if (subMenu) {
      subMenu.style.display = 'none';
    }
  }
});