طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت Sliding Menu با jQuery


ساخت Sliding Menu با jQuery

معمولا, نوار منو کشویی یا باز شونده از کمی از فضای صفحه وب را می گیرید. با استفاده از منوهای اسلایدی می توانید فضای بیشتری برای نمایش محتوای اصلی داشته باشید.

در آموزش jQuery قبلی, نحوه ساخت منوی جمع شونده با افکت اسلاید را دیدیم.

Sliding Menu ها معمولا در اپلیکیشن های اندرویدی استفاده می شود و در بیشتر برنامه هایی مثل تلگرام و غیره این قابلیت با swipe کردن در دسترس است و در صفحات وب ریسپانسیو هم از این مورد بیشتر در نسخه موبایلی و یا همان صفحه نمایش های کوچک برای بهتر کردن تجربه کاربری (UX) استفاده می شود.

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

در این مثال از ساخت Sliding Menu با jQuery , منوی اسلایدی با اسکرول صفحه ثابت می ماند.

ساخت Sliding Menu با jQuery

کد HTML برای Sliding Menu

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

کد ساخت Sliding Menu با jQuery

اجرای افکت های اسلاید با تغییر پوزیشن absolute المان های منوی اسلایدی قابل انجام است به اینصورت که مقدار left آن را با استفاده از animate برای حالت اسلاید تغییر می دهیم تا در صفحه ظاهر شود.

حتما بخوانید  ساخت دسته بندی با PHP (+n زیرشاخه)

جمع بندی

همانطور که دیدید ساخت Sliding Menu با jQuery بسیار آسان است و در صفحات وب ریسپانسیو و صفحه اسکرین کوچک مثل موبایل این مورد بسیار کاربردی است و به کاربر حس استفاده از یک اپلیکیشن موبایلی را در مروگر وب می دهد .

در وبسایت هایی مثل شاتل از پلاگین mmenu استفاده شده که آپشن های بیشتری را در اختیار شما قرار می دهد و تمام سعی ما این بود که در این آموزش بدون استفاده از پلاگین قابلیت مشابه را پیاده سازی کنیم.

امیدوارم از آموزش ساخت Sliding Menu با jQuery نهایت استفاده را برده باشید .

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

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

موفق و پیروز باشید.

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه