در سال های اخیر به دلیل استفاده بیشتر کاربران از گوشی موبایل و تبلت، وب سایت ها به صورت کاملا Responsive طراحی و کدنویسی شده و برای فهرست سایت از آیکون مخصوص این دستگاه ها که به منو های همبرگری معروف هستند، استفاده می شود.منو همبرگری امروزه بسیار پرکاربرد شده و جلوه خاصی به ظاهر وب سایت می دهد.
ما در اینجا یک تریک بسیار ساده و زیبا برای منو همبرگری طراحی کردیم که با کلیک روی آن، به شکل ضربدر تغییر شکل می دهد و با کلیک مجدد در حالت toggle قرار می گیرد. کلیک این تریک با css click و به کار گیری label + input نوشته شده است.
سورس کد این تریک زیبا را برای شما عزیزان به صورت کاملا رایگان قرار دادیم تا به راحتی از آن استفاده کرده و لذت ببرید. همچنین برای درک بهتر کدها پیشنهاد می کنیم فیلم قرار گرفته شده در انتهای متن را مشاهده کنید.
قسمت استایل های کد فوق :
[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=””]
[/box]
دریافت مستقیم فایل : کلیک کنید