Гамбургер меню на 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-а, добавим к медиа-запросу следующий код.
Результат на скриншоте
Раскомментируем обратно display: none; — скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.
Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS
Создано 22.03.2018 12:06:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Как нарисовать кнопку-гамбургер на чистом css?
Привет! Давно прошли времена, когда нужно было подставлять картинки! Предлагаю руками сделать кнопку-гамбургер (так называют кнопку для меню на мобилках), который при наведении будет красиво трансформироваться в крестик (для закрытия меню).
- создаём контейнер div с классом hamburger-button
- размещаем в нём три дива для верхней, средней и нижней полоски
- делаем контейнер flex-контейнером (display: flex) c flex-direction column и flex-wrap wrap
- задаём равные расстояния между полосками с помощью justify-content: space-between
- анимация имеет три части: верхняя и нижняя полоски поворачиваются на 45 градусов (rotate(45deg)), а средняя постепенно исчезает (устанавливаем opacity: 0)
- задаём transform-origin left, чтобы полоски вращались налево
- и установим transition all 0.5s, чтобы анимации transform и opacity происходили одновременно за полсекунды
div class="hamburger-button"> div class="hamburger-button-top">div> div class="hamburger-button-middle">div> div class="hamburger-button-bottom">div> div> .hamburger-button display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; height: 2.5rem; width: 2.5rem; cursor: pointer; > .hamburger-button-top, .hamburger-button-middle, .hamburger-button-bottom height: 5px; background: black; border-radius: 5px; margin: 3px 0px; transform-origin: left; transition: all 0.5s; > .hamburger-button:hover .hamburger-button-top transform: rotate(45deg); > .hamburger-button:hover .hamburger-button-middle opacity: 0; > .hamburger-button:hover .hamburger-button-bottom transform: rotate(-45deg); > �� Если узнал из статьи что-то полезное, ставь лайк и подписывайся на наш канал в Телеграм или группу ВК. Обсудить статью можно в нашем уютном чатике ��
Коллекция из 10+ анимированных «иконок-гамбургеров» для меню
Иконка-гамбургер — стала наиболее популярным решением для отображения меню на мобильных устройствах. Благодаря компактности и оригинальным анимациям, пользоваться таким меню не только удобно, но и приятно. Здесь я буду собирать самые интересные на мой взгляд готовые решения. В будущем, список иконок для мобильного меню будет пополняться. Я постарался собрать разнообразные иконки по форме, цвету и анимации. Если вы обладаете базовыми навыками верстки, интегрировать на свой сайт не составит большого труда.
Меню Header Navigation
Одна из особенностей иконки — анимация выполнена на чистом CSS.
Click me! Hamburger menu
Экспериментальное меню-гамбургер, основанное на растяжении элементов. Изменение значения и внешнего вида кнопки отображается и сменой цвета.
Atomic Hamburger Menu CSS
При наведении, ‘гамбургер’ превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.
Создание адаптивного мобильного меню на CSS без JavaScript
От автора: навигационное меню, которое является простым, лаконичным и интуитивно понятным, имеет важное значение для оптимизированного взаимодействия с пользователем веб-сайта. Отзывчивость меню также является ключевым фактором.
На момент написания этой статьи более 54 процентов веб-трафика во всем мире приходится на мобильные устройства. Благодаря адаптивному дизайну, ориентированному на мобильные устройства, разработчики начинают с наименьшего размера экрана, а затем постепенно увеличивают масштаб, добавляя дополнительные функции и функциональные возможности для экранов большего размера. Полученные веб-страницы будут автоматически подстраиваться под размер окна браузера пользователя.
Однако, как бы ни было важно адаптивное меню для UX веб-сайта, нет необходимости создавать его на JavaScript. В этом руководстве будет рассмотрено, как создать адаптивное меню для мобильных устройств, используя только HTML и CSS.
Адаптивное мобильное меню только с помощью CSS
Существует множество методов создания адаптивных мобильных меню. Одной из распространенных практик является использование чистого CSS без единой строки JavaScript. Этот метод включает в себя использование простой структуры списка HTML для разработки меню ссылок, которые можно стилизовать и отображать по-разному в зависимости от размера экрана устройства.
В этом руководстве мы будем использовать CSS для создания адаптивного меню для мобильных устройств, планшетов и компьютеров:
Для небольших экранов пользователь должен кликать на значок гамбургера, чтобы открыть пункты меню. На больших экранах элементы меню будут отображаться на панели навигации. В этом уроке мы создадим адаптивное меню, включая значок гамбургера, полностью из чистого HTML и CSS.
Вид мобильного устройства со значком гамбургера, открытым для отображения пунктов меню.
С помощью вашего любимого текстового редактора, например VS Code, создайте два файла в общей папке:
index.html для HTML-кода
style.css для кода CSS
Скопируйте путь к файлу index.html и вставьте его в адресную строку браузера, для просмотра приложения. Добавьте следующий код в файл index.html: