در سال های اخیر به دلیل استفاده بیشتر کاربران از گوشی موبایل و تبلت، وب سایت ها به صورت کاملا 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]

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

trainingsitedesign

من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