چگونه ایجاد کنیم: آیکون منو

چگونه آیکون منو ایجاد کنیم

مرحله اول - اضافه کردن 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> پیوسته شده است و به هر علامت یک نام کلاس اختصاص داده شده است.

عنصر مخزن برای نمایش یک نماد نشانگر زمانی که کاربر ماوس را بر روی divها (خطوط) قرار می‌دهد استفاده می‌شود. زمانی که آن را کلیک می‌کند، یک تابع JavaScript اجرا می‌شود که یک نام کلاس جدید به آن اضافه می‌کند که سبک هر خط افقی را تغییر می‌دهد: اولین و آخرین خطوط تغییر شکل و به شکل حرف «x» چرخش می‌یابند. خطوط میانی به تدریج محو شده و دیده نمی‌شوند.