پروژه طراحی سایت - ساخت آیکون منو

پروژه طراحی سایت - ساخت آیکون منو در طراحی وب سایت

ما اومدیم با یه مقاله دیگه!! میدونم خیلی مشتاق بودید ? بریم سراغ اصل مطلب ?

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

ساخت Simple Menu Icon

قدم اول : کد HTML را اضافه کنید.(3 تا div اضافه کنید)

مثال :

<div></div>

<div></div>

<div></div>

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

مثال ساخت آیکون منو ساده :

div {

width: 35px;

height: 5px;

background-color: black;

margin: 6px 0;

}

توضیح مثال :

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

ساخت Animated Menu Icon

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

یک کلاس Container تعریف میکنیم (container به معنی ظرف یا نگهدارنده هستش، معمولا وقتی میخوان یک بخش دیگه رو بهش حاشیه بدن، یک کلاس container اولیه ایجاد می کنند و اون بخش دیگه رو میذارن داخلش.)

بعد 3 تا div با کلاس bar1,2,3 تعریف می کنیم

مثال :

<div class=&quotcontainer&quot =&quotmyFunction(this)&quot>

<div class=&quotbar1&quot></div>

<div class=&quotbar2&quot></div>

<div class=&quotbar3&quot></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;

}

/* 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(&quotchange&quot);

}

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

امیدوارم از این مقاله آموزش طراحی سایت ساخت آیکون منو خوشتون اومده باشه ?

ما رو دنبال کنید بازم با یه سری آموزش طراحی سایت بر میگردیم ....