1. Python技术站首页
  2. css

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

• css

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

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实现鼠标点击左上角滑动菜单效果代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    下面是详细讲解“详解VScode自动补全CSS3前缀插件以及配置无效的解决办法”的完整攻略。 什么是CSS3前缀？ CSS3前缀是指CSS3新增的属性在不同浏览器中需要加上不同的前缀才能生效的现象。例如，在谷歌浏览器中，我们要使用CSS3新增的border-radius属性，需要在前面加上-webkit-前缀，即-webkit-border-radius。而…

    css 2023年6月10日
    00

  • css hack之清除浮动(clearfix)

    清除浮动（clearfix）是CSS hack技术中的一种，它主要用于清除父级容器元素中子级浮动元素带来的影响，以避免出现莫名其妙的问题。下面是完整的清除浮动攻略。 什么是清除浮动（clearfix）？ 清除浮动是在一个容器里包含了浮动元素后，为了让父级元素能够自适应子元素高度而产生的一种CSS hack技术。在不清除浮动的情况下，容器无法识别浮动元素的高度…

    css 2023年6月10日
    00

  • css高度随宽度比例变化的几种实现方法

    下面是关于 CSS 高度随宽度比例变化的几种实现方法的攻略。 方法一：使用padding百分比计算 我们可以设置一个固定的宽度，然后利用padding百分比来达到高度随宽度变化的效果。例如： <style> .container { width: 500px; height: 0; padding-bottom: 66.6%; backgroun…

    css 2023年6月10日
    00

  • HTML5 层的叠加的实现

    HTML5 层的叠加实现通常使用 CSS 中的 position 属性来实现。position 属性有四个取值：static（默认值）、relative、absolute 和 fixed。其中 relative、absolute 和 fixed 三个取值可以进行层的叠加。 相对定位 相对定位（position: relative）是以元素在正常文档流中的位置…

    css 2023年6月9日
    00

  • JavaScript截屏功能的实现代码

    我来为您讲解“JavaScript截屏功能的实现代码”的完整攻略。 1. 基本思路 实现JavaScript截屏功能的基本思路是，使用HTML5新增的Canvas元素，将页面上需要截屏的部分绘制到Canvas上，然后将Canvas转换为图片格式保存。具体步骤如下： 创建Canvas元素和Context对象 绘制需要截屏的部分到Canvas上 将Canvas转…

    css 2023年6月10日
    00

  • CSS list-style-type属性使用方法

    当我们需要给HTML列表元素添加样式时，可以使用CSS的list-style-type属性来实现。这个属性定义了列表项符号的类型，可以用不同的值来改变列表项符号的类型。 常用值 list-style-type属性常用的值包括： none：不显示列表项符号。 disc：默认值，使用实心圆点作为列表项符号。 circle：使用空心圆圈作为列表项符号。 squar…

    css 2023年6月10日
    00

  • css 实现圆形渐变进度条效果的示例代码

    下面我来详细讲解如何使用 CSS 实现圆形渐变进度条效果的完整攻略。 1. 实现思路 首先，我们需要了解如何使用 CSS 绘制圆形。 CSS 中可以通过设置圆形元素的 border-radius 属性来实现圆形。我们可以将元素的 width 和 height 属性设置为相等的值，再把 border-radius 设置为一半的值，就能够绘制出一个完整的圆形了。…

    css 2023年6月9日
    00

  • css 不换行 自动换行 强制换行的实现方法

    以下是关于 CSS 不换行、自动换行和强制换行的实现方法的详细攻略: 1. CSS 不换行 如果我们希望文本在超出容器宽度的情况下不换行，可以使用 white-space 属性来实现。white-space 属性可以取以下几个值： normal：默认值，合并连续的空白字符，换行符会被当成空白符处理，文本自动换行。 nowrap：强制不换行。 pre：保留空白…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部