如何创建：菜单图标

学习如何使用 CSS 创建菜单图标。

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

میکرونوم میکرونوم:

亲自试一试

آنی میکرونوم میکرونوم (پرنچ کریں):

亲自试一试

کیسٹی میکرونوم کیسٹی میکرونوم کیسٹی میکرونوم

第一步 - 添加 HTML：

第二步 - 添加 CSS：

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

亲自试一试

例子解释：

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

我们添加了黑色背景颜色以及上下外边距，来创建每个条之间的间距。

动画图标

使用 CSS 和 JavaScript，在被点击时，将菜单图标更改为“取消/删除”图标：

第一步 - 添加 HTML：

第二步 - 添加 CSS：

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* 旋转第一个栏 */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* 淡出第二栏  */
.change .bar2 {opacity: 0;}
/* 旋转最后一个栏 */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

第三步 - 添加 JavaScript：

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

亲自试一试

例子解释：

HTML 和 CSS：我们使用了与之前相同的样式，但这次我们为每个

元素包裹了一个容器元素，并为每个元素指定了一个类名。

عنصر کانٹینر کا استعمال کیا جاتا ہے کہ جب استعمال کنندہ ماؤس کو divs (خطوط) پر لگا دیا جائے تو ایک پوائنٹر نمائش نمائش کی جائے۔ جب یہ کلک کیا جائے تو یہ ایک جاوا اسکریپٹ فانکشن کو چلائے گا، جس میں اس کو ایک نئی کلاس نا م شامل کیا جائے گا، جس سے ہر عمودی سٹایل تبدیل ہوگا: پہلا اور آخری خطوط کو کج کی شکل میں تبدیل ہو گا اور بائیں کی طرف بچھ جائے گا۔ وسطی خطوط کو تیزی سے خفیف ہو جائیں گے اور دیکھائی نہیں آئیں گے。