ساخت آیکون منو در طراحی وب سایت

در این مقاله می آموزید که چطور با استفاده از کد CSS یک Icon برای منو ایجاد کنید. اگر شما از کتابخانه Icon استفاده نمیکنید، می توانید با استفاده از کد CSS یک منوی Icon پایه ای ( ساده ) ایجاد کنید.

ساخت Simple Menu Icon

قدم اول : کد HTML را اضافه کنید.
مثال :

قدم دوم :  کد CSS را برای ساخت آیکون منو ساده وارد کنید.

div {

  width: 35px;

  height: 5px;

  background-color: black;

  margin: 6px 0;

}

توضیح مثال :
مولفه width و height ارتفاع و پهنای هر منو را مشخص می کند. ما مولفه background-color را رنگ مشکی گذاشتیم و مولفه margin که در بالا و پایین قرار دارد برای ایجاد فاصله بین هر منو استفاده می شود.

ساخت Animated Menu Icon

برای اینکه پس از کلیک بر روی آیکون منو، نماد cancel/remove به ما نشان داده شود، کد CSS و جاوا اسکریپت زیر را وارد کنید.

قدم اول : کد HTML را اضافه کنید.
مثال :

برای ساخت آیکون منو غیرساده، دستورات 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) ;
}

قدم سوم :  در نهایت کد جاوا اسکریپت زیر را اضافه کنید تا منو غیرساده برای شما ساخت شود.

function myFunction(x) {

  x.classList.toggle("change");

}

توضیح مثال :
HTML , CSS :  همانند کدهای قبل عمل می کنیم، با این تفاوت که از مولفه container قبل و بعد مولفه استفاده می کنیم و برای هر کدام، اسم کلاس مشخص می کنیم. مولفه container برای نمایش سمبل اشاره گر( Pointer) در منو استفاده می شود. وقتی روی آن کلیک می شود، یک تابع جاوا اسکریپت اجرا می کند که باعث می شود یک نام جدید برای کلاس به آن اضافه شود، که سبک ( مدل ) هر منوی افقی را تغییر می دهد. اولین و آخرین منو به حرف X تبدیل می شوند و منوی وسط محو می شود.