菜单图标

---

了解如何使用 CSS 创建菜单图标。

---

如何创建菜单图标

如果你不使用图标库，你可以用 CSS 创建一个基本的菜单图标:

菜单图标:

亲自试一试 »

动画菜单图标（点击它）:

亲自试一试 »

---

步骤 1) 添加 HTML:

实例

<div></div>
<div></div>
<div></div>

步骤 2) 添加 CSS:

实例

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
} 亲自试一试 »

实例解析

width 和 height 属性指定每个条的宽度和高度。

我们添加了黑色 background-color 背景色，顶部和底部 margin 边距用于在每个条形之间创建一些距离。

---

---

动画图标

单击时使用 CSS 和 JavaScript 将菜单图标更改为"取消/删除"图标:

步骤 1) 添加 HTML:

实例

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

步骤 2) 添加 CSS:

实例

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

步骤 3) 添加 JavaScript:

实例

function myFunction(x) {
  x.classList.toggle("change");
} 亲自试一试 »

实例解析

HTML & CSS: 我们使用与以前相同的样式，只是这一次，我们在每个 <div> 元素周围包装了一个容器元素，并为每个元素指定了一个类名。

当用户将鼠标移到 div（条）上时，容器元素用于显示指针符号。 单击它时，它将执行一个 JavaScript 函数，为其添加一个新的类名，这将改变每个水平条的样式:第一个和最后一个条被转换并旋转到字母"x"。 中间的条逐渐消失并变得不可见。