Гамбургер меню на сайте js + html

Наверняка вы видели некоторые сайты, в которых есть небольшая кнопка с тремя горизонтальными линиями. Если нажать на нее то, рядом с ней появится меню навигации разделов сайта. При повторном нажатии на эту кнопку, меню исчезает.

Именно такую кнопку я предложу вам сделать на своем сайте. Так как по форме она напоминает слоенный бутерброд, ее назвали гамбургером. В демонстрации вы можете сразу увидеть ее в действии.

Особенность моего скрипта в там, что он использует всего 16 строк кода без дополнительных плагинов и т.п. мусора. css также имеет практически нулевой вес. Единственное для работы кнопки требуется библиотека jQuery, но думаю, на всех современных сайтах без нее не обойтись.
Кнопка "плавает" вместе с прокруткой страницы по правому верхнему углу. Если вы хотите, чтобы она была зафиксированной, то измените в классе .gamburger1 свойство position: fixed; на position: absolute; Также, если там поставить вместо right: 0px; свойство left: 0px; то меню будет по левому краю.

Внутрь класса .gamburger5 можно ставить любой контент, который будет показываться по клику на .gamburger3 (это и есть класс кнопки).

Чтобы придать красивый вид кнопке я использовал шрифты иконок fontawesome. Единственным недостатком скрипта является отсутствие возможности установки более одного такого меню на странице. Но при необходимости это можно доработать.

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

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


Введите капчу: