Кнопка вызова навигационного меню
В редакторе
Кнопка вызова навигационного меню
Brain_Script
1423
2021-04-21 16:40:13
<h1>Hamburger Menus</h1>
<div class="container">
<input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
<label for="checkbox1">
<div class="hamburger hamburger1">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label>
<input type="checkbox" id="checkbox2" class="checkbox2 visuallyHidden">
<label for="checkbox2">
<div class="hamburger hamburger2">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label>
<input type="checkbox" id="checkbox3" class="checkbox3 visuallyHidden">
<label for="checkbox3">
<div class="hamburger hamburger3">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label>
<input type="checkbox" id="checkbox4" class="checkbox4 visuallyHidden">
<label for="checkbox4">
<div class="hamburger hamburger4">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
<span class="bar bar5"></span>
</div>
</label>
</div>
/* GENERAL STYLES */
.visuallyHidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
h1 {
text-align: center;
}
.container {
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.hamburger {
margin: 0 auto;
margin-top: 30px;
width: 30px;
height: 30px;
position: relative;
}
.hamburger .bar {
padding: 0;
width: 30px;
height: 4px;
background-color: maroon;
display: block;
border-radius: 4px;
transition: all 0.4s ease-in-out;
position: absolute;
}
.bar1 {
top: 0;
}
.bar2,
.bar3 {
top: 13.5px;
}
.bar3 {
right: 0;
}
.bar4 {
bottom: 0;
}
/* HAMBURGER 1 */
.checkbox1:checked + label > .hamburger1 > .bar1{
transform: rotate(45deg);
transform-origin: 5%;
width: 41px
}
.checkbox1:checked + label > .hamburger1 > .bar2 {
transform: translateX(-40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger1 > .bar3 {
transform: translateX(40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger1 > .bar4 {
transform-origin: 5%;
transform: rotate(-45deg);
width: 41px;
}
/* HAMBURGER 2 */
.checkbox2:checked + label > .hamburger2 > .bar1{
transform: translateX(40px);
background-color: transparent;
}
.checkbox2:checked + label > .hamburger2 > .bar2{
transform: rotate(45deg);
}
.checkbox2:checked + label > .hamburger2 > .bar3{
transform: rotate(-45deg);
}
.checkbox2:checked + label > .hamburger2 > .bar4{
transform: translateX(-40px);
background-color: transparent;
}
/* HAMBURGER 3 */
.hamburger3 .bar1 {
transform-origin: 5%;
}
.hamburger3 .bar4 {
transform-origin: 5%;
}
.checkbox3:checked + label > .hamburger3 > .bar1{
transform: rotate(45deg);
height: 3px;
width: 42px;
}
.checkbox3:checked + label > .hamburger3 > .bar3{
transform: rotate(45deg);
height: 3px;
background-color: transparent;
}
.checkbox3:checked + label > .hamburger3 > .bar2{
transform: rotate(-45deg);
height: 3px;
background-color: transparent;
}
.checkbox3:checked + label > .hamburger3 > .bar4{
transform: rotate(-45deg);
height: 3px;
width: 42px;
}
/* HAMBURGER 4 */
.hamburger2 .bar2,
.hamburger3 .bar3,
.hamburger4 .bar4 {
top: 13.5px;
}
.hamburger4 .bar5 {
bottom: 0px;
}
.hamburger4 .bar {
transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s;
}
.hamburger4 .bar2 {
width: 1px;
transform: rotate(90deg);
left: 13.5px;
}
.hamburger4 .bar3 {
width: 1px;
left: 13.5px;
}
.checkbox4:checked + label > .hamburger4 > .bar1{
top: 13.5px;
background-color: transparent;
}
.checkbox4:checked + label > .hamburger4 > .bar2{
left: 0px;
width: 30px;
transform: rotate(45deg);
}
.checkbox4:checked + label > .hamburger4 > .bar3{
left: 0;
width: 30px;
transform: rotate(-45deg);
}
.checkbox4:checked + label > .hamburger4 > .bar4{
background-color: transparent;
}
.checkbox4:checked + label > .hamburger4 > .bar5{
bottom: 13.5px;
background-color: transparent;
}
Войдите для добавления комментария.