Вы можете воспользоваться Font Awesome или взять изображение, чтобы создать данную иконку, но это не обязательно. Вместо этого вы можете создать «гамбургер» только с помощью CSS и следующей разметки.
|
1
|
<a id=«nav-toggle» href=«#»><span></span></a>
|
В следующих CSS стилях с помощью span мы создадим серединку «гамбургера» и используем псевдо-элементы для создания булочек.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: white;
position: absolute;
display: block;
content: »;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
|
Разметка и стили представлены в CodePen. Пока ничего особенного, просто значок «гамбургера». Перейдем в следующий раздел, посвященный анимации.
See the Pen YGLEjO by Ruslan (@rkaliev) on CodePen.0
Анимирование иконки «гамбургер»
Теперь трансформируем нашу иконку в форму X , таким образом пользователю будет ясно, что, щелкнув по ней еще раз, меню закроется. В CSS мы используем transition и transform, чтобы перевернуть псевдо-элементы и скрыть среднюю плитку для создания нашей формы X . Примечание: Я использую transition и transform, которые поддерживаются в IE10 + и других браузерах. Если вы хотите поддержку старых браузеров IE, то вы можете использовать запасной вариант JQuery или другие решения JavaScript .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
|
Примечание: CodePen использует -prefix-free, автоматически добавляя необходимые префиксы.
Для того чтобы анимировать иконку мы воспользуемся JavaScript чтобы переключать класс гамбургера когда пользователь на него нажимает.
Примечание: classList c ограниченной поддержкой ( IE10 + и другие браузеры ) . Вы можете использовать jQuery snippet или воспользоваться полифилом HTML5 Please. Ниже приведен пример «гамбургера» вместе с анимацией. Вам нужно нажать на гамбургер, чтобы вызвать анимацию.
See the Pen XjqzPg by Ruslan (@rkaliev) on CodePen.0
Надеюсь, вам понравился этот краткий обзор с псевдо-элементами и анимацией. Я не стал вдаваться в подробности, как именно все вместе организовано. Для того чтобы узнать глубже эти понятия вы можете посмотреть следующие ресурсы :
- 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
