动效全开！js 实现多级树状菜单 + 简单版 el-menu

2023-04-29 11:10:14

打造交互式艺术品：原生 JavaScript 构建的超级炫酷多级树状菜单

引言

在当今快节奏的数字世界中，交互式网站设计已成为吸引和留住用户的关键因素。其中，菜单作为网站导航的基石，其设计和功能在用户体验中扮演着举足轻重的角色。为了满足不断增长的用户需求，本文将指导你如何使用原生 JavaScript 构建一个超级炫酷的多级树状菜单，它不仅功能强大，而且视觉效果令人惊叹，宛如一件交互式艺术品。

多维结构：打造逐层深入的菜单体验

多级树状菜单的独特之处在于其多维结构，它允许你创建多层级的子菜单，从而为用户提供更直观、更清晰的导航体验。通过精心设计的 DOM 结构，我们巧妙地实现了这一多维效果，使你的菜单在纵横两个维度上都熠熠生辉。

过渡动画：创造流畅而迷人的菜单切换

为了让菜单切换过程赏心悦目，我们精心引入了过渡动画，它可以动态地调整菜单项的高度，从而营造出流畅而富有视觉吸引力的效果。通过设置动画的起始和结束值，我们可以控制动画的持续时间和速度，让你自由定制菜单切换的节奏和风格，让它成为一件令人难忘的交互式艺术品。

模拟 el-menu：高效封装，效果卓越

为了简化菜单开发并提升用户体验，我们参考了流行的 el-menu 组件，模拟了它的功能和效果，但代码更加精简。这样一来，你可以轻松实现各种炫酷的效果，如菜单展开、收起、选中和悬停等，大大提升了菜单的可定制性和交互性。

实操步骤：亲自动手，打造你的交互式菜单

构建 DOM 结构： 创建菜单的 HTML 结构，包括一级菜单项和二级子菜单。
美化 CSS 样式： 使用 CSS 美化菜单外观，定义字体、颜色、边框和背景。
交互式 JavaScript： 编写 JavaScript 代码，处理菜单项点击事件，设置动画效果和菜单项状态。

代码示例：揭秘多级树状菜单的秘密

// 获取所有一级菜单项
const menuItems = document.querySelectorAll('.tree-menu-item');

// 给一级菜单项添加点击事件监听器
menuItems.forEach(menuItem => {
  menuItem.addEventListener('click', () => {
    // 获取当前菜单项的子菜单
    const submenu = menuItem.nextElementSibling;

    // 设置子菜单的高度为 0
    submenu.style.height = '0px';

    // 等待动画完成
    setTimeout(() => {
      // 如果子菜单是隐藏的，则显示它并设置高度
      if (submenu.style.display === 'none') {
        submenu.style.display = 'block';
        submenu.style.height = `${menuItem.offsetHeight}px`;
      }
      // 如果子菜单是显示的，则隐藏它并设置高度为 0
      else {
        submenu.style.display = 'none';
        submenu.style.height = '0px';
      }
    }, 300);
  });
});

常见问题解答

如何定制动画效果？
- 在 JavaScript 代码中，你可以调整 setTimeout() 函数中的延迟时间和动画持续时间，从而控制动画的速度和节奏。
如何添加图标或图像到菜单项？
- 在 HTML 结构中，可以在 span 元素中使用 <i> 或 img 标签来添加图标或图像。
是否可以禁用某些菜单项？
- 是的，你可以通过在菜单项 span 元素上添加 disabled 属性来禁用它。
如何处理嵌套的子菜单？
- 多级树状菜单支持嵌套的子菜单，只需在 HTML 结构中使用额外的 ul 和 li 元素即可。
是否可以将菜单固定在顶部？
- 是的，你可以通过修改 CSS 样式，将菜单定位为 fixed，使其始终固定在页面顶部。