Моя иконка-гамбургер для мобильных меню

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

Конечно же, тут без javascript не обойтись. Точнее, лучше с ним, чем без него.

Итак, код разметки:

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

Ну, и чуток javascript, чтобы оживить нашу иконку по клику на нее:

Как всегда, заюзал jquery, поэтому не забываем подключить его. Но, если это единственное, для чего вы будете использовать эту библиотеку — то можно обойтись и без нее. Но я сомневаюсь, что на вашем сайте единственным функционалом под jquery будет иконка меню.

Как всегда, результат тут. Пользуйтесь, если понравилось ;)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *