تبلیغات

ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه

ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه

ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه
با استفاده از HTML, CSS و جاوا اسکریپت خالص


در اپلیکیشن‌های اندرویدی، منویی وجود دارد که با کشیدن صفحه به سمت راست یا چپ باز می‌شود؛ از جمله اپلیکیشن Gmail اندروید. و این منوها، آیکونی برای باز کردن دارند که شکل آن به صورت چند خط زیر هم می‌باشد. و معمولا با کلیک روی آن، انیمیشنی روی آیکون‌ها رخ داده به شکل ضربدر در می‌آید؛ و در نهایت منو باز می‌شود. برای ساخت چنین آیکونی بدون نیاز به کتابخانه‌های جانبی در ادامه با فول کده همراه باشید.

مراحل انجام کار

از آنجایی که آیکون ما شامل سه خط است، ماهم سه div ایجاد می‌کنیم: (البته الزامی نیست که حتما از div استفاده کنید.)

سپس استایل CSS آن را به صورت زیر می‌نویسیم:

همانطور که می‌بینید، با استفاده از انتخابگر div، به کل div ها خاصیت‌های یکسانی داده‌ایم.

و اما کل کد به صورت یکجا:

سخت انیمیشن آیکون و اصلاح کد

می‌خواهیم تا با کلیک روی آیکون منو، سه خط با یک انیمیشن چرخشی ساده، به حالت ضربردری تبدیل شوند! و با کلیک دوباره، به حالت اولیه بازگردند. بنابراین برای شروع، کد HTML خود را به صورت زیر می‌نویسیم:

همانطور که می‌بینید، یک المنت به عنوان بدنه‌ی کلی برای تمامی خطوط منو در نظر گرفته‌ایم که شامل کلاس «container» می‌باشد و همچنین هر کدام از المنت‌های مربوط به خطوط، از یک کلاس مجزایی به نام‌های «bar1»، «bar2» و «bar3» استفاده می‌کنند؛ و در نهایت نیز رویداد کلیک شدن روی بدنه‌ی آیکون را به تابع «myFunction»  جاوا اسکریپت که بعدا خواهیم نوشت ارتباط می‌دهیم.

کد استایل CSS ما به صورت زیر می‌باشد:

در کلاس «container» که برای بدنه‌ی آیکون  می‌باشد، خاصیت نمایشی آن را به «inline-block» تغییر داده‌ایم تا کل یک سطر را دربرنگیرد. همچنین آیکون ماوس آن را به اشاره‌گر تغییر دادیم.

در ادامه، برای سه کلاس «bar1»، «bar2» و «bar3» ویژگی‌های یکسانی را تعریف کرده‌ایم؛ همان وبژگی‌هایی که در بالا به آن‌ها اشاره شد به همراه ویژگی جدید «transition» برای مشخص کردن زمان اجرای انیمیشن روی خطوط آیکون. یعنی انیمیشن 0.4 ثانیه طول خواهد کشید تا پس از شروع شدن، به اتمام برسد. (ما قرار است هر خط را انیمیت کنیم)

در نهایت کلاسی با نام «change» را برای تمام «bar» ها و به صورت جدا تعریف کرده‌ایم. که در واقع این کلاس با اضافه شدن به بدنه‌ی آیکون در زمان کلیک شدن روی آن، قرار است حالت انیمیشنی هر خطی را به صورت جدا از هم ایجاد کند:

  • bar1 (خط اول) آن را 45 درجه چرخانده و سپس جابه‌جا می‌کند تا در مرکز قرار گیرد. البته مقدار جابه‌جایی به عرض و ارتفاع المنت بستگی دارد که ما در اینجا آن را -9px, 6px تنظیم کرده‌ایم. همچنین ما از -webkit-transform هم استفاده کرده‌ایم تا در مرورگرهای مختلف مشکلی پیش نیاید که البته باید بدانید در هر مرورگی یکی از این دو مورد را اجرا خواهد شد.
  • bar2 (خط دوم) خط دوم بایستی حذف شود تا دو خط پس از چرخیدن به حالت ضربدری دربیایند! بنابراین میزان شفافیت خط دوم را 0 می‌کنیم تا مخفی شده و دیگر دیده نشود.
  • bar3 (خط سوم) این خط نیز همانند خط اول بوده و تنها جهت چرخش آن مثبت است.

حالا بایستی تابع «myFunction» را پیاده‌سازی کنیم تا با کلیک روی بدنه‌ی آیکون، کلاس «change» اضافه یا حذف شود.

و در نهایت کد ما به صورت زیر خواهد بود:

اگر برایتان سوال شده که حالت برعکس آیکون چطور به عقبت انیمیشن می‌شود در حالی که کد آن را در CSS ننوشتیم، باید بگویم که با حذف کلاس change، همه تغییرات داده شده‌ی این کلاس به عقب برگردانده شده و یا به عبارتی برعکس می‌شود!

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

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس فول استک

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه