Кнопка вызова навигационного меню

В редакторе

Кнопка вызова навигационного меню

Brain_Script
66
2021-04-21 13: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; }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика