[分享]css3左侧滑动菜单

发布于 2024-11-11 15:24:24

CSS3 左侧滑动菜单是 Web 开发中经常用到的一种交互方式，下面是一个简单的实现示例：

<html>
<head>
  <style>
    #menu {
      position: fixed;
      top: 0;
      left: -200px;
      height: 100%;
      width: 200px;
      background-color: #333;
      color: #fff;
      transition: all 0.3s ease-in;
    }
    #menu ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    #menu li {
      padding: 10px;
      border-bottom: 1px solid #555;
    }
    #menu a {
      color: #fff;
      text-decoration: none;
    }
    #menu-toggle {
      position: fixed;
      top: 20px;
      left: 20px;
      font-size: 30px;
      cursor: pointer;
      z-index: 9999;
    }
    #menu-toggle:hover {
      color: #fff;
    }
    #menu-toggle:before {
      content: "\2261";
    }
    #menu-toggle.open:before {
      content: "\2715";
    }
    #menu-toggle:focus {
      outline: none;
    }
    #menu-toggle.open ~ #menu {
      left: 0;
    }
  </style>
</head>
<body>
  <div id="menu-toggle"></div>
  <div id="menu">
    <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>
  </div>
</body>
</html>

上述代码中，我们使用了 position 属性将 #menu、#menu-toggle 定位到了页面上。#menu 初始位置是在左边界外，通过 CSS3 的过渡效果（transition）和 left 属性，点击后可以滑动出来。#menu-toggle 是一个空的 div，我们使用了 ::before 伪元素来添加菜单按钮的样式。控制菜单滑出和滑回的 JavaScript 代码如下：

var menuToggle = document.getElementById('menu-toggle');
var menu = document.getElementById('menu');

menuToggle.addEventListener('click', function(e) {
  menuToggle.classList.toggle('open');
  e.preventDefault();
});

document.addEventListener('click', function(e) {
  if (menuToggle.classList.contains('open') && !menu.contains(e.target)) {
    menuToggle.classList.remove('open');
  }
});

在点击菜单按钮时，我们给 #menu-toggle 添加了 .open 类，用以控制按钮样式。在页面其他地方点击时，会检查当前菜单是否处于打开状态，如果是，则关闭菜单。

css 教程