در این نوشته می خوام ایجاد یک منوبار مثل منوبار مانایید رو آموزش بدم. برای یکی از پروژه های طراحی سایت میخواستم منویی طراحی کنم که وقتی کاربر موس رو روی لینکها میبره( hover کردن) یک خط متحرک زیر منو ها نمایش داده بشه. چالش پروژه این بود که تعداد آیتمهای داخل منو مشخص نبود و ممکن بود بعد از تحویل پروژه تغییر کنه پس استفاده از CSS به تنهایی چاره ساز نبود. اول از همه به سراغ افزونه lavalamp جی کوئری رفتم. بعد با خودم گفتم چرا باید برای یک قسمت کوچیک از پروژه از جی کوئری استفاده کنم؟ پس دست به کار شدم
مثل همیشه با کد کذاری html شروع میکنیم. این بخش چیز خاصی نداره و فقط شامل کدهای استاندار html برای اینجاد یک منو ناوبری است.
چالش بعدی همینجاست. برای نشان دادن خط زیر منو باید از سودو کد before:: استفاده می کردم اما متاسفانه توسط جاوا اسکریپت نمیشه مستقیما به ویژگی ها سودوکدهای Css دسترسی داشت.
راه حل: تعریف دو متغیر در Css برای نگه داری عرض (width) و محل (position) خط زیر منو متناسب با لینک هاور شده است.
فقط سه گام دیگه مونده تا منوی ما کامل بشه؛ اول: باید چک کنیم کدوم آیتم منو در حالت انتخاب (Hover) قرار گرفته. دوم: موقعیت افقی اون آیتم و عرضش رو مشخص کنیم و سوم: مقادیر مورد نیاز را برای نگه دارنده لیست منوها (menu__list.) تعیین کنیم.
اول از همه باید منوی را در یک متغییر نگه داریم؛
بعد از اون باید یک رویداد (Event) mouseover برای اون تعریف کنیم
داخل اون رویداد (Event) تعریف میکنیم که اگر آیتمی که موس روی اون رفته یکی از آیتمهای منو باشه عرض و موقعیت اون رو بگیر و در متغیرهای CSS که قبلا تعریف کردیم قرار بده:
در آخر هم رویداد mouseleave ر و برای منو تعریف میکنیم که وقتی اجرا شد عرض خط زیر منو برابر با صفر بشه و در اصل دیگه نشون داده نشه
این یک مقاله ار وب سایت مانایید است سورس کد را می تواندی از اینجا دریافت کنید
