منو واکنشگرا با  CSS

امروز می خواهیم شما را با برخی از کدهای مربوط به منو واکنشگرا با  CSS آشنا کنیم. طراحی یک لایه‌بندی واکنشگرا لزوما کار سختی نیست. مخصوصا برای زمانی که شما در ابتدای کار طرح کلی را ساخته‌اید و می‌دانید که قرار است چه چیزی را ایجاد کنید، این موضوع بسیار ساده‌تر می‌شود. اما در پروسه ساخت وبسایت واکنشگرا قسمت‌هایی نیز وجود دارد که ساخت و طراحی آن کمی دشوار است، یکی از این بخش‌ها در وبسایت، قسمت منوهای آن است. ایجاد کردن و ساختن آن به صورت مناسب و درست کار چالش برانگیزی است اما خوشبختانه با وجود آموزش‌های بسیار این کار ساده و راحت‌تر است.

در کنار این آموزش‌ها، من به شخصه از جمله افرادی هستم که علاقه بسیار زیادی به قطعات کدهای رایگان دارم. با استفاده از این قطعات کد می‌شود با سرعت بالاتری طراحی را انجام داد، همچنین یکی از نکات مهم در رابطه با این قطعات این است که قابلیت شخصی‌سازی بالایی دارند، به همین دلیل در این مطلب سعی دارم تا مجموعه‌ای از قطعه کدهای منحصر به فرد برای ساخت منو را برای شما قرار دهم.

نکته: تمام این موارد به صورت واکنشگرا هستند و قابلیت ویرایش بالایی را دارند به همین دلیل می‌شود از آن‌ها در هرگونه وبسایتی استفاده کنید.

Responsive Fullpage Demo

سخن‌های بسیار زیادی وجود دارد که می‌شود در رابطه با این طرح از Johnny Mango گفت. این قطعه کد برای ساختار اولیه یک وبسایت بسیار مناسب است و می‌شود به سادگی از آن استفاده کرد.

اگر با این منو کار کنید مطمئنا متوجه پیاده‌سازی رویدادهای ماوس‌ی که برای آن ایجاد شده خواهید شد، تمام این موارد منحصر به فرد هستند و همگی می‌توانند امتیاز‌های خوبی برای رابط‌ و تجربه کاربری باشند.

برای امتحان میزان واکنشگرایی این آیتم، می‌توانید اندازه مرورگر را تغییر دهید تا بهتر متوجه شیوه چیدمان المان‌ها در صفحه شوید. مطمئنا در نهایت از چنین موردی شگفت زده خواهید شد.

Dropdown Navbar

اگر به تعداد زیادی از زیرمنوها نیاز دارید مطمئنا این نوار منو برای شما می‌تواند به بهترین نحو کار کند. این مورد یکی از بهترین جایگزین‌ها برای منوهای معمولی است که می‌شود از طریق آن‌ها تنها لینک‌های وبسایت را نشان داد. در این مورد می‌توانید یک لیست کشویی بسیار ساده و در عین حال مفید را مشاهده کنید که به بهترین شکل ممکن در زیر همدیگر چیده شده است.

لینک‌های زیرین از طریق رویداد کلیک نمایان می‌شوند که این مورد توسط jQuery پیاده‌سازی شده است. می‌توانید قسمت جی‌کوئری را از کدهای‌تان پاک کنید و با استفاده از کلاس hover در CSS کارتان را انجام دهید.

میزان انعطاف‌پذیری این طرح برای کار کردن مطمئنا شما را شگفت زده می‌کند.

Single-Page Layout

این طرح برای وبسایت‌های تک صفحه‌ای بسیار مناسب است. از آن‌جایی که چهارچوب اصلی وبسایت در این طرح ساخته شده، پس تنها نیاز است که محتوای جدید را به آن‌ اضافه کنید. ‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌این طراحی بسیار ساده و در عین حال زیباست.

اگر قصد ساخت وبسایت تک صفحه‌ای را دارید به نظر می‌رسد که این مورد در عمل یکی از بهترین موارد است. اسکرول لینک‌ها به سمت پایین بسیار به نرمی انجام می‌شود و شما را نیز منتظر نمی‌گذارد.

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

این مورد واقعا ساده‌ست و در کنار ویژگی‌های بسیاری که دارد، واکنشگرا بودن آن موضوع بسیار مهمی است.

Red Dropdown Menu

توسعه‌دهنده این کار Stéphanie Walter، واقعا کار جذابی در سطح اینترنت انجام داده است. این قطعه کد یکی از تنهاترین قطعات کدی است که شامل یک رنگ قرمز روشن است و واکنشگرایی بالایی دارد.

لینک‌های این منو از جذابیت خاصی برخوردار هستند و استایل بسیار زیبا و منحصر به فردی برای Hover آن در نظر گرفته شده است. از نکات مهمی که باید اشاره کرد این است که این طرح به خوبی واکنشگرا شده و در حالت موبایل به خوبی نمایش می‌یابد، می‌توانم بگویم که بهترین حالت موبایلی برای لینک‌های سطح دو بوده که تا به کنون مشاهده کرده‌ام.

اگر طرحی را می‌خواهید که همراه با کمی مواد اضافی و بامزه ارائه شده باشد، این گزینه واقعا خوبی‌ست.

Pure CSS۳ Design

