JS实现快速的导航下拉菜单动画效果附源码下载

下面是 JS 实现快速的导航下拉菜单动画效果的完整攻略：

一、思路

1. 首先，我们需要给下拉菜单添加一个点击事件，并在点击后显示子菜单；
2. 接着，使用 CSS 中的 transition 属性实现下拉菜单的动画效果；
3. 最后，用 JS 控制下拉菜单的显示和隐藏。

二、实现步骤

2.1 HTML 结构

首先，我们需要在 HTML 中添加一个导航栏和下拉菜单。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</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="#">Contact Us</a></li>
  </ul>
</nav>

2.2 添加样式

为了让导航栏看起来更美观，我们需要添加一些 CSS 样式。具体样式可以根据自己的需求自行修改。

nav {
  background-color: #333;
  padding: 1rem 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav ul li {
  margin: 0 1rem;
  position: relative;
}
nav ul li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
nav ul li:hover > ul {
  display: block;
}
nav ul li > ul li {
  margin: 0.5rem 0;
}

2.3 添加 JS 代码

接下来，我们需要添加 JS 代码来控制下拉菜单的显示和隐藏。

const navItems = document.querySelectorAll('nav ul li');

navItems.forEach(item => {
  // 监听点击事件
  item.addEventListener('click', e => {
    // 如果点击的是含有子菜单的列表项
    if (e.target.nextElementSibling) {
      // 阻止默认跳转行为
      e.preventDefault();
      // 隐藏所有其他下拉菜单
      navItems.forEach(item => {
        if (item !== e.currentTarget) {
          item.querySelector('ul').classList.remove('show');
        }
      });
      // 切换当前下拉菜单的显示状态
      e.currentTarget.querySelector('ul').classList.toggle('show');
    }
  });
});

注意：上面的代码中，我们使用了 classList 属性来操作 DOM 元素的 class 属性，其中 toggle() 方法可以在元素的 class 中添加/删除某个类。

2.4 添加 CSS 动画效果

最后一步，我们需要添加 CSS 动画效果，这里使用 transition 属性。

nav ul li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}
nav ul li:hover > ul, nav ul li > ul.show {
  opacity: 1;
  pointer-events: auto;
}

注意：上述代码中，我们把 transition、opacity、pointer-events 和 z-index 添加到 CSS 中，通过这样设置，可以在菜单显示和隐藏时实现动画效果。

三、示例说明

3.1 示例一

接下来示例，是一个简单的导航栏实现，可以自行修改里面的内容和样式。

具体的代码和效果可以查看这个示例页面。

3.2 示例二

这个示例是一个基于 React 的导航栏，同样可以自行修改里面的内容和样式。具体的代码和效果可以查看这个示例页面。

四、总结

以上就是实现 JS 快速的导航下拉菜单动画效果的完整攻略。通过以上步骤，只需要简单的几行代码就可以快速实现下拉菜单动画效果。