В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).
Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.
Для реализации данной кнопки нам понадобятся:
- HTML
- CSS3 (в примере будем использовать SCSS)
- JavaScript (а точнее jQuery)
Как наша кнопка выглядит в HTML:
<div class="hamburger"> <span class="hamburger-line"></span> <span class="hamburger-line"></span> <span class="hamburger-line"></span> </div>
Ничего сложного здесь нет:
DIV с классом «hamburger» - сама наша кнопка с заранее заданными размерами.
SPAN с классом «hamburger-line» - линии кнопки.
Далее идет наш SCSS код:
.hamburger { width: 30px; margin: 0 auto; &-line { width: 100%; height: 4px; background-color: #158100; display: block; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; &:nth-child(2){ margin: 6px auto; } } &:hover{ cursor: pointer; } &.hamburger-active .hamburger-line:nth-child(2){ opacity: 0; } &.hamburger-active .hamburger-line:nth-child(1){ -webkit-transform: translateY(10px) rotate(40deg); -ms-transform: translateY(10px) rotate(40deg); -o-transform: translateY(10px) rotate(40deg); transform: translateY(10px) rotate(40deg); } &.hamburger-active .hamburger-line:nth-child(3){ -webkit-transform: translateY(-10px) rotate(-40deg); -ms-transform: translateY(-10px) rotate(-40deg); -o-transform: translateY(-10px) rotate(-40deg); transform: translateY(-10px) rotate(-40deg); } }
для не новичка, выше указанный код проблем создать не должен. Но для тех кто далек от CSS немного поясню:
- Свойство «transition» обеспечивает нам анимацию
- Свойство «transform» позволяет нам трансформировать элементы
- А «:nth-child» - псевдо класс.
И на конец JavaScript код в исполнении jQuery:
$(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("hamburger-active"); }); });
здесь, по клику на гамбергере, мы добавляем или удаляем с него класс «hamburger-active». Которому в CSS задана анимированная трансформация с поворотом на 45 градусов первой и третей линии. А вторая полоска (SPAN с классом «hamburger-line») у нас прячится.
Саму реализацию можно найти на этой странице.