jquery 侧边滑动导航

随着移动设备以及大屏幕的广泛使用，侧边导航已经成为现代网站中不可或缺的一部分。而 jQuery 侧边滑动导航可以让我们更方便地实现这一功能。下面我们来详细介绍一下如何使用 jQuery 实现侧边导航。

首先，我们需要引入 jQuery 库。我们可以使用以下代码：

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

接下来，我们需要HTML和CSS来创建导航菜单。以下是一个简单的示例代码：

  <nav>
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
      <li><a href="#">菜单项5</a></li>
    </ul>
  </nav>

  <style>
    nav {
      position: fixed;
      top: 0;
      left: -250px; /* 隐藏侧边导航菜单 */
      height: 100%;
      width: 250px;
      background-color: #333;
      padding: 20px;
      transition: all 0.3s ease-in-out; /* 使用过渡效果 */
    }

    nav.active {
      left: 0; /* 显示侧边导航菜单 */
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li a {
      display: block;
      padding: 10px;
      color: #fff;
      text-decoration: none;
    }

    li a:hover {
      background-color: #555;
    }
  </style>

然后我们需要用JavaScript来实现导航菜单的滑动效果：

  <script>
    $(document).ready(function() {
      $('nav ul li a').click(function() {
        $(this).parent().addClass('active').siblings().removeClass('active');
        $('nav').removeClass('active');
        return true;
      });
      $('.menu-icon').click(function() {
        $('nav').toggleClass('active');
      });
    });
  </script>

代码中，我们首先使用jQuery为菜单项添加了点击事件，当用户点击一个菜单项时，我们将它的父元素添加一个 active 类，并将其它元素的 active 类移除。然后我们使用 toggleClass() 方法来让侧边导航菜单滑出或者滑入。

最后，我们还需要添加一个菜单按钮来触发侧边导航菜单的滑出收起效果：

  <a href="#" class="menu-icon">Menu</a>

这个按钮可以放在页面的任意位置。但是需要注意的是，按钮的类名必须与我们在JavaScript代码中使用的类名一致。否则按钮将不能正确地触发导航菜单的滑出收起效果。

在实例化导航菜单的时候，我们可以添加一些自己的样式和动画效果，这里只是提供了一个基本的示例。你可以通过学习另外的相关技术来不断地优化和扩展这个菜单。