Октябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Делаем свой гамбургер меню, четыре вида

Делаем свой гамбургер меню

При верстке верхнего меню top-line, всегда требуется для маленьких экранов col-xs-12 делать значок открытия и закрытия меню в виде гамбургера.

Рассмотрим четыре симпатичных примера hamburger menu.

1). Гамбургер меню с плавным изменением полосок.

Добавим див с классом class=toggle, внутри будет тег span.

Код в index.html.

Стилизуем в main.sass

  1. Делаем позиционирование position: absolute. И выставляем на центр экрана transform: translate (-50%, -50%). Зададим квадратный размер 50 пикселей. Цвет фона будет background-color: #36BBCE, закруглим края на три пикселя. Наложим тень box-shadow: 0 5px 10px rgba (0,0,0,.5) и при наведении на иконку гамбургер меню курсор изменим на cursor: pointer.
  2. Установим свойства у span. Добавим размеры width: 34px и height: 4px получится прямоугольник. Сделаем элементы блочными display: block. Зададим фиолетовый цвет, немного закруглим края и добавим тень с меньшими параметрами. Плавное изменение состояния иконки transition: .5s. Добавим анимации маленькую задержку свойством transition-delay: .5s.
  3. &:before зададим вторую полоску. Копируем из основной полоски и меняем положение top: -10px. Назначим свойство transition-property: top, для эффекта состояния перехода в другое положение. Зададим время перехода в другое положение transition-duration: .3s.
  4. &:after нижняя полоска, копируем свойства верхней полоски и меняем только top: 10px.
    Теперь добавим новый класс active, который будет добавляться скриптом в common.js, после нажатия мышки на hamburger menu.

Напишем для каждой полоски свое состояние.

  • span станет невидимый background-color: transparent и уберем тень box-shadow: 0 3px 3px rgba (0,0,0,0).
  • &:before изменит положение на transform: rotate (45deg) градусов. Ч тобы не было смещения добавм top: 0.
  • &:after в другую сторону поменяется положение transform: rotate (-45deg).

Код в main.sass.

Напишем скрипт для hamburger menu в файле common.js

Для класса toggle назначим функцию click, с нажатием мышки на иконку будем добавлять класс toggleClass (active).

Код common.js

2). Гамбургер меню иконка меняет внешний вид с квадрата на круг.

Гамбургер меню иконка меняет внешний вид

Сделаем кнопку button, с тремя span внутри.

Укажем class=line у span.

Код в index.html.

Код в main.sass.

3). Простое гамбургер меню с тремя полосками.

Простое гамбургер меню

Код в index.html.

Код в main.sass.

Код common.js

4). Гамбургер меню как ссылка, при нажатии мышки меняет фон.

Гамбургер меню при нажатии мышки меняет фон.

Сделаем ссылку с двумя span внутри, в них положим иконки font awesome.

Подключаем шрифт иконок font awesome.

Код в index.html.

Код в main.sass.

Код common.js

Комментариев нет

Комментарии:

Комментарии запрещены