این مورد یکی از منحصر به فرد‌ترین طرح‌های مرتبط به منو است که با استفاده از CSS ساخته شده است. این منو به صورت عمودی طراحی شده و ظاهری مانند المان جدول دارد. این قطعه کد توسط Ahmad Hjazy طراحی شده و نمای بسیار زیبایی دارد.

افکت Hover آن دارای سرعت بسیاری است و به نظر می‌رسد که تا حدی جذاب است. طراحی واکنشگرای این مورد باعث شده که بسیار شگفت انگیز به نظر برسد.

به احتمال زیاد یکی از قسمت‌های بسیار شگفت انگیز این مورد آن باشد که این طرح به صورت کامل براساس CSS۳ طراحی و ساخته شده است.

Responsive Sticky Header

قبلا در رابطه با طراحی تک صفحه‌ای برای منوها صحبت کردیم و قطعه کدی را برای اینکار معرفی نمودیم، این سربرگ واکنشگرا نیز چنین حالتی را ارائه می‌دهد و تقریبا مشابه است.

تنها تفاوت این مورد با حالت قبلی در بخش اول این است که این منو بخش بزرگ‌تری از صفحه را اشغال می‌کند و این موضوع باعث می‌شود که مدیریت صفحه در حالت واکنشگرا کمی متفاوت‌تر باشد.

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

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

Responsive & Touch-Friendly

هر وبسایتی باید به صورت پیشفرض قابلیت لمس کردن را داشته باشد، این موضوعی است که باعث می‌شود این منو واکنشگرا بسیار سازگار و محبوب باشد.

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

هرکدام از لینک‌ها صفحه‌ای جدید را باز می‌کنند اما برخی از این موارد به گونه‌ای طراحی شده‌اند که با لمس کردن آن‌ها منوها به صورت کشویی نیز باز شود. این ویژگی معمولا در طراحی منوهای ناوبری حذف می‌شود و به همین دلیل است که معمولا طراحی منوهای کشویی کار دشوار و سختی است.

Simple Nav Links

وقتی به طراحی منوهای واکنشگرا با میزان سادگی بسیار بالا فکر می‌کنم،‌ چیزی مانند زیر به نظرم می‌آید.

هرکدام از لینک‌ها براساس قسمت المان خود ظاهر می‌شوند، این موضوع در هر صفحه نمایشی درست به همین شکل است. در این منو خبری از منوهای همبرگری یا روشی برای مخفی شدن وجود ندارد، همه چیز با کوچک و بزرگ شدن مرورگر همان حالت را دارد با این تفاوت که زیر همدیگر قرار می‌گیرند و خطوط آن‌ها جدا می‌شود.

یکی از دشوارترین قسمت‌های آن ساخت جلوه کشویی برای دستگاه‌های موبایلی است. بسیاری از لینک‌ها، دارای زیرمنوها هستند و مسئله مهم اینجاست که آن‌ها روی صفحات نمایش کوچکتر نیز کار می‌کنند.

این منو برای وبسایت‌هایی با تعداد کمی از زیرمنوها به خوبی کار می‌کند اما در کنار آن بسیار خوب است که نگاهی به آن در حالت موبایلی نیز بیاندازید تا تجربه آن را به خوبی مشاهده کنید.

PS Curtain Menu

توسعه‌دهنده Louis Chenais این منو واکنشگرا را براساس وبسایت PlayStation طراحی کرده است. این منو یک حالت پرده‌ای دارد، به صورت که وقتی فعال می‌شود کل صفحه نمایش را می‌گیرد و پشت خود را پنهان می‌نماید. این مورد برای اپلیکیشن‌های موبایل و همچنین وبسایت هایی با طراحی واکنشگرا بسیار زیبا و جذاب است.

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

بهتر از هرچیز دیگر این است که به شما این اطمینان را می‌دهد که به خوبی روی وبسایت‌هایی با هدف فروش محصول و ارائه خدمات کار می‌کند.

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

Responsive Mega-Menu

شما می‌توانید دنیای اینترنت را جستجو کنید و صدها مگامنو ناوبری را پیدا نمایید. این مورد معمولا بیشتر روی وبلاگ‌های بزرگ و یا وبسایت‌های خبری استفاده می‌شود، اما در حال حاضر در وبسایت‌های فروشگاهی و حتی وبسایت های آژانس نیز استفاده می‌شود.

سخت‌ترین قسمت برای یک مگامنو این است که آن را به صورت کامل واکنشگرا ساخت. به لطف این قطعه کد، ساخت منو واکنشگرا به صورت مگامنو بسیار ساده‌تر شده است.

وقتی منو به صورت واکنشگرا نمایش داده می‌شود، تمام منوهای زیرین نیز نمایش داده می‌شود که البته ممکن است این موضوع کمی آزار دهنده باشد اما نکته خوب اینجاست که به سادگی می‌توانید آن‌ها را نیز مدیریت کنید.

به نظر من بهترین راه‌حل موجود برای ساخت یک مگامنو واکنشگرا استفاده از این حالت است که به خوبی در موبایل و دسکتاپ نمایش داده می‌شود.

۰ پاسخ به "منو واکنشگرا با  CSS"

    ارسال یک پیغام

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

    ارتباط با کافه بلوط

    آدرس : خراسان جنوبی ، بیرجند ، پارک علم وفناوری خراسان جنوبی ، اتاق 101
    آدرس ایمیل: dp.cafebaloot@gamil.com

    logo-samandehi دروازه پرداخت معتبر

    All Right Reserved For Cafe Baloot 2018

    X