منو همبرگری چیست

مطمئنا با منوی همبرگری آشنایی دارید، سه خط روی هم (دو خط اول و آخر نان و خط وسطی گوشت!) که برای نمایش من استفاده می شود. با کلیک یا لمس کردن این سه خط منو ناوبری اصلی ظاهر می شود.

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

همبرگر به عنوان منو ثانویه

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

مزایا و معایب منو همبرگری

منوی همبرگری بسیار عالی است، زیرا فضای زیادی را ذخیره می‌کند که باعث می‌شود یک طراحی ساده و تمیز داشته باشیم. از سوی دیگر، باعث می‌شود که کاربر برای حرکت بین بخش‌های مختلف برنامه بیشتر درگیر شود و تعامل با کاربر را افزایش می‌دهد. اگرچه یک منوی همبرگری می‌تواند یک طراحی بصری ساده را محیا کند، اما برنامه را به‌صورت ساختاری پیچیده می‌کند، زیرا اطلاعات را در پشت سه خط کوچکی قرار می‌دهد که هیچ اطلاعاتی را ارائه نمی‌دهند.
حین انجام هر پروژه، شما باید درک عمیقی از افرادی که برای آن‌ها طراحی می‌کنید(کاربرانتان) داشته باشید. آیا آن‌ها می‌فهمند که سه خط افقی به معنی منو است؟ آیا آن‌ها با منوی همبرگری ارتباط برقرار می‌کنند؟

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

ساخت یک منوی همبرگری مارپیچ با CSS

در این آموزش، نحوه انجام این کار را با CSS و بدون استفاده از کدهای جاوا اسکریپت توضیح داده شده است. ترفندهای موجود در CSS (و SCSS) به ما این امکان را می‌دهند تا بتوانیم انیمیشن‌هایی مانند یک GIF متحرک را در برنامه خود طراحی کنیم.

در ابتدا، ساختار HTML که استفاده می‌کنیم را در قسمت زیر مشاهده می‌کنید:

				
					<div class="container">
    <!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
    <input id="toggle" type="checkbox">

    <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->

    <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
    <label class="toggle-container" for="toggle">
        <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
        <span class="button button-toggle"></span>
    </label>

    <!-- The nav menu -->
    <nav class="nav">
        <a class="nav-item" href="">Dashboard</a>
        <a class="nav-item" href="">History</a>
        <a class="nav-item" href="">Statistics</a>
        <a class="nav-item" href="">Settings</a>
    </nav>
</div>

حالا اجازه دهید برخی از استایل‌های اولیه را نیز به آن اضافه کنیم:

				
					/* Basic styles */

* {
box-sizing: border-box;
}

html, body {
margin: 0;
}

body {
font-family: sans-serif;
background-color: #F6C390;
}

a {
text-decoration: none;
}

.container {
position: relative;
margin: 35px auto 0;
width: 300px;
height: 534px;
background-color: #533557;
overflow: hidden;
}

قبل از شروع به ساخت بقیه اجزای رابط کاربری خود، اجازه دهید عملکرد toggle را نیز به آن اضافه کنیم تا بتوانیم به راحتی از حالتی به حالت دیگر تغییر وضعیت دهیم.
HTML ای که ما نیاز داریم آماده است، فقط کافیست استایلی شبیه زیر را به آن اضافه کنیم

				
					// To hide the checkbox
#toggle {
display: none;
}

// Styles for the 'open' state, if the checkbox is checked
#toggle:checked {
// Any element you need to change the style if menu is open goes here, using the sibling selector (~) as follows

// Styles for the open navigation menu, for example
& ~ .nav {
}
}

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

				
					$transition-duration: 0.5s;

// Showing nav items as lines, making up the hamburger menu icon
.nav-item {
position: relative;
display: inline-block;
float: left;
clear: both;
color: transparent;
font-size: 14px;
letter-spacing: -6.2px;
height: 7px;
line-height: 7px;
text-transform: uppercase;
white-space: nowrap;
transform: scaleY(0.2);
transition: $transition-duration, opacity 1s;

// Adjusting width for the first line
&:nth-child(1) {
letter-spacing: -8px;
}

// Adjusting width for the second line
&:nth-child(2) {
letter-spacing: -7px;
}

// Adjusting from the fourth element onwards
&:nth-child(n + 4) {
letter-spacing: -8px;
margin-top: -7px;
opacity: 0;
}

// Getting the lines for the hamburger menu icon
&:before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
transform: translateY(-50%) scaleY(5);
transition: $transition-duration;
}
}

برای ساخت منوی باز، ما نیاز به بازگرداندن آیتم‌های nav به لینک‌های معمولی متن به همراه تغییرات جزئی دیگر داریم. برای انجام این کار به صورت زیر عمل می‌کنیم:

				
					$transition-duration: 0.5s;

#toggle:checked {

// Open nav
& ~ .nav {

// Restoring nav items from "lines" in the menu icon
.nav-item {
color: #EC7263;
letter-spacing: 0;
height: 40px;
line-height: 40px;
margin-top: 0;
opacity: 1;
transform: scaleY(1);
transition: $transition-duration, opacity 0.1s;

// Hiding the lines
&:before {
opacity: 0;

اگر به GIF دقت کنید، متوجه می‌شوید که تمام آیتم‌های منو در یک زمان حرکت نمی‌کنند. می‌توانیم این کار را با CSS انجام دهیم. ما باید هر عنصر (با استفاده از :nth-child ) انتخاب کنیم و افزایش تدریجی transition-delay را تنطیم کنیم. اما این قطعا یک کار تکراری خواهد بود. در صورتی که موارد بیشتری داشته باشیم، می‌توانیم از SCSS کمک بگیریم:

				
					$items: 4;
$transition-delay: 0.05s;

.nav-item {

// Setting delays for the nav items in close transition
@for $i from 1 through $items {
&:nth-child(#{$i}) {
$delay: ($i - 1) * $transition-delay;
transition-delay: $delay;
&:before {
transition-delay: $delay;
}
}

توجه داشته باشید که با استفاده از این کد رفتار خاصی را برای انیمیشن close دریافت خواهیم کرد. ما باید $delay را برای انیمیشن open به صورت زیر تنظیم کنیم:

				
					$delay: ($items - $i) * $transition-delay;

آموزش ها

صفر تا صد طراحی سایت

طراحی سایت

آموزش رایگان طراحی قالب

قالب و پوسته

نمونه های طراحی سایت

ساخت منوی همبرگری

منو همبرگری چیست

همبرگر به عنوان منو ثانویه

ساخت یک منوی همبرگری مارپیچ با CSS

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

درباره علمینه

زیرمجموعه ها

شگفت زده شوید!

تمامی حقوق برای آموزشگاه علمینه محفوظ می باشد