Наверняка вы видели некоторые сайты, в которых есть небольшая кнопка с тремя горизонтальными линиями. Если нажать на нее то, рядом с ней появится меню навигации разделов сайта. При повторном нажатии на эту кнопку, меню исчезает.
Именно такую кнопку я предложу вам сделать на своем сайте. Так как по форме она напоминает слоенный бутерброд, ее назвали гамбургером. В демонстрации вы можете сразу увидеть ее в действии.
Особенность моего скрипта в там, что он использует всего 16 строк кода без дополнительных плагинов и т.п. мусора. css также имеет практически нулевой вес. Единственное для работы кнопки требуется библиотека jQuery, но думаю, на всех современных сайтах без нее не обойтись.
Кнопка “плавает” вместе с прокруткой страницы по правому верхнему углу. Если вы хотите, чтобы она была зафиксированной, то измените в классе .gamburger1 свойство position: fixed; на position: absolute; Также, если там поставить вместо right: 0px; свойство left: 0px; то меню будет по левому краю.
Внутрь класса .gamburger5 можно ставить любой контент, который будет показываться по клику на .gamburger3 (это и есть класс кнопки).
Чтобы придать красивый вид кнопке я использовал шрифты иконок fontawesome. Единственным недостатком скрипта является отсутствие возможности установки более одного такого меню на странице. Но при необходимости это можно доработать.
(Пока оценок нет)
Загрузка...