Сейчас существует очень много различных гамбургер-иконок для менюшек на мобильных девайсах. Я чаще всего использую такую: это простой элемент без изображений с двумя псевдоэлементами. Вся эта красота украшается бордюрами и позиционируется так, как нам надо.
Конечно же, тут без javascript не обойтись. Точнее, лучше с ним, чем без него.
Итак, код разметки:
|
1 |
<span class="menu-toggle">toggle menu</span> |
Я использовал элемент span. Вы можете использовать что-нибудь другое. Вся красота заключается в стилях. Вот они:
|
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 |
.menu-toggle { display: block; font-size: 0; background: none; border: none; width: 30px; height: 25px; position: relative; } .menu-toggle, .menu-toggle:before, .menu-toggle:after { border-top: 3px solid #000; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .menu-toggle:before, .menu-toggle:after { position: absolute; content: ""; display: block; left: 0; right: 0; } .menu-toggle:before { top: 7px; } .menu-toggle:after { top: 17px; } .menu-toggle.toggled-on { border-top-color: transparent; } .menu-toggle.toggled-on:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); top: 12px; } .menu-toggle.toggled-on:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); top: 12px; } |
Ну, и чуток javascript, чтобы оживить нашу иконку по клику на нее:
|
1 2 3 |
$('.menu-toggle').on('click', function() { $(this).toggleClass('toggled-on'); }); |
Как всегда, заюзал jquery, поэтому не забываем подключить его. Но, если это единственное, для чего вы будете использовать эту библиотеку — то можно обойтись и без нее. Но я сомневаюсь, что на вашем сайте единственным функционалом под jquery будет иконка меню.
Как всегда, результат тут. Пользуйтесь, если понравилось ;)