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

آموزش مخفی و نمایان کردن منو با jquery یا sticky menu
آموزش مخفی و نمایان کردن منو با jquery یا sticky menu
۱۱ اسفند ۱۳۹۸
آموزش ساخت لودینگ page loading با css
آموزش ساخت لودینگ page loading با css
۱۳ اسفند ۱۳۹۸
آموزش ساخت منوی کشویی یا canvas منو با jquery

چگونه یک منوی کشویی یا همون canvas منو با html ، css و جی کوئری (jquery) ایجاد کنیم

سلام دوستان در این مقاله میخوام به شما آموزش ساخت canvas منو یا به اصطلاح منوی کشویی رو بدم من خودم به شخصه علاقه زیادی به این منو ها دارم و در اکثر پروژه هام از canvas منو استفاده میکنم البته مگر اینکه کارفرما چیز دیگه ای بخواد یا توی طرح psd که طراح یا گرافیست تیم به من میده کلا چیز دیگه ای ازم خواسته بشه در غیر این صورت اگه دست خودم باشه همه منوهای سایت رو به این صورت میسازم  خب بریم سراغ پیاده سازی canvas منو.

قدم اول در پیاده سازی canvas منو نوشتن کد های html

برای شروع یک صفحه html بسازید و کد هایی رو که در پایین براتون گذاشتم توی اون قرار بدید( پیش فرض من توی همه مقالات این هستش که شما در حد ابتدایی html و Css رو بلد هستین و من برای پرهیز از گفتن مطالب تکراری ، خیلی از کد ها رو براتون توضیح نمیدم ولی قسمت های اصلی طرح رو حتما براتون توضیح میدم که به هیچ عنوان دچار سردرگمی نشید. خب به ادامه آموزشمون بپردازیم کد های زیر رو توی صفحه ی html کپی کنید.

 

همون طور که ملاحظه می کنید ما تمامی عناصر منو رو توی یه تگ div با کلاس menu-letf قرار دادیم که در داخل اون یک تگ برای قرار دادن عنوان منو و همچنین یک تگ ul برای قرار دادن عناصر منو وجو داره ، توی کد های بالا چندتا نکته هست که باید بهش توجه کنید من برای ایجاد ایکون سه خطی که بخوایم با اون منو رو نمایان یا مخفی کنیم از عکس یا فونت ایکون استفاه نکردم و اون رو صرفا با Css ایجاد کردم که در پایین نحوه ایجاد اون رو براتون توضیح میدم فقط تگ اخری میمونه که با کلاس page-overly برای ایجاد لایه هاوری هستش که بعد از باز شدن منو روی بقیه عناصر میفته

قدم دوم در ایجاد canvas منو یا همون منوی کشویی نوشتن کد های Css

حالا که کد های html رو نوشتیم و کلاس های تگ ها رو تعیین کردیم نوبت به این میرسه که برای این کلاس ها کد Css بنویسم من از قبل کد ها رو براتون نوشتم و اون رو بهتون میدم تا توی صفحه خودتون بزارین البته هر جایی رو که متوجه نشدید توی بخش نظرات مطرح کنید تا براتون توضیح بدم خب بدون معطلی کد های زیر رو کپی می کنیم و توی صفحه خودمون قرارمیدیم.

دوستان عزیز توجه داشته باشید که من همه کد های رو توی قسمت پایین نیاورم و فقط کد بخش های خاص رو براتون قرار دادم برای دانلود همه ی کد های html ، css و جی کوئری میتونید به بخش پایین صفحه مراجعه کنید و توی ادیتور codepen همه کد ها رو دانلود و یا به صورت آنلاین همون جا تست کنید

 

 

اگه بخوام کد های بالا رو توضیح بدم اولین نکته دادن استایل به منوی menu-left یک عرض رو براش تعریف میکنیم که ما در این قسمت اون رو برابر با ۲۵۰px قرار دادیم بعد position منو باید برابر با absolute باشه که منو شناور بشه تا بتونیم اون رو به اندازه عرضش یعنی ۲۵۰px- به سمت چپ بفرستیم تا از دید کاربر مخفی بشه برای اینکه منو با یک انیمیشن باز و بسته بشه باید یه transition براش قرار بدیم که توی این مثال ما مقدار شو برابر با یک ثانیه قرار میدیم.

نکته بعدی که باید بهش بپردازیم ایجاد یک کلاس active برای زمانی هستش که روی دکمه باز شدن منو کلیک کنیم تنها مقداری که برای این کلاس قرار دادیم اینه که left رو ۰ تعیین کردیم که باعث میشه وقتی روی دکمه کلیک شد مقدار left قبلی که مساوی ۲۵۰px – بود تغییر کنه و برابر با ۰ بشه

چگونه بدون فونت ایکون یا عکس دکمه سه خطی منو رو فقط و فقط با Css ایجاد کنم ؟

در مورد استایل های دکمه اگه بخوام توضیح بدم من از یه تکنیک توی css استفاده کردم که خیلی آسونه اما در عین حال کاربردیه شما بعدا میتونید در بقیه قسمت های صفحه تون از اون استفاده کنید من یک تگ button ایجاد کردم و داخلش هم یک تگ span قرار دادم که عرض این تگ رو برای مثال برابر با ۴۰px قرار دادم و ارتفاع رو هم ۵ یا ۴ پیکس در نظر گرفتم فقط دقت کنید که ما در قسمت بالا چون به تگ parent تگspanبا عرض مشخص دادم برای همین عرض تگ span رو برابر با %۱۰۰ گذاشتم بعد یه بک گراند براش انتخاب میکنیم تا دیده بشه خب حالا از اون سه خط یه خط شو ایجاد شد برای ایجاد دوتا خط دیگه از after و before استفاده میکنم یعنی عرض و ارتفاع و رنگ after و before این تگ رو هم برابر با همون عرض و ارتفاع و رنگ تگ span میزارم فقط نکته ای که داره اینکه top یکی رو ۱۰px میزارم و دیگری رو مخالف اون یعنی ۱۰px – میزارم و به همین سادگی کارمون تو این بخش تموم شد.

 

خوب پس چطوری دکمه بستن منو یا همون دکمه ضربدر منو رو ایجاد کنم ؟

اما سوالی که پیش میاد اینکه چطوری اینا رو تبدیل به دکمه بستن یا همون دکمه ضربدر کنم خب اینم کاری نداره فقط کافیه که هنگامی که منو باز میشه یک کلاس active-btn به تگ span اضافه کنیم و after و before کلاس active-btn رو با استفاده از transform و خاصیت rotate بچرخونیم یعنی یکی رو  rotate(45deg) بدیم و دگیری رو rotate(135deg) بدیم به همین آسونی با اینکار در هنگام باز شدن خط وسطی مخفی میشه و دوتا خط دیگه هم میچرخن و دکمه ضربدر رو برامون ایجاد میکنن

 

قدم سوم و یا مهم ترین بخش در ایجاد یک منوی کشویی ، نوشتن کد های jquery منو

بدون معطلی بریم سراغ کد های jquery  ، قبل همه باید متد $(document).ready رو بنویسم این متد در هنگام لود صفحه چک میکنه که لود صفحه تمام شده باشه و بعد کد های رو که داخلش هست رو صدا میزنه یا اجرا میکنه اگه از این متد هم استفاده نکنیم به احتمال زیاد درهنگام اجرا با خطا مواجه بشم یا اون خروجی رو که انتظار شو داریم درست نمایش داده نشه چون امکان داره بعضی عناصر صفحه هنوز لود نشده باشن برای همین از طریق این متد منتظر میشیم که کلا صفحه لودش تموم بشه بعد کد های داخل این متد رو لود میکنیم

بعد از نوشتن کد $(document).ready حالا میتونیم داخل تابع اون کد های منوی خودمن رو بنویسیم ما اول درشروع ابتدا میایم و page-overly رو با تابع $ فراخونی مکنیم و سپس یه با تابع toggleClass کلاس togle-overly رو بهش اضافه میکنم اگه بخوام کار toggleClass  رو براتون توضیج بدم اینکه متد toggleClass  میاد و اون تگ رو که با متد $ گرفتیم بررسی میکنه اگه کلاسی رو که بهش دادیم وجود داشت اون رو حذف میکنه و اگرم وجود نداشت اون کلاس رو به اون تگ html اضافه میکنه به همین سادگی

اگه نحوه کار متد toggleClass رو به خوبی درک کرده باشین دیگه کدای بعد نیازی به توضیح نداره چون برای اونا هم دقیقا از همین متد استفاده کردیم فقط برای المان menu-left یه delay دو ثانیه ای در نظر گفتیم که باعث میشه منو با یه تاخیر یا یه انیمیشن باز بشه دیگه بقیه کد ها نیازی به توضیح نداره

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

برای دیدن نمونه آنلاین کد های بالا و همچنین خروجی کار میتونید اون رو در ادیتور codepen تست کنید

See the Pen
Walkers – How to
create menu – (@mohammadYazdanpanah)
on CodePen.

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

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

1 + 16 =