Как сделать меню бургер без javascript?
Создание меню бургер без JavaScript. Вот пример:
HTML:
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-btn">
<span class="sr-only">Toggle Menu</span>
<span class="burger"></span>
</label>
<nav class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
CSS:/* Общие стили для меню */
.menu {
display: none;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
margin-bottom: 10px;
}
.menu a {
text-decoration: none;
color: black;
font-weight: bold;
}
/* Скрытие чекбокса-переключателя */
#menu-toggle {
display: none;
}
/* Создание кнопки-иконки меню */
.menu-btn {
display: inline-block;
cursor: pointer;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.burger {
display: block;
width: 30px;
height: 3px;
background-color: black;
position: relative;
transform-origin: 4px 0;
transition: transform 0.5s;
}
.burger:before,
.burger:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: inherit;
position: absolute;
top: 0;
}
.burger:before {
transform: translateY(-8px);
}
.burger:after {
transform: translateY(8px);
}
/* Показываем/скрываем меню при переключении чекбокса */
#menu-toggle:checked ~ .menu {
display: block;
}
/* Преобразование иконки в крест при открытом меню */
#menu-toggle:checked + .menu-btn .burger {
transform: rotate(45deg);
}
#menu-toggle:checked + .menu-btn .burger:before {
transform: translateY(0) rotate(-45deg);
}
#menu-toggle:checked + .menu-btn .burger:after {
transform: translateY(0) rotate(-45deg);
}
```
Теперь при клике на кнопку-иконку меню, она будет превращаться в крест, а само меню будет появляться/скрываться. При этом в HTML используется скрытый чекбокс и его изменение с помощью псевдокласса ":checked" вызывает изменения стилей.
Ссылка на код: https://jsfiddle.net/6oeLr49s/1/