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


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

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

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

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

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

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

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

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

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

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

حتما بخوانید  ساخت منوی جمع شونده با jQuery

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

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

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

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

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

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

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

یک پاسخ به “ساخت اسلایدر منو در jQuery”

  1. Interactiveo گفت:

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

    0

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

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

جدیدترین آموزش های آنلاین



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

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

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

بخش کاربران

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

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

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