沃梦达 / 编程技术 / 前端开发 / 正文

js实现鼠标点击左上角滑动菜单效果代码

前端开发
2024-03-11

下面我来详细讲解一下如何实现鼠标点击左上角滑动菜单效果的代码攻略。

下面我来详细讲解一下如何实现鼠标点击左上角滑动菜单效果的代码攻略。

1.准备工作

在实现滑动菜单效果之前，我们需要准备以下工作：

  1. HTML 模板：我们需要一个 HTML 模板，包含一个菜单按钮和一个菜单内容的容器。
  2. CSS 样式：我们需要用 CSS 样式来实现菜单内容的定位和显示效果。
  3. JavaScript 代码：我们需要使用 JavaScript 代码来实现点击按钮时菜单内容的滑动显示和隐藏效果。

2. HTML 模板

先看一下 HTML 模板的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>滑动菜单效果</title>
    <style>
      /* 样式代码 */
    </style>
  </head>
  <body>
    <!-- 菜单按钮 -->
    <div class="menu-icon">
      <div class="menu-line"></div>
      <div class="menu-line"></div>
      <div class="menu-line"></div>
    </div>
    <!-- 菜单容器 -->
    <div class="menu-container">
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <<li><a href="#">菜单项3</a></li>
      </ul>
    </div>
    <script>
      // JavaScript 代码
    </script>
  </body>
</html>

在这个 HTML 模板中，我们定义了一个菜单按钮和一个菜单容器，并且为它们添加了相应的 class 样式类，用于后续的 CSS 样式和 JavaScript 代码的操作。

3. CSS 样式

接下来是 CSS 样式的编写部分。我们需要对菜单容器进行定位，并隐藏其内容。同时，我们还需要为菜单按钮添加动画效果和定位样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.menu-line {
  height: 3px;
  margin-bottom: 5px;
  background-color: #333;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu-container {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: left 0.3s ease-in-out;
  z-index: 998;
}

.menu-container ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}

.menu-container li {
  margin-bottom: 20px;
}

.menu-container li a {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.menu-container li a:hover {
  color: #f9d56e;
}

在这段 CSS 代码中，我们使用了 position 属性来对菜单按钮和菜单容器进行定位，使用 opacity 和 left 属性来实现菜单容器的显示和隐藏效果，使用 transform 属性来实现菜单按钮的动画效果，及其他常规 CSS 属性来进行辅助定位和样式控制。

4. JavaScript 代码

最后是 JavaScript 代码的编写部分。我们需要实现点击菜单按钮时，菜单容器的滑动显示和隐藏效果。

const menuIcon = document.querySelector(".menu-icon");
const menuContainer = document.querySelector(".menu-container");

menuIcon.addEventListener("click", function() {
  if (menuContainer.classList.contains("show")) {
    // 隐藏菜单容器
    menuContainer.classList.remove("show");
    menuIcon.classList.remove("open");
  } else {
    // 显示菜单容器
    menuContainer.classList.add("show");
    menuIcon.classList.add("open");
  }
});

在这段 JavaScript 代码中，我们首先使用 querySelector 方法获取到菜单按钮和菜单容器的 DOM 元素，然后为菜单按钮添加点击事件监听器。当点击按钮时，代码会判断当前菜单容器的状态，如果已经显示则隐藏，如果已经隐藏则显示，并且在菜单按钮上添加 open class 样式类，用于实现菜单按钮的动画效果。

示例说明：

以下是两个具体的示例，可以进一步帮助理解实现过程：

示例一

假设我们将上面的代码保存在名为 index.html 的文件中，当我们打开该文件时，应该能看到一个菜单按钮，点击菜单按钮时会滑出一个菜单容器，菜单容器中包含三个菜单项。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>滑动菜单效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .menu-icon {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 999;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
      }

      .menu-line {
        height: 3px;
        margin-bottom: 5px;
        background-color: #333;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      }

      .menu-container {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        transition: left 0.3s ease-in-out;
        z-index: 998;
      }

      .menu-container ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        list-style: none;
        text-align: center;
      }

      .menu-container li {
        margin-bottom: 20px;
      }

      .menu-container li a {
        display: inline-block;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
      }

      .menu-container li a:hover {
        color: #f9d56e;
      }

      .open .menu-line:nth-child(2) {
        opacity: 0;
        transform: rotate(45deg);
      }

      .open .menu-line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
      }

      .open .menu-line:nth-child(3) {
        transform: translateY(-10px) rotate(45deg);
      }

      .show {
        left: 0;
      }
    </style>
  </head>
  <body>
    <!-- 菜单按钮 -->
    <div class="menu-icon">
      <div class="menu-line"></div>
      <div class="menu-line"></div>
      <div class="menu-line"></div>
    </div>
    <!-- 菜单容器 -->
    <div class="menu-container">
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
      </ul>
    </div>
    <script>
      const menuIcon = document.querySelector(".menu-icon");
      const menuContainer = document.querySelector(".menu-container");

      menuIcon.addEventListener("click", function() {
        if (menuContainer.classList.contains("show")) {
          // 隐藏菜单容器
          menuContainer.classList.remove("show");
          menuIcon.classList.remove("open");
        } else {
          // 显示菜单容器
          menuContainer.classList.add("show");
          menuIcon.classList.add("open");
        }
      });
    </script>
  </body>
</html>

示例二

假设我们需要在一个 Vue.js 项目中实现这个效果，那么这个效果的实现方式就有所不同。我们需要在一个 Vue.js 的单文件组件中编写代码，同时使用 Vue.js 的数据绑定功能来实现菜单容器的显示和隐藏效果。

<template>
  <div>
    <!-- 菜单按钮 -->
    <div class="menu-icon" :class="{ open: isShowMenu }" @click="toggleMenu">
      <div class="menu-line"></div>
      <div class="menu-line"></div>
      <div class="menu-line"></div>
    </div>
    <!-- 菜单容器 -->
    <div class="menu-container" :class="{ show: isShowMenu }">
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "SlideMenu",
  data() {
    return {
      isShowMenu: false
    };
  },
  methods: {
    toggleMenu() {
      this.isShowMenu = !this.isShowMenu;
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.menu-line {
  height: 3px;
  margin-bottom: 5px;
  background-color: #333;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu-container {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: left 0.3s ease-in-out;
  z-index: 998;
}

.menu-container ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}

.menu-container li {
  margin-bottom: 20px;
}

.menu-container li a {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.menu-container li a:hover {
  color: #f9d56e;
}

.open .menu-line:nth-child(2) {
  opacity: 0;
  transform: rotate(45deg);
}

.open .menu-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.open .menu-line:nth-child(3) {
  transform: translateY(-10px) rotate(45deg);
}

.show {
  left: 0;
}
</style>

在这个 Vue.js 单文件组件中，我们首先使用 template 标签定义了组件的 HTML 模板，同时使用 Vue.js 的数据绑定功能将菜单容器的显示状态与组件的数据属性绑定起来。然后，我们在 script 标签中定义了一个 toggleMenu 方法，用于切换菜单容器的显示和隐藏状态。最后在 style 标签中定义了组件的 CSS 样式。

这两个示例代码展示了不同情境下的实现方式，可以让读者对这个功能有更好的理解。

本文标题为：js实现鼠标点击左上角滑动菜单效果代码

上一篇： js CSS3实现卡牌旋转切换效果
下一篇： CSS网页布局入门教程6：左列固定，右列宽度自适应

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2