ساخت اسلایدر منو در jQuery

  • آپدیت شده در تاریخ

ساخت اسلایدر منو در jQuery

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

بنابراین قصد داریم در این آموزش قسمتی همانند اسلایدر منویی که در صفحه اصلی سایت دیجی کالا برای نمایش پیشنهادات شگفت انگیز استفاده شده است , را بسازیم.

ساخت اسلایدر منو در jQuery

در این مثال از اسلایدر , ما از تابع اسلاید jQuery UI برای انتقال اسکرین شات ها بصورت افقی استفاده می کنیم.

ساخت اسلایدر منو در jQuery

کد HTML اسلایدر منو

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

و استایل ها بصورت زیر است :

این اسکریپت با رفتن ماوس روی آیتم های منوی سمت چپ فراخوانی می شود. و اشاره گر منو را همراه با افکت اسلاید جی کوئری ,حرکت می دهد.

کد jQuery اسلایدر منو

اسکریپت جی کوئری زیر با اجرای رویداد mouse-over بر روی هر کدام از آیتم های منو سمت چپ  فراخوانی می شود. و علامت اشاره گر منو را بصورت افقی به همراه اجرای افکت اسلاید jQuery حرکت می دهد

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

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

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

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

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱)

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

  1. Interactiveo ۲۵ اردیبهشت ۱۳۹۷

    Thank you for your blog post.Really thank you! Awesome.

    پاسخ
دوره های آموزشی