خانه / برنامه نویسی / ساخت آیکون های همبرگری تنها با css
hamburgers

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

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

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

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

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

hamburger_icons_featured

کد HTML 

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

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

کد css مشترک 

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

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

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

کد css برای span : 

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

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

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

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

استایل دوم – متحرک کردن به “X”

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

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

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

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

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

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

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

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

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

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

sass برای کمک 

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

خب در نتیجه 

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

پاپ کده

درباره‌ی majidkingkm

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *