كيفية إنشاء: أيقونة قائمة

كيفية إنشاء أيقونة قائمة

الخطوة الأولى - إضافة HTML:

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

الخطوة الثانية - إضافة CSS:

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

جربها بنفسك

توضيح المثال:

width و height تحدد الخصائص كل رافد عرضه وارتفاعه.

لقد أضفنا لون الخلفية الأسود والهوامش العلوية والسفلية لإنشاء مسافات بين كل رافد.

أيقونة الرسوم المتحركة

استخدم CSS و JavaScript لتغيير أيقونة القائمة إلى أيقونة "إلغاء/حذف":

الخطوة الأولى - إضافة HTML:

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

الخطوة الثانية - إضافة 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: نحن نستخدم نفس النمط كما من قبل، لكننا نغلف كل عنصر <div> بعنصر مدمج، ونحدد فئة لكل عنصر.

العنصر المدمج يستخدم لعرض رمز المؤشر عند وضع الفأرة فوق divs (الخطوط). عند النقر عليه، سيقوم بتنفيذ وظيفة JavaScript، التي ستضيف له فئة جديدة، مما سيغير نمط كل خط أفقي: الخط الأول والآخر سيتم تحويلهما ولفة إلى حرف "x". الخطوط الوسطى ستتلاشى تدريجياً وستصبح غير مرئية.