لطفا صبر کنید ...

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

الهه قنبری

توسط الهه قنبری

دیدگاه ها: 0
بازدید ها : 136
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در این مقاله از لیداوب، ساخت یک منوی همبرگری مارپیچ با CSS را به شما آموزش خواهیم داد. با ما همراه باشید.


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

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

اگر بخواهید منویی شبیه منوی زیر را داشته باشید:

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

کدهای HTML

در ابتدا، ساختار 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

قبل از شروع به ساخت بقیه اجزای رابط کاربری خود، اجازه دهید عملکرد 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

برای ساخت حالت 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;
}
}
}
}

در اینجا ما از یک حلقه، یک متغیر تعاملی و چند عملیات ریاضی پایه استفاده می‌کنیم. می‌توانید اطلاعات بیشتر در مورد این ویژگی و ویژگی‌های کارآمد دیگر را در سایت مستندات SASS دنبال کنید.
توجه داشته باشید که با استفاده از این کد رفتار خاصی را برای انیمیشن close دریافت خواهیم کرد. ما باید $delay را برای انیمیشن open به صورت زیر تنظیم کنیم:

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

مطالعه مقالات بیشتر در لیداوب:

امیدوارم این مقاله نیز برای شما مفید بوده باشد. برای یادگیری مباحث بیشتری از طراحی سایت و CSS با ما در لیداوب همراه باشید.

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

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