صفحه اصلی / css / اموزش ساخت منو کشویی (off-canvas) با jquery

اموزش ساخت منو کشویی (off-canvas) با jquery

اموزش ساخت منو کشویی (off-canvas) با jquery

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی و توسعه سایت قصد اموزش اموزش ساخت منو کشویی (off-canvas) با jquery داریم. در این مطلب شما یادمی گیرید که چگونه به راحتی و با چند تکه jquery یک منو کشویی طراحی کنید پس باما تا انتهای این مطلب همراه باشید.

شروع ساخت منو کشویی (off-canvas) با jquery:

برای شروع کار باید کتابخانه جی کوییری (jquery) را دانلود و در صفحه وب خود استفاده کنید.

برای اضافه کردن کتابخانه jquery به صفحه خود از کد زیر استفاده کنید.

حال که کتابخانه به صفحه وب خود متصل کردید اماده هستید تا منوی کشویی خود را طراحی کنید.

 

ساخت منو کشویی (off-canvas) :

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

 

کد های جی کوییری (jquery) مربوط به منو کشویی :

در قسمت کد های جی کوییری کافیست به صورت animated (همراه با انیمیشن) عرض منو کشویی را زیاد کنیم همچنین برای اینکه منو کشویی محتوای صفحه از بین نبرد به اندازه ای عرض div مورد نظر به صفحه خود margin می دهیم.

 

برای اجرای صحیح کد های بالا کافیست به تگ body یا تگی که محتوای صفحه شما را دربر میگیرد ای دی  برابر content بدهید به علاوه دو دکمه به همراه id برابر button و hide برای نمایش و مخفی کردن منو کشویی

همچنین به div که به عنوان منو کشویی طراحی کردیم باید ای دی nav بدهید.

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

پیشنمایش کلی را نیز می توانید در زیر ببنید.

 

See the Pen GMvKRx by s,mohamamd hosein abedy (@shomasoft) on CodePen.

پاسخ دهید

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