JavaScript实战之带收放动画效果的导航菜单

背景

在网站开发中，导航菜单是常用的功能，在用户使用时需要有平滑的过渡效果，增强用户体验。本攻略将介绍如何使用JavaScript实现带收放动画效果的导航菜单。

实现思路

1. 使用HTML与CSS创建基础的导航菜单，并使用JavaScript动态添加交互效果。
2. 使用JavaScript监听用户事件，当用户点击导航菜单栏时，通过JavaScript修改相关元素属性，实现导航菜单收放效果。

实现步骤

1. 创建HTML结构

在HTML页面中创建基础的导航菜单结构，包括导航栏、收放菜单、链接等元素。

示例代码：

<nav>
  <div class="menu-icon">
    <i class="fa fa-bars"></i>
  </div>
  <ul class="menu-items">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

2. 添加CSS样式

使用CSS样式为导航菜单及相关元素添加基本样式，包括颜色、字体等。

示例代码：

nav {
    width: 100%;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

.menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    transition: all 0.4s ease;
    display: none;
}

.menu-items li {
    border-bottom: 1px solid #ddd;
}

.menu-items li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
}

.menu-icon {
    color: #4a4a4a;
    cursor: pointer;
    font-size: 20px;
    line-height: 46px;
}

.fa-bars {
    font-size: 20px;
}

3. 编写JavaScript代码

使用JavaScript监听用户点击事件，通过修改相关属性实现导航菜单的收放效果。

示例代码：

const menu = document.querySelector('.menu-icon');
const menuItems = document.querySelector('.menu-items');

menu.addEventListener('click', function() {
    if (menuItems.style.display === "none") {
        menuItems.style.display = "block";
        setTimeout(function() {
            menuItems.style.maxHeight = "500px";
        }, 100);
    } else {
        menuItems.style.maxHeight = "0";
        setTimeout(function() {
            menuItems.style.display = "none";
        }, 400);
    }
});

注意事项

1. 如果样式、HTML结构有误，可能会导致JavaScript代码执行出错，建议先修正样式、HTML结构问题。
2. 在编写JavaScript代码时，需谨慎修改相关元素属性，避免导致功能失败/影响用户体验等问题。
3. 收放效果的瞬间可能会出现元素闪烁的情况，这是正常的，可通过样式或JavaScript代码进行优化。

示例说明

示例1

假设有以下HTML结构，其中nav元素是导航菜单及相关元素所在的父元素。

<nav>
  <div class="menu-icon">
    <i class="fa fa-bars"></i>
  </div>
  <ul class="menu-items">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

使用上述攻略中的CSS样式和JavaScript代码，在用户单击导航菜单时，菜单栏会展开，展开过程带有动画效果；再次单击导航菜单时，菜单栏会收起，收起过程带有动画效果。

示例2

在示例1的基础上，假设要实现导航菜单展开时还有其他动画效果，如文字渐变效果。

可在JavaScript代码中添加文字渐变效果的代码，如下：

const menuItems = document.querySelector('.menu-items');

menuItems.addEventListener('transitionend', function(event) {
    if (event.propertyName === "max-height") {
        const links = menuItems.querySelectorAll('li a');
        links.forEach(function(link) {
            link.classList.toggle('fade-in');
        });
    }
});

在CSS中添加文字渐变效果的代码，如下：

.menu-items li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
    opacity: 0;
    transition: all 0.5s ease;
}

.menu-items li a.fade-in {
    opacity: 1;
}

这样，当导航菜单展开时，文字将带有渐变效果，增强交互体验。