jQuery手机左侧滑出菜单

jQuery 做的手机左侧弹出菜单，用起来还挺顺手的，尤其适合移动端那种需要节省空间的导航设计。菜单从左边滑出来，交互比较流畅，UI 风格也借了点 Google Material Design 的味道。用 jQuery 写交互逻辑也简单，几行代码就能搞定触发和动画。

左侧滑出的菜单，挺适合做移动端主导航。触发方式可以是点击按钮，也可以拓展成手势滑动，响应也快，体验还不错。

HTML 结构基础，一个菜单按钮，一个侧边栏，有点像抽屉那种感觉：

<div id="menuToggle">
  <button id="menuBtn">Menu</button>
</div>
<div id="sideMenu">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

CSS 样式关键点在于让菜单默认隐藏在左侧，通过transition让滑动效果看起来更自然：

#sideMenu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #303F9F;
  transition: all 0.3s ease;
}

jQuery 逻辑也蛮，监听点击事件，加个.open类名控制动画：

$(document).ready(function() {
  $('#menuBtn').click(function() {
    $('#sideMenu').toggleClass('open');
  });
});

想做成更丝滑的体验，transitionend事件也可以顺便用上，配合加类名，做点收尾。

响应式设计方面，用@media调整一下在小屏设备的菜单样式就好：

@media (max-width: 767px) {
  #sideMenu {
    left: 0;
  }
}

如果你项目不复杂、用 Vue 或 React 有点重，这种jQuery + CSS的方式挺合适的，快速搭建，改起来也方便。