button_style_tumb

Анимация иконки «Гамбургер» на CSS3

  • 13, Апрель, 2015

Раньше, для реализации иконки «гамбургера» использовались спрайты и изображения.

Но без небольшого кода JavaScript тут не обойтись. Он понадобиться нам для того чтобы при клике на иконку добавлять стиль active к активной кнопке.

Общая разметка

Разметка для каждой кнопки довольна похожа, и каждая кнопка имеет один общий класс и один уникальный класс. Каждая кнопка состоит из родительского кнопку тега, с внутренним тег диапазона. Родительский тег будет играть контейнер со значком, и позволит нам добавить обивка и цвет фона со значком. Тег span будет «основой» для «гамбургеров». Вот разметка кнопок:

В этом коде мы использовали самую простую разметку. А так же в head подключили библиотеку jQuery.

Немного JavaScript

Все нижеописанное будет бесполезно, без использования JavaScript, так как именно с помощью JS мы будем менять класс наших кнопок. Добавьте данный код после закрывающего тега </body>.

Так мы сразу сможешь видеть результат.

А теперь, давайте приступим к стилям наших кнопок.

Иконка «гамбургер» на CSS3

Для начала «сбросим» все стили кнопок, так чтобы не было теней, рамок и отступов. А также, определим ширину и высоту кнопки (которая пригодится для анимации), и скроем текст. Вот CSS для родителя класса «cmn-toggle-switch«:

Теперь, внутренний тег span, являющийся основой для «гамбургеров». Нам нужны три полосы, поэтому мы будем использовать сам тэг, и его псевдо элементы ::before и :: after. Позиционирование каждой полосы (и самого span) все математически рассчитывается на основе размеров родительского button.

Теперь у нас есть иконки «гамбургер». Но, пока что они у нас без стилей цвета и стрелочек. Давайте перейдем к каждому из наших примеров.

Пример 1 — Вращающаяся иконка

Это самая простая иконка, так как все что мы делаем – вращение, когда ставиться класс active.

style-1-button-icon

Пример 2 — Трансформация в крест

С помощью этого стиля, иконка трансформируется в «X», поворачивая верхний и нижние бары вертикально к центре иконки.

style2-button-icon-menu

Вот CSS стили:

Пример 3 – Трансформация в стрелку влево

В этой версии иконки, все это вращается на 180 градусов, а верхние и нижние линии формируются в направляющую стрелку влево.

style3-menu-icon

Пример 4 — Стрелка вправо

Этот стиль очень похож на тот же способ описанный выше, различается только сторона указания (т.е. вправо).

style4-button-icon

А вот и стили CSS:


Заключение

Как видите, всё не так сложно как могло бы показаться на первый взгляд. Все анимации сделаны на CSS3, а именно с помощью свойства transform , а значит не все старые браузеры смогут отобразить эти анимации.

Надеюсь, эта статья была вам полезна. Как эти анимации работают вы можете рассмотреть в Демо.

Источник: http://speckyboy.com/