آموزش ساخت دکمه همبرگر منو با CSS3

آموزش ساخت دکمه همبرگر منو با CSS3

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

ما در اینجا یک تریک بسیار ساده و زیبا برای منو همبرگری طراحی کردیم که با کلیک روی آن، به شکل ضربدر تغییر شکل می دهد و با کلیک مجدد در حالت toggle قرار می گیرد. کلیک این تریک با css click و به کار گیری label + input نوشته شده است.

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

آموزش ساخت دکمه همبرگر منو با CSS3
منو همبرگری

قسمت استایل های کد فوق :

[box type=”success” align=”aligncenter” class=”” width=””]

<style>
*, ::after, ::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu{
display: block;
width: 60px;
height: 60px;
/* border: 1px solid red;*/
margin: 100px auto;
position: relative;
cursor: pointer;
}
#nav{
display: none;
}
.menu>div{
display: block;
width: 100%;
height:2px;
background: black;
border-radius: 2px;
position: absolute;
/* top: calc(50% – 1px);*/
top: 50%;
transform: translateY(-50%);
transition:all 0.5s;
}
.menu>div:after,.menu>div:before{
content: ”;
display: block;
width: 75%;
height: 2px;
background: black;
border-radius: 2px;
transition: .4s;
}

.menu>div:after{
transform: translateY(20px);
transform-origin: bottom left;

}
.menu>div:before{
transform: translateY(-20px);
transform-origin: top left;

}

#nav:checked ~ .menu>div{
background: transparent;
}

#nav:checked ~ .menu>div:before{
transform: translateY(-15px) rotate(45deg);
}

#nav:checked ~ .menu>div:after{
transform: translateY(15px) rotate(-45deg);
}

</style>

[/box]

قسمت HTML کد فوق:

[box type=”success” align=”aligncenter” class=”” width=””]

<input type=”checkbox” id=”nav”>
<label class=”menu” for=”nav”>
<div></div>
</label>

[/box]

دریافت مستقیم فایل : کلیک کنید

دیدگاهتان را بنویسید

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

کلاس طراحی سایت