JS实现灵巧的下拉导航效果代码

关于JS实现灵巧的下拉导航效果代码的攻略，我可以提供以下的步骤：

步骤一：HTML结构

首先需要创建导航菜单的HTML结构。这可以通过一个无序列表来实现，每个导航元素都是其子元素。下拉菜单需要使用CSS来定位。

<nav class="menu">
  <ul>
    <li><a href="#">HOME</a></li>
    <li>
      <a href="#">PRODUCTS</a>
      <ul>
        <li><a href="#">PRODUCT ONE</a></li>
        <li><a href="#">PRODUCT TWO</a></li>
        <li><a href="#">PRODUCT THREE</a></li>
      </ul>
    </li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</nav>

注意，我们在PRODUCTS导航项下添加了一个下拉菜单，使用了另外的无序列表来表示菜单项。该下拉菜单的CSS样式我们稍后来定义。

步骤二：CSS样式

接下来定义导航菜单和下拉菜单的CSS样式。我们使用了flex布局，下拉菜单的定位是通过position:absolute和z-index实现。详见代码：

nav.menu ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

nav.menu a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  position: relative;
}

nav.menu a:hover {
  background-color: #ddd;
}

nav.menu ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  background-color: #f2f2f2;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: all 0.25s ease;
}

nav.menu ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav.menu ul ul li {
  display: block;
  width: 100%;
}

nav.menu ul ul a {
  display: block;
  padding: 10px 20px;
}

nav.menu ul ul a:hover {
  background-color: #ddd;
}

步骤三：JavaScript实现

最后，我们来实现下拉菜单效果。这个效果是通过JavaScript来实现的，下面的代码实现了基本的下拉菜单效果：

const ul = document.querySelectorAll('nav.menu ul li');
for (let i = 0; i < ul.length; i++) {
  ul[i].addEventListener('mouseenter', function() {
    const ulChild = this.querySelector('ul');
    if (ulChild)
      ulChild.style.display = 'block';
  });
  ul[i].addEventListener('mouseleave', function() {
    const ulChild = this.querySelector('ul');
    if (ulChild)
      ulChild.style.display = 'none';
  });
}

我们使用了querySelectorAll获取所有的ul元素并将它们保存在ul数组中，然后添加了两个事件监听：mouseenter和mouseleave。这些事件处理程序会检查当前元素是否有子菜单，并根据需要显示或隐藏这些菜单。

示例

这里提供两个例子，一个是有分层级的下拉菜单，一个是简单的下拉菜单。

分层级下拉菜单

代码：

<nav class="menu">
  <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>
          <ul>
            <li><a href="#">Sub-Product 1</a></li>
            <li><a href="#">Sub-Product 2</a></li>
            <li><a href="#">Sub-Product 3</a></li>
          </ul>
        </li>
        <li><a href="#">Product 4</a></li>
        <li><a href="#">Product 5</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS样式和JavaScript代码略。

简单下拉菜单

代码：

<nav class="menu">
  <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>
        <li><a href="#">Product 4</a></li>
        <li><a href="#">Product 5</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>