меню бургер на jquery

16.04.202220.04.2022 admin 0 Comments

Гамбургер меню на CSS или JS? Часть 1

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта

Основной контент сайта

2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

Вставляем скопированный выше код вместо текста «Меню».

На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.

.menuBurger <
display: none; /* иконка гамбургер скрыта */
>

3. Переходим к медиа-запросу

На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.

@media screen and (max-width: 530px) <
.menu <
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
>

.menu li <
float: none; /* пункты меню в столбцах */
>

.menuBurger <
display: inline-block; /* иконка гамбургер видна */
>
>

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

Результат на скриншоте

Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник

Адаптивное меню гамбургер

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

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

В чем состоит фокус появления и исчезновения меню? Только CSS, а точнее конкретное его свойство:

Создается блок с классом menu, где мы позиционируем его с отрицательным значением при заданным position: fixed. Единицы измерения vw, указывают на ширину относительно браузера, где 1vw равен 1% текущего браузера. Получается, что меню находится за пределами браузера с левой стороны и занимает 100% ширины браузера, но пока спрятано.

Создается активный класс меню menu-active с нулевой позицией. При этой позиции блок меню занимает всю видимую часть браузер.

Когда происходит клик по кнопке, к классу menu добавляется активный класс menu-active и блок выдвигается, но об этом поговорим чуть позже.

Выезжающее мобильное меню

По умолчанию это меню спрятано, пока нет клика по кнопке гамбургер.

HTML разметка

CSS код

JQuery код

Если в документе присутствует jQuery код, значит в обязательном должна быть подключена библиотека jQuery. У нас имеется два класса с разным позиционированием блока сменю, осталось только написать функцию переключающую эти два класса при клике по кнопке гамбургер.

Расшифруем код выше. При клике по элементу с классом gamburger, сработает функция (некий набор действий) – «Метод toggleClass добавляет блоку с классом меню активный класс menu-active, если его нет и удаляет этот класс, если он уже есть.»

Мы выполнили программу минимум, однако не хватает реалистичности, меню как-бы повисло в воздухе. Зачем выдвигать навигационное меню, если не кликать по ссылкам этого меню? И еще при переходе по ссылкам и попадая на страницы сайта, меню должно снова исчезать.

Предположим, что у нас одностраничник, добавим ему пять секций с заголовком и параграфом.

Источник

Готовим бургер меню на CSS, HTML и JQuery

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

Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:

Техническое задание:

У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:

Текущий HTML-файл:

Текущий CSS-файл:

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

1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:

2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.

3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.

4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.

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

Инструменты: HTML, CSS, JQuery

1. Рисуем бургер меню в левом верхнем углу шапки

В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом «menu-burger__header»:

Над этим блоком мы и поколдуем!

Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)

Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:

После этого можно сохранить стили и обновить страницу — бургер создан!

Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:

В результате меню приобрело следующий вид:

Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:

Теперь я довольна результатом и предлагаю двигаться дальше:

2. Пишем скрипт анимации бургера при клике мыши.

Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом

Источник

Анимация кнопки меню гамбургер

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

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

Демонстрация анимации

На этом уроке мы подробно разберем, как сделать кнопку гамбургер и при клике трансформировать её в крестик. Первым делом подключим библиотеку jQuery.

HTML разметка

Создадим блок с классом gamburger со скругленными углами, внутри которого, друг под другом разместим три полоски, стилизовав теги span.

Идея в том, что убрав среднюю полоску и путем трансформации двух крайних полосок, превратить их в крестик. Начнем писать стили.

CSS код

Верхняя и нижняя полоски поворачиваются на 45 градусов, но в противоположном направлении по отношению друг к другу, пересекаясь по середине, образуя крестик, а средняя полоска масштабируется до нулевого значения. Изменяя значения свойства translate, полоски перемещаются от левого верхнего угла по диагонали вниз и от нижнего правого угла по диагонали вверх.

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

JQuery код

Перед закрывающим тегом body прописываем скрипт анимации.

