原生JavaScript实现滑出式菜单及滑过子菜单技术咨询

当然可以用纯JavaScript实现你想要的滑出菜单效果，完全不需要依赖jQuery。下面是对应实现思路和完整代码，效果和你提到的jQuery示例一致：

1. HTML结构 #

先构建基础的菜单结构，包含触发按钮、主菜单和带子菜单的菜单项：

<button id="menu-toggle">☰ 菜单</button>
<nav id="slide-menu" class="menu-hidden">
  <ul class="main-menu">
    <li class="menu-item">
      <a href="#">首页</a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
        <li><a href="#">产品C</a></li>
      </ul>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">服务</a>
      <ul class="submenu">
        <li><a href="#">咨询服务</a></li>
        <li><a href="#">技术支持</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">关于我们</a>
    </li>
  </ul>
</nav>

2. CSS样式 #

通过CSS的transform和transition实现平滑的滑出/滑入动画，控制菜单和子菜单的显示状态：

/* 全局基础样式 */
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

#menu-toggle {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
}

/* 主菜单容器 */
#slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: #2c3e50;
  padding-top: 60px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 100;
}

#slide-menu.menu-visible {
  transform: translateX(0);
}

/* 主菜单项 */
.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  position: relative;
}

.menu-item a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #34495e;
}

.menu-item a:hover {
  background: #34495e;
}

/* 子菜单样式 */
.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  width: 280px;
  height: 100%;
  background: #34495e;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: translateX(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.has-submenu:hover .submenu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

3. JavaScript逻辑 #

用原生JS监听按钮点击和菜单项的鼠标事件，通过切换CSS类来触发动画：

// 获取DOM元素
const menuToggle = document.getElementById('menu-toggle');
const slideMenu = document.getElementById('slide-menu');
const submenuItems = document.querySelectorAll('.has-submenu');

// 主菜单展开/收起逻辑
menuToggle.addEventListener('click', () => {
  slideMenu.classList.toggle('menu-visible');
  slideMenu.classList.toggle('menu-hidden');
});

// 子菜单的鼠标事件处理（可选，也可以完全用CSS hover实现，这里补充JS逻辑适配更多场景）
submenuItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    const submenu = item.querySelector('.submenu');
    submenu.classList.add('submenu-visible');
  });

  item.addEventListener('mouseleave', () => {
    const submenu = item.querySelector('.submenu');
    submenu.classList.remove('submenu-visible');
  });
});

关键说明 #

• 主菜单的滑出/收起通过切换transform: translateX()实现，配合CSS过渡动画保证平滑
• 子菜单的滑入效果可以完全通过CSS的:hover伪类实现，也可以用JS事件监听增强交互（比如触摸设备适配）
• 所有DOM操作都用原生API：getElementById、querySelectorAll、classList.toggle/add/remove，完全替代jQuery的对应方法

内容的提问来源于stack exchange，提问作者juliette