ساخت منو کشویی jQuery

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

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

با افزودن قابلیت Dropdown به منو ها , می توانیم محیط نمایش منو را با کنترل کردن لیست زیرمنو ها , زیباتر کنیم.

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

ساخت منو کشویی jQuery

ساخت HTML برای نمایش نوار منو

کد HTML زیر یک منو با چند زیر منو را ایجاد می کند.

افزودن استایل به منو کشویی jQuery

ما چند استایل برای کنترل موقعیت منوها اعمال می کنیم . همچنین آیتم های زیرمنو را با CSS مخفی می کنیم .

تابع جی کوئری برای نمایش منو آبشاری

ما از توابع مخفی کردن عناصر در جی کوئری استفاده کنیم

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی