طراحی منوی ریسپانسیو با CSS

طراحی منوی responsive با CSS

در دنیای امروز که دسترسی به وب سایت ها از طریق دستگاه های مختلف مانند موبایل، تبلت و لپ تاپ انجام می شود، طراحی واکنش گرا (Responsive) به یک ضرورت تبدیل شده است. یکی از مهم ترین اجزای رابط کاربری هر وب سایت، منوی ناوبری (Navigation bar) آن است. طراحی منویی که در صفحه نمایش های کوچک نیز عملکرد مناسبی داشته باشد، از اهمیت بالایی برخوردار است. در این مقاله، با استفاده از HTMLوCSS، بدون نیاز به جاوااسکریپت، نحوه ی پیاده سازی یک منوی واکنش گرای ساده، زیبا و کارآمد را بررسی خواهیم کرد.

واژه responsive به معنای واکنش گرا است و اصطلاح responsive design در دنیای طراحی سایت به معنای طراحی یک سایت به گونه ای است که نمایشی مناسب در تمامی مرورگر ها و دستگاه های احتمالی شامل موبایل، تبلت و کامپیوتر رومیزی داشته باشد.

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

چرا طراحی Responsive؟

• سئوی مناسب
• بهترین شیوه طراحی برای نمایش وب ‎سایت در تلفن‎های همراه
• طراحی قالب بر اساس سایز صفحه به جای دستگاه نمایش دهنده
• اطمینان از یک url واحد داشتن
• کاربرپسند بودن

حال اگر بخواهیم یک نوار responsive بسازیم ابتدا باید با اصطلاح زیر آشنا شویم:

viewport: همان صفحه نمایشی است که ما می بینیم و امروزه با استفاده از تگ <meta> در html و CSS می توان آن را کنترل کرد:

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

بخش width=device-width یعنی اینکه عرض صفحه مورد نظر با عرض نمایشگر کاربر به یک اندازه باشد (یعنی با توجه به سایز صفحه نمایشگر، سایز صفحه وب نیز تغییر کند). بخش initial-scale=1.0 نیز برای تعیین بزرگ نمایی اولیه است، برای مثال اگر این مقدار را برابر با = 1.5 قرار دهید، بعد از بارگذاری صفحه به همان نسبت در صفحه زوم می کند.

مهم ترین قوانین در طراحی منو

1. در طراحی سایت نباید هیچ اسکرول افقی وجود داشته باشد در این صورت، سایت از responsive بودن خارج می شود.
2. کاربران موبایل یا تبلت نباید برای مشاهده جزییات محتوا، مجبور شوند صفحه را زوم کنند.
3. از المان هایی با عرض ثابت استفاده نکنید: برای مثال اگر شما از یک المان با عرض ثابت 500 پیکسل استفاده کنید و viewport برابر با صفحه نمایش یک موبایل با عرض 450 پیکسل باشد، منو دیگر واکنش گرا نخواهد بود.
4. به جای استفاده از واحدهای ثابت از واحدهای نسبی استفاده کنید: ساده ترین مثال در این رابطه همان مثال المان 500 پیکسلی بود که در مورد قبلی مطرح کردیم، شما در طراحی خودتان باید از واحد های نسبی همانند (%) استفاده کنید تا طرح تان در سایزهای مختلف به صورت نسبی تغییر کند، مخصوصا زمانی که با موقعیت دهی (positioning) عناصر سروکار دارید.

انواع منو واکنش گرا responsive

حال که با قوانین و موارد ابتدایی طراحی responsive آشنا شدیم میرسیم به انواع منو های مورد استفاده در سایت:

1. منوهای همبرگری (Hamburger Menu)

این منو یکی از رایج ترین و معروف ترین انواع منوهای responsive است که به شکل یک آیکون سه خط افقی (مثل همبرگر) نمایش داده می شود. این روش بیشتر در موبایل ها و تبلت ها رایج است.

2. منوهای کشویی (Dropdown Menu)

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

3. منوهای افقی (Horizontal Menu)

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

4. منوهای عمودی (Vertical Menu)

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

5. منوهای تمام صفحه (Full Screen Menu)

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

جدیدترین روندها در طراحی منوهای responsive

• منوهای تعاملی (Interactive Menus): این منوها از انیمیشن های پیچیده یا تغییرات پویا برای تعامل بیشتر با کاربر استفاده می کنند.
• منوهای مبتنی بر آیکن (Icon-Based Menus): این منوها به جای استفاده از متن، از آیکون ها برای نمایش گزینه ها استفاده می کنند که به افزایش سرعت و کاهش شلوغی کمک می کند.
• منوهای با طراحی مینیمالیستی: منوهایی که بیشتر بر اساس فضای خالی و سادگی طراحی شده اند، به ویژه در دستگاه های موبایل به خوبی کار می کنند.

مثال یک منو ریسپانسیو

هم اکنون که با کلیات منوی responsive آشنا شدید، یک مثال طرح می کنیم:

فرض کنید می خواهیم یک منوی همبرگری بسازیم که هم در کامپیوتر و هم در گوشی واکنش گرا باشد. برای این کار دو فایل ایجاد می کنیم. یک فایل HTML و یک فایل CSS.

