jQuery+CSS实现一个侧滑导航菜单代码

下面是详细的jQuery+CSS实现一个侧滑导航菜单代码攻略：

一、思路梳理

实现一个侧滑导航菜单，需要满足以下需求：

需要一个触发菜单显示隐藏的开关按钮。
点击开关按钮时，侧滑菜单从左侧滑出。
点击开关按钮时，页面内容需要向右移动。
点击侧滑菜单上的链接时，需要关闭菜单。

因此，可以考虑使用jQuery实现菜单的显示和隐藏，使用CSS实现菜单的样式和动画效果。

二、示例代码

1. HTML布局

首先，需要在HTML中添加导航菜单和触发开关按钮的相关结构。

<body>
  <div class="menu-container">
    <div class="nav-menu">
      <ul>
        <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>
    </div>
    <div class="menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="page-container">
    <!-- 页面内容 -->
  </div>
</body>

其中，.menu-container是整个侧滑菜单容器，.nav-menu是菜单的内容，.menu-toggle是开关按钮。

2. CSS样式

接下来需要添加CSS样式，实现菜单的样式和动画效果。

/* 导航菜单容器 */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

/* 菜单内容 */
.nav-menu {
  position: absolute;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

/* 开关按钮 */
.menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 999;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  margin-top: 8px;
  transition: all 0.3s ease-in-out;
}

.menu-toggle span:first-child {
  transform: translateY(-6px);
}

.menu-toggle span:last-child {
  transform: translateY(6px);
}

/* 页面内容 */
.page-container {
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

3. JavaScript代码

最后，需要添加jQuery代码，实现菜单的显示和隐藏，以及页面内容的移动效果。

$(function() {
  // 点击开关按钮显示或隐藏菜单
  $('.menu-toggle').click(function() {
    $('.nav-menu').toggleClass('show');
    $('.page-container').toggleClass('shift');
  });

  // 点击链接关闭菜单
  $('.nav-menu a').click(function() {
    $('.nav-menu').removeClass('show');
    $('.page-container').removeClass('shift');
  });
});

完成以上这些代码后，我们就可以得到一个简单的侧滑导航菜单了。

三、示例说明

下面将介绍两个使用示例：

示例一

针对于不同的屏幕尺寸，我们需要针对不同的设备进行响应式布局，即在小屏幕设备上，可以在点击开关按钮后菜单充满全屏，且菜单内容全部可见，在大屏幕设备上，菜单可以自动收拢起来。

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>
  <div class="page-container">
    <!-- 页面内容 -->
  </div>
</body>

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  position: sticky;
  top: 0;
  z-index: 1;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

nav ul {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #333;
}

nav ul li {
  display: block;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #666;
}

nav ul li:last-child {
  border: none;
}

nav ul li a {
  color: #fff;
}

.nav-show {
  display: block;
}

.page-container {
  padding: 10px;
}

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('nav ul').toggleClass('nav-show');
  });
});

示例二

当我们需要在菜单栏中添加下拉菜单时，可以参照以下示例代码。

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">About</a>
          <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Vision</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>
  <div class="page-container">
    <!-- 页面内容 -->
  </div>
</body>

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  position: sticky;
  top: 0;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 10px;
  margin: 0;
}

nav ul li {
  position: relative;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  padding: 0;
  margin: 0;
  background-color: #333;
}

nav ul li ul li {
  display: block;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #666;
}

nav ul li ul li:last-child {
  border: none;
}

nav ul li ul li a {
  color: #fff;
}

nav ul li:hover ul {
  display: block;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

.nav-show {
  display: block;
}

.page-container {
  padding: 10px;
}

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('nav ul').toggleClass('nav-show');
  });
});

以上两个示例可以在页面中实现一个有下拉菜单、响应式的侧滑导航菜单。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+CSS实现一个侧滑导航菜单代码 - Python技术站