Иконка гамбургер-меню на CSS+JS
На этом уроке мы создадим на чистом CSS саму иконку гамбургера-меню и с помощью JS функции, поменяем её внешний вид, на крестик (X), символизирующий – закрывание.
HTML код
Для начала, создадим общий контейнер, на который повесим событие мыши onclick. Внутри которого, будет три блока div с разными классами. Контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. Первый блок изображает верхнюю линию, второй – среднюю и третий – нижнюю. Когда пользователь кликает по этой (this) иконке, выполняется функция burgerMenu(this). Что делает эта функция, мы разберем чуть ниже.
<div class="container" onclick="burgerMenu(this)">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
CSS код
Иконка гамбургер-меню не является ссылкой, поэтому при наведении на неё, сам курсор не появится, добавим его.
.container {
cursor: pointer;
}
Нарисуем темные линии, одинаковые для всех трех классов. Предвижу вопрос: "Зачем создавать отдельные классы, если линии все одинаковые?"
.b1, .b2, .b3 {
width: 36px;
height: 5px;
background-color: #000;
margin: 5px 0;
transition: 0.3s;
}
Ответ кроется в следующем коде. Нам надо анимировать каждую полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (X). Верхняя и нижняя повернутся на 45 градусов, но в противоположных направлениях и переместятся на несколько пикселей.
.change .b1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .b3 {
transform: rotate(45deg) translate(-8px, -8px);
}
Средняя полоска просто исчезнет, став прозрачной.
.change .b2 {opacity: 0;}
Кроме того, мы добавили новый класс change, это значит, что вся эта анимация произойдет, когда запустится функция, переключающая классы.
На данном этапе, иконка гамбургера готова, но при клике по ней ничего не происходит, поскольку мы не написали ещё функцию.
JS код
При клике на контейнер с событием onclick, выполнится JavaScript функция burgerMenu(), которая добавит через метод classList.toggle новое имя класса (change) к нему, что изменит стили каждой горизонтальной полосы: верхняя и нижняя трансформируются в крестик (X). Средняя полоса исчезнет и станет невидимой.
function burgerMenu(icon) {
icon.classList.toggle("change");
}
Попробуйте в действии анимацию.
See the Pen Иконка гамбургер меню на CSS+JS by porsake (@porsake) on CodePen.
Итоги
Наверняка сейчас, у читателя назрел главный вопрос. Зачем делать эту трансформацию-анимацию иконки? Где это использовать? И вы будете правы, во всей этой конструкции не хватает самого меню. При клике по иконке гамбургеру, должно раскрыться текстовое меню и крестик. При клике по крестику, текстовое меню закроется и мы снова увидим гамбургер.
-
Создано 25.01.2019 10:00:25
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.