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

CSS

Вы можете воспользоваться Font Awesome  или взять изображение, чтобы создать данную иконку, но это не обязательно. Вместо этого вы можете создать «гамбургер» только с помощью CSS и следующей разметки.

 

 

В следующих CSS стилях с помощью  span  мы создадим серединку «гамбургера»  и используем  псевдо-элементы  для создания булочек.

 

Разметка и   стили представлены в CodePen. Пока ничего особенного, просто значок «гамбургера». Перейдем в следующий раздел, посвященный анимации.

See the Pen YGLEjO by Ruslan (@rkaliev) on CodePen.0

Анимирование иконки «гамбургер»

Теперь трансформируем нашу иконку в  форму X , таким образом  пользователю будет ясно, что, щелкнув по ней еще раз, меню закроется. В CSS мы используем transition и transform, чтобы перевернуть псевдо-элементы и скрыть среднюю плитку  для  создания нашей формы Примечание:  Я использую transition и transform, которые поддерживаются в IE10 + и других браузерах. Если вы хотите поддержку старых браузеров  IE, то вы можете использовать запасной вариант JQuery или другие решения JavaScript .

 

Примечание: CodePen использует -prefix-free,  автоматически добавляя необходимые префиксы.

Для того чтобы анимировать иконку мы воспользуемся JavaScript чтобы переключать  класс гамбургера когда пользователь на него нажимает.

Примечание:  classList c ограниченной поддержкой ( IE10 + и другие браузеры ) . Вы можете использовать jQuery snippet или воспользоваться полифилом  HTML5 Please. Ниже приведен пример  «гамбургера»  вместе с  анимацией. Вам нужно нажать на гамбургер, чтобы вызвать анимацию.

See the Pen XjqzPg by Ruslan (@rkaliev) on CodePen.0

 Надеюсь,  вам понравился  этот краткий обзор с псевдо-элементами и анимацией. Я не стал вдаваться в подробности, как именно все вместе организовано. Для того чтобы узнать глубже эти понятия  вы можете посмотреть следующие ресурсы :

  1.  CSS3 Transitions, Transforms, Animation, Filters and more! by Rich Bradshaw (@richbradshaw)  (http://css3.bradshawenterprises.com/)

2.   Video Screencasts — #94: Intro to Pseudo Elements by Chris Coyier (@chriscoyier) (https://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/)

 

 

Источник: elijahmanor.com

Оцените статью
Добавить комментарий