如何-菜单图标

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

如何创建菜单图标

如果您没有使用图标库，您可以使用 CSS 创建一个基本的菜单图标：

菜单图标：

亲自试一试 »

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

亲自试一试 »

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}

亲自试一试 »

示例解释

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

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

动画图标

单击时，使用 CSS 和 JavaScript 将菜单图标更改为 "cancel/remove" 图标：

步骤1）添加HTML：

示例

步骤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 {
transform: translate(0, 11px) rotate(-45deg);
}

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

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

步骤 3) 添加 JavaScript：

示例

function myFunction(x) {
x.classList.toggle("change");
}

亲自试一试 »

示例解释

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

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