فایل HTML :

 <!DOCTYPE html> 
 
<html> 
 
<head>
 
 <meta charset="UTF-8"> <meta name="viewport" 
 
content="width=device-width,
 
 initial-scale=1"> <title>My Hamburger Menu</title> <link rel="stylesheet" href="styles.css"> </head> <body> <input type="checkbox" id="ham-menu"> <label for="ham-menu" class="menu-icon">
 
 <span></span> <span></span> <span></span>
 
 </label> 
 
<nav class="menu">
 
 <a href="#">Home</a>
 
 <a href="#">Profile</a>
 
 </nav> </body> </html> 
 

توضیحات کد در بخش body:

منوی همبرگر ما دو حالت دارد. یا روی آن کلیک شده و فعال است و منو باز است و یا بسته و غیرفعال است. برای ایجاد کردن این بخش از check box استفاده می کنیم و یک id دلخواه برای آن انتخاب می کنیم. پس از آن در تگ label برای مرتبط کردن فرم به چک باکس استفاده می کنیم. حال برای شکل دهی فرم به صورت سه خط از تگ span استفاده می کنیم و بعد در فایل css تعریف می کنیم که شکل و شمایل خط ها چگونه باشد.

ساخت اولین قالب وبسایت شخصی با HTML و CSS

در نهایت در تگ nav مجموعه لینک ها و زیرمنو ها را می نویسیم.

فایل CSS:

 #ham-menu { display: none; } .menu-icon { display: block; width: 30px; margin: 20px;
 
 cursor: pointer; } .menu-icon span { display: block; height: 4px;
 
 margin: 6px 0; background-color: #333;
 
 transition: 0.3s; } .menu { position: absolute;
 
 top: 60px; left: 0;
 
 width: 100%;
 
 background-color: #333;
 
 display: none; flex-direction: column; } .menu a
 
 { color: white; text-decoration: none; padding: 15px; border-bottom: 1px solid #444; }
 
 #ham-menu:checked + .menu-icon + .menu { display: flex; } 
 

توضیحات کد CSS:

ابتدا چک باکسی که تعریف کردیم را پنهان می کنیم تا صفحه شلوغ نشود. سپس خود منوی همبرگری را طراحی می کنیم که در دو بخش صورت می گیرد: خود منو و خط های منو. آیکون همبرگر: menu-icon

• display: block; اطمینان از اینکه یک بلوک قابل کلیک هست.
• width: 30px; طول کل آیکون.
• margin: 20px; فاصله از اطراف (مثلاً بالا یا چپ).
• cursor: pointer; موقعی که موس روی آیکون حرکت می کند شکل موس به دست تغییر می کند (قابل کلیک).

خط های همبرگر: menu-icon span

display: block; هر خط به صورت بلوکی در یک خط جدا نشون داده می شود.

height: 4px; ضخامت هر خط.

margin: 6px 0; فاصله بین خط ها.

background-color: #333; رنگ تیره برای خط ها.

transition: 0.3s; در هنگام تغییر، نرم تر رفتار می کند و ظاهر حرفه ای تری دارد.

خود منو: menu

position: absolute; مکان منو رو نسبت به عنصر والدش (یا کل صفحه) کنترل می کند.

top: 60px; left: 0; محل دقیق شروع منو رو تعیین می کند.

width: 100%; منو به اندازه ی عرض کل صفحه پهن می شود.

background-color: #333; پس زمینه تیره برای منو.

display: none; منو در حالت عادی پنهان است. فقط وقتی روی آیکون کلیک بشود (و checkbox چک بشود)، منو نمایش داده می شود.

flex-direction: column; آیتم های منو (لینک ها) به صورت ستونی زیر هم قرار می گیرند.

لینک های داخل منو: menu a

color: white; رنگ متن لینک ها سفید می شود.

text-decoration: none; خط زیر لینک حذف می شود.

padding: 15px; فضای داخلی برای خوانایی بیشتر.

border-bottom: 1px solid #444; خط جداکننده بین گزینه های منو.

در نهایت در تیکه کد آخر تعیین می کنیم که وقتی چک باکس با id مورد نظر ما فعال شود، ابتدا به سراغ media-icon و سپسmedia می رود و به آن display: flex می دهد یعنی منو را به صورت ستونی نشان می دهد.

طراحی منوی واکنش گرا تنها با استفاده از HTML و CSS نشان می دهد که حتی بدون استفاده از زبان های اسکریپت نویسی نیز می توان رابط های کاربری حرفه ای و کاربرپسند ایجاد کرد. با بهره گیری از تکنیک هایی مانند استفاده از چک باکس ها و سلکتورهای پیشرفته ی CSS، می توان به سادگی منوهایی ساخت که روی انواع دستگاه ها به درستی نمایش داده می شوند. این رویکرد علاوه بر سادگی، موجب کاهش حجم کد و افزایش سرعت بارگذاری سایت نیز می شود. در نهایت، طراحی واکنش گرا به طراحان کمک می کند تا تجربه ی کاربری بهتری برای مخاطبان خود فراهم کنند.