原生JS实现导航下拉菜单效果

这里是原生JS实现导航下拉菜单效果的完整攻略。

确定HTML结构

首先，我们需要确定HTML结构。导航下拉菜单通常都是基于一个ul列表实现的，该列表作为导航栏的主体内容，每个列表项上展示导航项的名称，在鼠标移入导航项时，显示该项的子菜单，鼠标移出后，子菜单消失。以下是HTML示例：

<nav>
  <ul>
    <li><a href="#">导航项1</a>
      <ul>
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
        <li><a href="#">子菜单项1-3</a></li>
      </ul>
    </li>
    <li><a href="#">导航项2</a>
      <ul>
        <li><a href="#">子菜单项2-1</a></li>
        <li><a href="#">子菜单项2-2</a></li>
        <li><a href="#">子菜单项2-3</a></li>
      </ul>
    </li>
    <li><a href="#">导航项3</a>
      <ul>
        <li><a href="#">子菜单项3-1</a></li>
        <li><a href="#">子菜单项3-2</a></li>
        <li><a href="#">子菜单项3-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

添加基础样式

接下来，我们需要给导航菜单添加一些基础样式，使其默认情况下可以正常显示。

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

nav li {
    margin: 0;
    padding: 0;
    position: relative;
}

nav a {
    display: block;
    color: #fff;
    background-color: #333;
    text-decoration: none;
    padding: 10px;
}

nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
}

nav ul li:hover > ul {
    visibility: visible;
}

nav ul ul li {
    position: relative;
}

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

添加交互效果

最后，我们需要添加JavaScript交互效果，实现鼠标移入导航项时，展示对应的子菜单的功能。

let navItems = document.querySelectorAll('nav > ul > li')
for (let i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('mouseover', function() {
    let subMenu = this.querySelector('ul')
    if (subMenu) {
      subMenu.style.display = 'block'
    }
  })
  navItems[i].addEventListener('mouseout', function() {
    let subMenu = this.querySelector('ul')
    if (subMenu) {
      subMenu.style.display = 'none'
    }
  })
}

通过上述代码，我们可以在鼠标移入导航项时，展示对应的子菜单；在鼠标移出时，子菜单消失。

示例说明

以下是两个示例：

示例1

<nav>
  <ul>
    <li><a href="#">导航项1</a>
      <ul>
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
        <li><a href="#">子菜单项1-3</a></li>
      </ul>
    </li>
    <li><a href="#">导航项2</a>
      <ul>
        <li><a href="#">子菜单项2-1</a></li>
        <li><a href="#">子菜单项2-2</a></li>
        <li><a href="#">子菜单项2-3</a></li>
      </ul>
    </li>
    <li><a href="#">导航项3</a>
      <ul>
        <li><a href="#">子菜单项3-1</a></li>
        <li><a href="#">子菜单项3-2</a></li>
        <li><a href="#">子菜单项3-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

该示例代码中，为导航栏添加HTML结构。通过添加基础样式和JavaScript交互效果，我们可以实现一个具有导航下拉菜单效果的导航栏。

示例2

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a>
      <ul>
        <li><a href="#">Email Us</a></li>
        <li><a href="#">Call Us</a></li>
        <li><a href="#">Find Us</a>
          <ul>
            <li><a href="#">Map</a></li>
            <li><a href="#">Directions</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

该示例代码中，我们给导航栏添加了更多的菜单项，包含多层级的子菜单。通过上述步骤，我们同样可以实现一个具有多层级子菜单的导航栏。