ساخت و متحرک سازی آیکون های همبرگری تنها با css

منوهای همبرگری امروزه به یک جزء اصلی در بسیاری از وب سایت ها و برنامه های تحت وب تبدیل شدن . و این که شما اون ها رو دوست دارید یا نه ، اونها در حال تبدیل شدن به یه دکمه آشنا و قابل تشخیص در UI هستن . کاربرانی که در ارتباط با این آیکون ها هستن با نشون دادن اون و مخفی کردن منو ها باعث صرفه جویی در فضا سایت میشن ، به ویژه در صفحه نمایش های کوچیک . که همین استفاده ها ماهیت این آیکون ها رو میسازه .

در گذشته طراحا آیکون ها رو بصورت تصویر میساختن یا دانلود میکردن و در سند html قرار میدادن این روش سریغ  و آسان بود اما : 

با اومدن تجربه اسفتاده از گجت های همراه مثل تلفن همراه و انیمیشن های وب و روی کار اومدن متد جدید گوگل در طراحی به اسم material design کاربرا هم انتظار دارن یه تجربه ای تعاملی تر داشته باشن. از این رو امروز من قصد دارم به شما نشون بدم چگونه تنها با استفاده css بتونین آیکون های همبرگری بسازید و اونها رو متحرک کنید .

در پیش نمایشی که بهتون ارائه میدم ،  ما آیکون های را بوجود میاریم و هر کدوم رو با انیمیشن های مخصوص بخودش متحرک میکنم و در آخر با اضافه کردم کلاس "active" به آیکون نشون میدیم که وقتی یه آیکون فعال بشه یعنی منو بازه و در صورت غیر فعال بودن منو بسته اس این کارو با جاوااسکریپت انجام میدیم . بسیار خوب بریم سراغ نوشتن کد . 

کد HTML 

برای اینکه بخوایم 4 پیش نمایش متفاوت درست کنیم از 4 تا تگ button استفاده میکنیم که تا حدودی شبیه هم هستن و همینطور هر کدوم  داری یه کلاس مشترک و یه کلاس منحصر بفرد هستن در داخل هر تگ button یه تگ span وجود داره . تگ پدر که در اینجا button هست به ما اجازه میده تا به آیکون هامون خصوصیات padding وbackground colors رو اضافه کنیم . تگ span در واقع نقش خونه رو بازی میکنه که با استفاده از اون 3 تا خطی که برای کارمون نیاز داریم رو رسم میکنیم .

در زیر کد html که در بالا توصیف کردیم رو میتونید ببینید : 

  toggle menu
  toggle menu
  toggle menu
  toggle menu

کد css مشترک 

برای شروع ، من سبک همه ای دکمه ها رو تنظیم مجدد کردم بطوری که هیچ border , shadows ، appearance بطور پیش فرض وجود نداشته باشه . و همچنین عرض و طول برای دکمه ها تعریف کردم و متن رو هم hidden کردم . اسم کلاس مشترک رو برای button ها : cmn-toggle-switch

.cmn-toggle-switch {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 108px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}
 
.cmn-toggle-switch:focus {
  outline: none;
}

در تگ داخلی که همون تگ span و ما بهش خونه همبرگر میگیم نیاز به 3 تا خط داریم بنابراین از خود تگ و و عناصر شبه تگ after::  و before:: استفاده میکنیم و موقعیت هر خط رو تنظیم میکنیم. 

اگه شما برای کد نویسی css از sass استفاده میکنید ، پس کارتون خیلی خیلی آسونتر میشه و شما به راحتی میتونید با استفاده از sass کد منبع رو ویرایش کنید . اگه نه  فکر کنم کارتون یکم سخت میشو برای تنظیم باید یکم بیشتر تلاش کنید . برای فهمیدن موضوع میتونید به کد های زیر نگاهی بندازید . 

کد css برای span : 

.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 45px;
  left: 18px;
  right: 18px;
  height: 6px;
  background: white;
}
 
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #fff;
  content: "";
}
 
.cmn-toggle-switch span::before {
  top: -27px;
}
 
.cmn-toggle-switch span::after {
  bottom: -27px;
}

خب حالا اجازه بدید روی هر کدوم از اون 4 تا آیکون کار کنیم و تک به تک انیمیشن هاشون رو بسازیم . 

استایل اول - آیکون چرخشی 

این ساده ترین آیکون ماست . به این صورته که با کلیک روش و فعال شدن ما یه انیمیشن چرخشی رو تماشا میکنیم .

در زیر کد css رو هم میتونید ببینید . 

/**
 * Style 1
 *
 * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
 * Nothing too fancy, simple transition.
 */
.cmn-toggle-switch__rot {
  background-color: #28aadc;
}
 
.cmn-toggle-switch__rot span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
/* active state, i.e. menu open */
.cmn-toggle-switch__rot.active {
  background-color: #166888;
}
 
