در بخش اول از این قطعه کدها ما ۵ مورد را بررسی کردیم، در بخش دوم نیز قصد داریم پنج مورد آخر را بررسی و معرفی نماییم.
6. Responsive Sticky Header
قبلا در رابطه با طراحی تک صفحه‌ای برای منوها صحبت کردیم و قطعه کدی را برای اینکار معرفی نمودیم، این سربرگ واکنشگرا نیز چنین حالتی را ارائه می‌دهد و تقریبا مشابه است.
تنها تفاوت این مورد با حالت قبلی در بخش اول این است که این منو بخش بزرگ‌تری از صفحه را اشغال می‌کند و این موضوع باعث می‌شود که مدیریت صفحه در حالت واکنشگرا کمی متفاوت‌تر باشد.
وقتی که اندازه پنجره مرورگر را تغییر میدهید متوجه خواهید شد که در طراحی این منو از روش منو همبرگری استفاده شده و همچنین یک انیمیشن کوچک نیز در آن تعبیه شده است. این استایل زیبایی‌ست اما ممکن است برای هرکسی مناسب نباشد.
در هر حال این مورد برای فردی که قصد ساختن یک منو ناوبری در وبسایت های تک صفحه‌ای یا برگه‌های فرود داشته باشد بسیار مناسب و زیباست.
7. Responsive & Touch-Friendly
هر وبسایتی باید به صورت پیشفرض قابلیت لمس کردن را داشته باشد، این موضوعی است که باعث می‌شود این منو واکنشگرا بسیار سازگار و محبوب باشد.
از آن‌جایی که به صورت کامل واکنشگرا است به خوبی روی تمام صفحات نمایش کار می‌کند و کاربران می‌توانند در مرورگر موبایل به خوبی با آن تعامل داشته باشند.
هرکدام از لینک‌ها صفحه‌ای جدید را باز می‌کنند اما برخی از این موارد به گونه‌ای طراحی شده‌اند که با لمس کردن آن‌ها منوها به صورت کشویی نیز باز شود. این ویژگی معمولا در طراحی منوهای ناوبری حذف می‌شود و به همین دلیل است که معمولا طراحی منوهای کشویی کار دشوار و سختی است.
8. Simple Nav Links
وقتی به طراحی منوهای واکنشگرا با میزان سادگی بسیار بالا فکر می‌کنم، چیزی مانند زیر به نظرم می‌آید.
هرکدام از لینک‌ها براساس قسمت المان خود ظاهر می‌شوند، این موضوع در هر صفحه نمایشی درست به همین شکل است. در این منو خبری از منوهای همبرگری یا روشی برای مخفی شدن وجود ندارد، همه چیز با کوچک و بزرگ شدن مرورگر همان حالت را دارد با این تفاوت که زیر همدیگر قرار می‌گیرند و خطوط آن‌ها جدا می‌شود.
یکی از دشوارترین قسمت‌های آن ساخت جلوه کشویی برای دستگاه‌های موبایلی است. بسیاری از لینک‌ها، دارای زیرمنوها هستند و مسئله مهم اینجاست که آن‌ها روی صفحات نمایش کوچکتر نیز کار می‌کنند.
این منو برای وبسایت‌هایی با تعداد کمی از زیرمنوها به خوبی کار می‌کند اما در کنار آن بسیار خوب است که نگاهی به آن در حالت موبایلی نیز بیاندازید تا تجربه آن را به خوبی مشاهده کنید.
9. PS Curtain Menu
توسعه‌دهنده Louis Chenais این منو واکنشگرا را براساس وبسایت PlayStation طراحی کرده است. این منو یک حالت پرده‌ای دارد، به صورت که وقتی فعال می‌شود کل صفحه نمایش را می‌گیرد و پشت خود را پنهان می‌نماید. این مورد برای اپلیکیشن‌های موبایل و همچنین وبسایت هایی با طراحی واکنشگرا بسیار زیبا و جذاب است.
یک چیز آن را که خیلی دوست دارم استایل انیمیشنی آن است. این انیمیشن برای نمایش لینک‌ها به اندازه کافی سریع است و کاربر را خسته نمی‌کند.
بهتر از هرچیز دیگر این است که به شما این اطمینان را می‌دهد که به خوبی روی وبسایت‌هایی با هدف فروش محصول و ارائه خدمات کار می‌کند.
روی آیکون جستجو نیز کلیک کنید تا افکت آن را نیز مشاهده کنید. هر دوی این موارد بدون مشکل کار می‌کنند. می‌توانم بگویم که بهترین منو ناوبری برای وبسایت‌هایی است که در جهت وبسایت شرکتی ساخته می‌شود.
10. Responsive Mega-Menu
شما می‌توانید دنیای اینترنت را جستجو کنید و صدها مگامنو ناوبری را پیدا نمایید. این مورد معمولا بیشتر روی وبلاگ‌های بزرگ و یا وبسایت‌های خبری استفاده می‌شود، اما در حال حاضر در وبسایت‌های فروشگاهی و حتی وبسایت های آژانس نیز استفاده می‌شود.
سخت‌ترین قسمت برای یک مگامنو این است که آن را به صورت کامل واکنشگرا ساخت. به لطف این قطعه کد، ساخت منو واکنشگرا به صورت مگامنو بسیار ساده‌تر شده است.
وقتی منو به صورت واکنشگرا نمایش داده می‌شود، تمام منوهای زیرین نیز نمایش داده می‌شود که البته ممکن است این موضوع کمی آزار دهنده باشد اما نکته خوب اینجاست که به سادگی می‌توانید آن‌ها را نیز مدیریت کنید.
به نظر من بهترین راه‌حل موجود برای ساخت یک مگامنو واکنشگرا استفاده از این حالت است که به خوبی در موبایل و دسکتاپ نمایش داده می‌شود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید