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

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

از سری آموزش های HTML و CSS سایت تاتژن، امروز در این آموزش قصد داریم نحوه ساخت دکمه همبرگری که به شکل ضربدر در خواهد آمد را آموزش دهیم. تا پایان با این آموزش که کاربردش بعنوان دکمه ی منو سایت است، با ما همراه باشید

آموزش ایجاد دکمه ی همبرگری برای منو

دکمه ی همبرگری همان دکمه ای است که از سه خط تشکیل شده است. ( عکس زیر را ببینید)

در ابتدا یک آیکون منو ساده که تشکیل شده از سه خط بر روی یکدیگر هستند را آموزش می دهیم و سپس سراغ ساخت آیکون منویی جذاب تر خواهیم رفتکه به شکل ضربدر در خواهد آمد. برای ساخت آیکون منویی به شکل بالا باید از کدهای زیر استفاده کنیم:

<!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 ها پس زمینه مشکی داده ایم تا با کمک margin و padding شاهد نمایش سه خط بر روی هم باشیم.

حال فرض کنید قصد داریم کد بالا را تغییر بدهیم به گونه ای که کاربر با کلیک بر روی دکمه ی همبرگری سه خطی که وجود دارد، با کمک کدهای 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>

<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>

</body>
</html>

عبارت های -webkit- که نوشته شده برای مرورگرهایی است که نسخه های قدیمی می باشند و به روزرسانی نشده اند. همچنین می توانید از پیشوند های دیگر نیز استفاده کنید:

-moz-
-ms-
-o-

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

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

توضیح کد بالا

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

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

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

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

آموزش ساخت دکمه ی همبرگری منو بصورت ضربدری در CSS

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

آموزش ایجاد دکمه ی همبرگری برای منو

توضیح کد بالا

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