Делаем анимированное бургер меню без использования скриптов
Для создания появляющегося гамбургер меню нам понадобится такая html структура:
<div class="menu">
<input type="checkbox" id="burger-checkbox" class="burger-checkbox">
<label for="burger-checkbox" class="burger"></label>
<ul class="menu-list">
<li><a href="#" class="menu-item">Главная</a><li>
<li><a href="#" class="menu-item">О нас</a><li>
<li><a href="#" class="menu-item">Команда</a><li>
<li><a href="#" class="menu-item">Контакты</a><li>
</ul>
</div>
Подробнее посмотреть как сделать бургер кнопку можно в нашей статье – Бургер кнопка для меню. Если вкратце, то мы стилизуем label как кнопку с помощью псевдоэлементов, связываем ее с чекбоксом атрибутом for и скрываем данный инпут. Теперь при клике на label у нас будет срабатывать чекбокс. Далее при помощи псевдокласса :checked и комбинатора + меняем стили кнопке для анимирования ее в крестик при клике.
See the Pen Hamburger button only css by Max (@max00110) on CodePen.
Следующим этапом спозиционируем menu-list абсолютно, прижмем его к краю и с помощью transform:translateX(-100%) спрячем за экран. Далее воспользуемся для чекбокса псевдоклассом :checked и комбинатором ~ и вернем transform у menu-list в начальное состояние. Остается немного стилизовать и наше меню готово.
See the Pen Hamburger menu html + css by Max (@max00110) on CodePen.
Источник: https://html-css.blog/css/burger-menyu-na-html-i-css/
Оставьте первый комментарий