При клике по элементу с классом gamburger, запускается следующая функция. Добавить класс first (правила анимации) первому span через псевдокласс nth-child(1) и сделать тоже самое со средней и нижней полоской – добавить им соответствующие классы. Метод toggleClass, добавляет класс, если его нет и удаляет класс, если он есть.

На следующем уроке сделаем так, что при клике по кнопке, будет выезжать боковое вертикальное меню.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 1 ):

вариант 2 https://myrusakov.ru/css3-gamburger-menu.html

Источник

Кнопка меню гамбургер с помощью CSS и jQuery

Чтоб создать качественный сайт по функциональности, то без кнопки гамбургер не обойтись, так как она отвечает за появление навигаций сайта. Безусловно она стала очень популярна для пользователей широкого монитора, также мобильных носителей. Больше всего она отвечает за меню на сайте на всех гаджетов. И здесь плюсы от нее идет в компактности и оригинальности, где присутствует анимация. Где пользователя такой функцией приятно и удобно, так как всегда можно увидеть, где сразу понимаешь, что вы откроете.
С тех пор веб-дизайн превратился в более сложную художественную форму. Необходимо тщательно подумать и рассмотреть возможность разработки сайта, который работает во всех платформах и размерах экрана. Одним из наиболее важных аспектов гибкого веб дизайна является навигация. Его обычно нужно скрывать и получать с помощью кнопки, чтобы упростить дизайн, и создать место для важного контента.
В настоящее время все знакомы с символом навигации 3-го уровня, который был должным образом прозваны кнопками гамбургера, это стандарт в навигационных кнопках. В начале мы просто использовали бы изображения как наши кнопки для гамбургеров, но теперь нам нравится использовать чистый CSS поверх изображений, когда это возможно. Это привело к созданию чистой кнопки CSS, и мы сделали еще один шаг, добавив приятную анимацию с открытым и закрытым переходом.
1. Нужно создать структуру HTML для вашей кнопки:
На первом этапе выстраиваем основную структуру HTML, что предназначена для кнопки навигации:
1. Здесь заостряем внимание в HTML и CSS идентификатор kisnext-generation, что изначально ссылается на весь этот каркас.
2. Также есть тема подключить любой шрифт текста для вызова, хотя здесь знаки будут скрыты и фактически не виден.
3. Любой элемент HTML может быть использован.
2. Переходим к стилям CSS для стилизации:
В последующем шаге мы будем ссылаться на идентификатор, используемый на кнопке гамбургера в шаге 1, и нарисуем его при помощи стилистики CSS.
Элементы для заметок:
1. Убедитесь, что вы ссылаетесь на тот же идентификатор, который размещен на вашем элементе HTML.
2. При необходимости отрегулируйте прокладку на #kisnext-generation.
3. Мы чувствуем, что мы разработали довольно стандартный размер для кнопки, но если вам нужно изменить высоту, вам также потребуется отрегулировать маржу, а также позиционирование для тегов span.
Используйте jQuery для запуска анимации CSS для кнопки Гамбургер. Заключительный шаг в этом уроке, это оживить анимацию CSS, используя простую функцию щелчка jQuery для включения и отключения активного класса.
Элементы для заметок:
1. Нужно убедиться, на какой индикатор ссылаетесь, что размещен на вашем HTML.
2. Этот шаг зависит от библиотеки JavaScript jQuery, чтобы функционировать; вы должны либо напрямую подключиться к jQuery, либо загрузить последнюю версию и загрузить ее на свой сервер.
3. Этот jQuery является временным и используется только для фактического запуска анимации CSS; он будет обновлен во второй части этой серии учебников.
В этом руководстве рассмотрели несколько простых шагов, чтобы создать удобное меню гамбургеров для вашего сайта с использованием HTML, CSS и немного jQuery.
Нужно подключить jQuery, где после этого отлично работать будет. У кого конструктор uCoz, то у вас уже в системе по умолчанию установлено.
Источник

Кулинарный справочник "АМ-Сервис"

меню бургер на jquery

Гамбургер меню на CSS или JS? Часть 1