ساخت مگامنو در jQuery


مگامنو (Mega Menu) برای ساده سازی قسمت ناوبری (navigation) کاربر با پوشش حداکثری از آیتم های لیست در یک منو آبشاری است. با ساخت مگامنو دیگر نیازی به ایجاد منوهای چند سطحی نیست .

استفاده از ساخت مگامنو در jQuery برای ایجاد مگامنو که در بیشتر سایت های فروشگاهی مانند دیجی کالا (DigiKala) که دسته بندی متنوع کالای زیادی دارند, میتواند بسیار کاربردی و مفید باشد.

ساخت مگامنو در jQuery

کد HTML لیست منوها

کد HTML زیر برای نمایش لیستی از لینک ها در مگامنوی آبشاری (dropdown) استفاده شده است . البته نیاز نیست که کد HTML شما هم به این اندازه حجیم باشد چراکه لیست منو ها را باید از دیتابیس فراخوانی کنید .

فقط دقت کنید که مقدار id آنها مطابق چیزی که در کد HTML زیر آمده است, باشد.

ساخت مگامنو در jQuery

اسکریپت زیر برای نمایش مگامنوی آبشاری (dropdown) استفاده شده است. از کد زیر برای تنظیم عرض (width) منو ها بر اساس تعداد لینک های قابل نمایش بهره بردیم.

حتما بخوانید  ساخت اسلایدر عکس با jQuery

کد CSS مگامنو (Mega Menu)

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

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

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

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

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

دانلــود بـاکـــس

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

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

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

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

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



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

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

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

بخش کاربران

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

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

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