این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)

امروز قصد داریم در این آموزش نحوه ی ایجاد آیکون منو با transform را به شما آموزش دهیم. در ابتدا یک آیکون منو ساده که تشکیل شده از سه خط بر روی یکدیگر هستند را آموزش می دهیم، سپس سراغ ساخت آیکون منویی جذاب تر خواهیم رفت. توجه کنید در این آموزش از هیچ کتابخانه ی آیکونی و یا فونت آیکون استفاده نکرده ایم!

ساخت آیکون منو با transform

برای ساخت آیکون منویی به شکل بالا باید از کدهای زیر استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>

<p>آیکون منو :</p>

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

</body>
</html>

سه عدد div ایجاد کرده ایم که دارای عرض و ارتفاع مشخصی به اندازه همان خط هستند و به div ها پس زمینه مشکی داده ایم تا با کمک مارجین و پدینگ شاهد نمایش سه خط بر روی هم باشیم.

حال فرض کنید قصد داریم کد بالا را تغییر بدهیم به گونه ای که کاربر با کلیک بر روی سه خطی که وجود دارد، با کمک کدهای transform به X تغییر وضعیت بدهد. یعنی خط وسط حذف شده و خط اول و سوم یکدیگر را قطع کنند.

برای این منظور باید کد های زیر را در صفحه خود قرار بدهیم:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>

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

</body>
</html>

عبارت های -webkit- که نوشته شده برای مرورگرهایی است که نسخه های قدیمی می باشند و به روزرسانی نشده اند. برخی از نسخه های قدیمی مرورگرها از قابلیت transform پشتیبانی نمی کنند. برای پشتیبانی و انعطاف پذیری بیشتر می توانید از -moz- و -ms- و -o- نیز همانند -webkit- استفاده کنید.

ایجاد افکت به هنگام کلیک بر روی آیکون

برای ایجاد افکتی که باعث شود آیکون منو با کمک transform به حالت ضربدر در آید به جاوا اسکریپت نیز نیاز داریم. در کد زیر با استفاده از اسکریپت های جاوااسکریپت اقدام به تغییر حالت آیکون منو میکنیم. به این صورت که با کلیک بر روی منو آیکون تغییر وضعیت انجام می شود.

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

نحوه تغییر حالت خط های منو را نیز با کمک transform در CSS به صورت زیر مشخص می کنیم :

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

در خط اول تعیین کردیم یک چرخش 45 درجه ای پادساعتگرد داشته باشد و با توجه به اندازه های مشخص شده در راستای افقی و عمودی جا به جا می شود.
خط دوم نیز با کمک تکه کد opacity: 0 حذف می شود.
برای خط سوم نیز شرایطی مشابه خط اول رخ خواهد داد فقط جهت های متفاوتی با خط اول خواهد داشت.

خب به پایان آموزش ایجاد آیکون منو با transform در CSS رسیدیم. در جلسات آینده قصد داریم مباحث کاربردی تری درباره HTML & CSS بیان کنیم. اگر مطلبی یا موضوعی را می خواهید بررسی کنیم، می توانید در پایین همین مقاله آموزشی و در بخش نظرات اعلام کنید تا در اسرع وقت آموزش متنی یا ویدئویی متناسب با موضوعات شما را فراهم کنیم و در اختیار شما قرار دهیم.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

آموزش ساخت آیکون منو با کمک transform

مهندس محسن صادق نژاد

ساخت آیکون منو با transform

ایجاد افکت به هنگام کلیک بر روی آیکون

مهندس محسن صادق نژاد