.cmn-toggle-switch__rot.active span {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

استایل دوم - متحرک کردن به "X"

در این ورژن از آیکون همبرگری برای بوجود اومدن "X" خط بالا و پایین بصورت عمودی به مرکز حرکت میکنه و بعد با یه چرخش به "X" تبدیل میشه . من از transition delays استفاده میکنم برای بدست آوردن یه اثر کلی . در کل هدفمون اینکه خط بالا و پایین به مرکز منتقل بشه و با یه چرخش به "X" تبدیل بشه.

در زیر کد css رو میتویند ببینید :

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.cmn-toggle-switch__htx {
  background-color: #ff3264;
}
 
.cmn-toggle-switch__htx span {
  -webkit-transition: background 0 0.3s;
          transition: background 0 0.3s;
}
 
.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;
}
 
.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}
 
.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}
 
/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
  background-color: #cb0032;
}
 
.cmn-toggle-switch__htx.active span {
  background: none;
}
 
.cmn-toggle-switch__htx.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
 
.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
 
.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
}

استایل سوم - متحرک سازی به فلش سمت چپ 

در این ورژن از آیکون اول خطها بصورت 180 درجه میچرخن و بعد خط بالا و پایین فلش بسمت چپ رو بوجود میارن .

کد css رو میتونید در زیر ببینید : 

/**
 * Style 3
 *
 * Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing
 * arrow. Usually indicates an off canvas menu sliding in from left that
 * will be close on re-click of the icon.
 */
.cmn-toggle-switch__htla {
  background-color: #32dc64;
}
 
.cmn-toggle-switch__htla span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
.cmn-toggle-switch__htla span::before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
 
.cmn-toggle-switch__htla span::after {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
 
/* active state, i.e. menu open */
.cmn-toggle-switch__htla.active {
  background-color: #18903c;
}
 
.cmn-toggle-switch__htla.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
 
.cmn-toggle-switch__htla.active span::before,
.cmn-toggle-switch__htla.active span::after {
  width: 50%;
}
 
.cmn-toggle-switch__htla.active span::before {
  top: 0;
  -webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
      -ms-transform: translateX(42px) translateY(3px) rotate(45deg);
          transform: translateX(42px) translateY(3px) rotate(45deg);
}
 
.cmn-toggle-switch__htla.active span::after {
  bottom: 0;
  -webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
      -ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
          transform: translateX(42px) translateY(-3px) rotate(-45deg);
}

استایل چهارم -  متحرک سازی به فلش سمت راست 

این ورژن دقیقا شبیه قبلیه با این تفاوت که در آخر سمت فلش راست رو نشون می ده . 

کد css رو میتونید در زیر ببینید : 

/**
 * Style 4
 *
 * Hamburger to right-arrow (htra). Hamburger menu transforms to a
 * right-pointing arrow. Usually indicates an off canvas menu sliding in from 
 * right that will be close on re-click of the icon.
 */
.cmn-toggle-switch__htra {
  background-color: #ff9650;
}
 
.cmn-toggle-switch__htra span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
.cmn-toggle-switch__htra span::before {
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
 
.cmn-toggle-switch__htra span::after {
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
 
/* active state, i.e. menu open */
.cmn-toggle-switch__htra.active {
  background-color: #e95d00;
}
 
.cmn-toggle-switch__htra.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
 
.cmn-toggle-switch__htra.active span::before,
.cmn-toggle-switch__htra.active span::after {
  width: 50%;
}
 
.cmn-toggle-switch__htra.active span::before {
  top: 0;
  -webkit-transform: translateX(-6px) translateY(3px) rotate(-45deg);
      -ms-transform: translateX(-6px) translateY(3px) rotate(-45deg);
          transform: translateX(-6px) translateY(3px) rotate(-45deg);
}
 
.cmn-toggle-switch__htra.active span::after {
  bottom: 0;
  -webkit-transform: translateX(-6px) translateY(-3px) rotate(45deg);
      -ms-transform: translateX(-6px) translateY(-3px) rotate(45deg);
          transform: translateX(-6px) translateY(-3px) rotate(45deg);
}

کمی جاوا اسکریپت 

برای زمانی که روی این آیکون ها کلیک میکنیم و میخوایم فعال یا غیر فعال بشن برای همین هم از جاوا اسکریپت استفاده میکنیم .

(function() {
 
  "use strict";
 
  var toggles = document.querySelectorAll(".cmn-toggle-switch");
 
  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };
 
  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("active") === true) ? this.classList.remove("active") : this.classList.add("active");
    });
  }
 
})();

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

sass برای کمک 

همونطور که در بالا هم ذکر شد ، اگر شما از sass استفاده کنید . کار راحتری برای کل این پرسه دارید . در کد منبع با استفاده از sass به راحتی میشه دکمه رو ویرایش کرد ، ضخامت میله رو کم یا زیاد کرد . padding و margin تگ های button و Span رو میشه به راحتی ، حتی راحت تر از قبل تغییر داد و خیلی در زمان صرفه جویی کرد . 

خب در نتیجه 

این یه جمع بندیه ! شما دوستان عزیز میتونید نسخه آزمایشی و فایل رو با کلیک روی لینک های زیر دانلود کنید و اگه شما سوال ، نظر یا پیشنهادی داشتید حتما با ما در میون بزارید و در زیر در بخش کامنت برای ما ارسال کنید . با تشکر از این که وقتتونو به ما دادینو و تا آخر مقاله با ما بودید اگه اشتباهی تو مقاله بود حتما بهمون بگید .