При верстке верхнего меню top-line, всегда требуется для маленьких экранов col-xs-12 делать значок открытия и закрытия меню в виде гамбургера.
Рассмотрим четыре симпатичных примера hamburger menu.
Содержание статьи
1). Гамбургер меню с плавным изменением полосок.
Добавим див с классом class=toggle, внутри будет тег span.
Код в index.html.
|
1 2 3 |
<div class="toggle"> <span></span> </div> |
Стилизуем в main.sass
- Делаем позиционирование position: absolute. И выставляем на центр экрана transform: translate (-50%, -50%). Зададим квадратный размер 50 пикселей. Цвет фона будет background-color: #36BBCE, закруглим края на три пикселя. Наложим тень box-shadow: 0 5px 10px rgba (0,0,0,.5) и при наведении на иконку гамбургер меню курсор изменим на cursor: pointer.
- Установим свойства у span. Добавим размеры width: 34px и height: 4px получится прямоугольник. Сделаем элементы блочными display: block. Зададим фиолетовый цвет, немного закруглим края и добавим тень с меньшими параметрами. Плавное изменение состояния иконки transition: .5s. Добавим анимации маленькую задержку свойством transition-delay: .5s.
- &:before зададим вторую полоску. Копируем из основной полоски и меняем положение top: -10px. Назначим свойство transition-property: top, для эффекта состояния перехода в другое положение. Зададим время перехода в другое положение transition-duration: .3s.
- &: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.
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.toggle position: absolute top: 50% left: 50% transform: translate(-50%,-50%) width: 50px height: 50px background-color: #36BBCE box-shadow: 0 5px 10px rgba(0,0,0,.5) border-radius: 3px cursor: pointer span position: absolute width: 34px height: 4px display: block background-color: #b641b0 top: 50% left: 50% transform: translate(-50%,-50%) box-shadow: 0 3px 3px rgba(0,0,0,.3) border-radius: 2px transition: .5s transition-delay: .5s &:before content: '' position: absolute width: 100% height: 100% background-color: #b641b0 display: block top: -10px left: 0 border-radius: 2px box-shadow: 0 3px 3px rgba(0,0,0,.3) transition-property: top transition-delay: .3s transition-duration: .3s &:after content: '' position: absolute width: 100% height: 100% background-color: #b641b0 display: block top: 10px left: 0 border-radius: 2px box-shadow: 0 3px 3px rgba(0,0,0,.3) transition-property: top transition-delay: .3s transition-duration: .3s .active span background-color: transparent box-shadow: 0 3px 3px rgba(0,0,0,0) &:before top: 0 transform: rotate(45deg) transition-delay: .3s &:after top: 0 transform: rotate(-45deg) transition-delay: .3s |
Для класса toggle назначим функцию click, с нажатием мышки на иконку будем добавлять класс toggleClass (active).
Код common.js
|
1 2 3 4 5 |
$(function() { $('.toggle').click(function(){ $('.toggle').toggleClass('active'); }); }); |
2). Гамбургер меню иконка меняет внешний вид с квадрата на круг.
Сделаем кнопку button, с тремя span внутри.
Укажем class=line у span.
Код в index.html.
|
1 2 3 4 5 |
<button> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> |
Код в main.sass.
|
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 27 28 29 30 31 32 33 34 35 36 |
button position: absolute top: 50% left: 50% transform: translate(-50%,-50%) width: 80px height: 80px cursor: pointer transition: .3s border: 5px solid #b641b0 border-radius: 3px outline: none &:hover border-radius: 50% .line position: relative height: 5px width: 50px top: 50% left: 50% background-color: #b641b0 display: block margin: 10px 0 transition: .5s transform: translate(-50%,-50%) button &:hover transform: translate(-50%,-50%) .line:nth-child(1) left: 5px transform: translateY(15px) rotate(-45deg) .line:nth-child(3) left: 5px transform: translateY(-15px) rotate(45deg) .line:nth-child(2) opacity: 0 |
3). Простое гамбургер меню с тремя полосками.
Код в index.html.
|
1 2 3 |
<div class="icon"> <div class="hamburger"></div> </div> |
Код в main.sass.
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.icon position: absolute top: 50% left: 50% transform: translate(-50%,-50%) width: 80px height: 80px cursor: pointer .hamburger width: 50px height: 6px background-color: #b641b0 position: absolute top: 50% left: 50% transform: translate(-50%,-50%) box-shadow: 0 3px 5px rgba(0,0,0,.3) transition: .3s &:before content: '' position: absolute width: 50px height: 6px top: 15px background-color: #b641b0 box-shadow: 0 3px 5px rgba(0,0,0,.3) transition: .5s &:after content: '' position: absolute width: 50px height: 6px top: -15px background-color: #b641b0 box-shadow: 0 3px 5px rgba(0,0,0,.3) transition: .5s .active1 .hamburger background-color: transparent box-shadow: 0 3px 5px rgba(0,0,0,0) &:before top: 0 transform: rotate(135deg) &:after top: 0 transform: rotate(215deg) |
Код common.js
|
1 2 3 4 5 |
$(function() { $('.icon').click(function(){ $('.icon').toggleClass('active1'); }); }); |
4). Гамбургер меню как ссылка, при нажатии мышки меняет фон.
Сделаем ссылку с двумя span внутри, в них положим иконки font awesome.
Подключаем шрифт иконок font awesome.
Код в index.html.
|
1 2 3 4 |
<a href="#"> <span><i class="fa fa-bars" aria-hidden="true"></i></span> <span><i class="fa fa-times" aria-hidden="true"></i></span> </a> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a position: absolute top: 50% left: 50% width: 80px height: 80px border: 5px solid #b641b0 border-radius: 50% transform: translate(-50%,-50%) overflow: hidden span display: block width: 100% height: 100% text-align: center font-size: 40px color: #b641b0 line-height: 70px transition: .5s &:nth-child(2) background-color: #b641b0 color: blue .active2 transform: translateY(-100%) |
Код common.js
|
1 2 3 4 5 |
$(function() { $('a').click(function(){ $('span').toggleClass('active2'); }); }); |