用jquery写的菜单从左往右滑动出现-前端开发

下面就为大家介绍一下使用jQuery实现从左往右滑动的菜单的完整攻略。

下面就为大家介绍一下使用jQuery实现从左往右滑动的菜单的完整攻略。

思路概述

首先，我们需要明确效果需求：当鼠标悬浮在导航菜单上时，菜单从左向右滑动出现；当鼠标离开导航菜单时，菜单又缓慢地向左收起。

基于这个需求，我们可以思考出以下实现思路：

HTML 结构部分：使用 ul 和 li 标签进行导航菜单的构建；
CSS 样式部分：为菜单元素设置合适的样式，并使用 display: none 隐藏菜单的初始状态；
jQuery 部分：当鼠标悬浮在导航菜单上时，使用 jQuery 中的 animate 函数让菜单从左向右滑动出现；当鼠标离开导航菜单时，再使用 animate 函数让菜单缓慢地向左收起。

下面，我们将逐步展开实现的步骤。

HTML 结构

在 HTML 中，我们可以使用 ul 和 li 标签构建导航菜单。每一个 li 标签就代表了一个菜单项，菜单项里可以包含网页链接等其他元素。

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

CSS 样式

为了让菜单元素在动画效果中有更好的体现，我们需要给菜单元素设置一些样式。

这里我们使用了 position: fixed 将菜单元素固定在屏幕顶部。同时，菜单元素的 left 属性设置为负数，隐藏菜单。

.menu {
  position: fixed;
  top: 0;
  left: -200px; /* 菜单隐藏 */
  width: 200px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.menu li {
  line-height: 50px;
}

jQuery 代码

这里我们需要使用两个事件来完成菜单的滑动特效：mouseenter 和 mouseleave。当鼠标在菜单上时，菜单元素从左向右滑出；当鼠标离开菜单时，菜单元素缓慢地向左收起。

// 鼠标移入时菜单滑出
$('.menu').mouseenter(function() {
  $(this).animate({left: '0px'}, 500);
});

// 鼠标移出时菜单缓慢收起
$('.menu').mouseleave(function() {
  $(this).animate({left: '-200px'}, 500);
});

以上就是用 jQuery 写的菜单从左往右滑动出现的详细攻略，希望对大家有所帮助。

示例说明：

下面是两个示例的说明，分别演示了将菜单向右滑出时内容区域的不同实现方式。

示例 1

在示例 1 中，我们将菜单滑出时的内容区设置为跟 menu 元素一样的宽度，这样菜单完全显示出来时，内容区直接向右移动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单从左往右滑动出现示例 1</title>
  <style>
    .menu {
      position: fixed;
      top: 0;
      left: -200px;
      width: 200px;
      height: 100%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .menu li {
      line-height: 50px;
    }
    .content {
      margin-left: 200px;
      padding: 20px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 鼠标移入时菜单滑出
      $('.menu').mouseenter(function() {
        $(this).animate({left: '0px'}, 500);
      });
      // 鼠标移出时菜单缓慢收起
      $('.menu').mouseleave(function() {
        $(this).animate({left: '-200px'}, 500);
      });
    });
  </script>
</head>
<body>
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
  <div class="content">
    <h1>菜单从左往右滑动出现示例 1</h1>
    <p>这里是示例 1 的内容区域，当菜单从左向右滑出时，内容区域会向右平移，以留出空间。</p>
  </div>
</body>
</html>

示例 2

在示例 2 中，我们将菜单滑出时内容区不做任何变化，仅仅是在菜单从左向右滑出的过程中，让菜单元素覆盖在内容区后面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单从左往右滑动出现示例 2</title>
  <style>
    .menu {
      position: fixed;
      top: 0;
      left: -200px;
      width: 200px;
      height: 100%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .menu li {
      line-height: 50px;
    }
    .content {
      padding: 20px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 鼠标移入时菜单滑出
      $('.menu').mouseenter(function() {
        $(this).animate({left: '0px', zIndex: '1'}, 500);
      });
      // 鼠标移出时菜单缓慢收起
      $('.menu').mouseleave(function() {
        $(this).animate({left: '-200px', zIndex: '0'}, 500);
      });
    });
  </script>
</head>
<body>
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
  <div class="content">
    <h1>菜单从左往右滑动出现示例 2</h1>
    <p>这里是示例 2 的内容区域，当菜单从左向右滑出时，内容区域并不会随之移动，而是让菜单元素覆盖在其后。</p>
  </div>
</body>
</html>

建议大家可以多尝试一下，通过自己的实践将这种特效优化到更加完美的效果。