jQuery

منوی پایین افتادنی جی کوئری با امکان تغیر ظاهر و سفارشی سازی به سادگی

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

نویسنده میهمان : حامد میرزایی : در این ارسال، نحوه ساخت یک منوی پائین افتادنی توسط jQuery را آموزش خواهم داد. از ویژگی های این منو سادگی منحصر بفرد آن به همراه افکت های بصری جی کوئری و قابلیت اعمال استایل های گوناگون جهت سفارشی سازی برای همه وبسایتهاست. شما میتوانید برای آیتم های منو و زیر منوها پس زمینه مورد نظر خود را تعیین کنید و یا در خاصیت hover آنها، افکت های مورد علاقه خود را قرار دهید. برای سفارشی سازی این منو کافیست تغییرات مورد نظر خود را بر روی استایل تگ های a در فایل CSS اعمال کنید.

۱٫کد HTML

از آنجا که روش استاندارد برای ساخت منوهای افقی در صفحات وب استفاده از لیست است، در این منو نیز از تگ <ul> برای ایجاد منو استفاده میکنیم. چنانچه آیتم های منو دارای زیر منو باشد، کافیست از یک لیست دیگر در داخل تگ <li> مربوط به آن منو استفاده کنیم. در کد HTML زیر، Parent نام منو و Item نام زیر منوها است. بنابراین شما میتوانید عناوین اصلی منو خود را در Level اول و زیر منوها را در Level دوم بنویسید. پس از اینکه آیتم های منو خود را در ساختار زیر ایجاد کردید، آن را در بخش کدهای HTML خود قرار دهید.

۲٫کد CSS

اکنون نوبت به کدهای CSS می رسد. ساختار CSS این منو بسیار ساده است. همانطور که در بخش HTML عنوان شد، ما دو لیست ساخته شده با داریم. یکی برای آیتم های اصلی منو و دیگری برای زیرمنوها. برای اینکه آیتم های اصلی در یک ردیف خطی به صورت افقی نشان داده شوند، دستور float:left را به تگ li اعمال میکنیم. زیرمنوها زمانی نشان داده می شوند که نشانگر ماوس روی آنها قرار گرفته و رویداد مربوطه ( mouseover ) صورت پذیرد. تمام اعمال مربوط به سفارشی سازی منو، در کدهای CSS باید انجام شود. برای تغییر در لینک های منو، باید استایل هایی را که بر روی تگ های a اعمال میشوند را در کدهای CSS تغییر دهید.

۳٫ کد javascript

تمام کد مورد نیاز برای اجرای این منو، همین چند خط است که به لطف کتابخانه دوست داشتنی jQuery تا این حد کوتاه شده است. برای اجرای حرکت های انیمیشنی و پائین افتادن زیر منوها، در رویداد hover از توابع پایه انیمشن SlideUp و SlideDown استفاده میکنیم. اکنون کافیست کتابخانه جی کوئری را به همراه کدهای زیر در بخش صفحه مورد نظر اضافه کنیم :

دستور فراخوانی کتابخانه جی کوئری:

کد جی کوئری برای اجرای منو:

نکته: با تغییر عدد ۱۰۰ در کدهای بالا، سرعت باز و بسته شدن منو در واحد میلی ثانیه تغییر خواهد کرد.

11 Comments

  1. دوست عزیز لطف میکنید راهنمایی کنید چه جوری میشه در ستون سمت راست سایت داشت به جای افزونه ها .من می خوامد ستون سمت راستمرو این منوها قرار بدم البته توی وردپرس

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید