关键词

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;
}

注意:上述代码中,我们把 transitionopacitypointer-eventsz-index 添加到 CSS 中,通过这样设置,可以在菜单显示和隐藏时实现动画效果。

三、示例说明

3.1 示例一

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

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

3.2 示例二

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

四、总结

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

本文链接:http://task.lmcjl.com/news/8897.html

展开阅读全文