как сделать адаптивное меню бургер
Меняющееся гамбургер меню на CSS
Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.
В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.
Вот пример того, что мы будем делать:
Разметка
Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.
Начальные стили SCSS
Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.
Работа переключателя
Прежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.
Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:
Создание закрытого состояния
Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:
И вот код, который это реализует.
Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.
Создание открытого меню
Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:
Магия в мелочах
Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.
Вывод
Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.
Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.
Надеемся, этот урок оказался вам по душе и вы сочли его полезным!
Адаптивная навигация гамбургер на CSS3
Также это адаптивные меню, которая по своему функционалу сворачивающиеся в гамбургер, это когда открываете сайт с мобильного устройства, что сейчас можно видеть практически на любом сайте. Но здесь есть одна фишка, которая заключается в кнопки hamburger, где при открытии меняется и преображается в другую форму. Вам нужно самому написать название сайта, что расположено с левой стороны, но все запросы останутся по правую сторону, где все выполнено с помощью HTML и CSS.
По умолчанию с широкого монитора:
Это видим с любого гаджет, где при нажатие откроются категории:
Здесь автоматически переходит вертикальное положение на мобильном аппарате:
Это простое навигационное меню можно самостоятельно оформить под любой дизайн, даже выставить тот оттенок цвета, что будет соответствовать основной стилистике сайта. Если это потребуется, то все нужно производить в прикрепленном CSS, где находится функционал и дизайн элементов.
.menyu-navigatsig <
background-color: #f7f7f7;
box-shadow: 1px 1px 4px 0 rgba(35, 35, 35, 0.26);
position: fixed;
width: 100%;
z-index: 3;
border-bottom: 2px solid;
border-color: #ababab;
margin: 0px 0px 0px 0px;
>
.menyu-navigatsig ul <
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
>
.menyu-navigatsig li a <
display: block;
padding: 18px 18px;
border-right: 1px solid #f3f3f3;
text-decoration: none;
>
.navigation <
max-height: 240px;
>
Готовим бургер меню на CSS, HTML и JQuery
Готовим бургер меню на 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! Для этого перед закрывающим тегом
Как сделать бургер-меню для мобильных пользователей сайта на WordPress
Дата публикации: 2019-05-21
От автора: перед тем как сделать бургер-меню для сайта, нужно понять, зачем оно вообще нужно. Если вы хотите, чтобы ваш сайт был адаптивным (а кто не хочет?), важно обеспечить, чтобы главное меню навигации работало на маленьких экранах.
Большие меню навигации могут занимать слишком много места на мобильном телефоне, или они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку.
Бургер-меню — один из способов решить эту проблему. Это меню скрыто, пока пользователь не нажмет на него. Причина, по которой оно называется бургер-меню, состоит в том, что символ, который обозначает его, представляет собой три горизонтальные линии, расположенные одна над другой, что немного напоминает гамбургер.
Существуют плагины, которые превращают ваше главное меню навигации в бургер-меню в WordPress (в том числе доступные на Code Canyon), но что, если вы захотите закодировать его в своей теме? В этом руководстве вы узнаете, как это сделать.
Чтобы следовать этому руководству, вам понадобится:
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
тема, которую вы можете редактировать (если вы используете стороннюю тему, вам нужно создать дочернюю тему)
Стартовое меню
Код, который мы напишем, будет применяться к меню, сгенерированному WordPress с использованием системы меню навигации. Вам не нужно кодировать новое меню для мобильных устройств. (Это одна из часто встречаемых мною проблем, когда сайты имеют разную навигацию на настольном и мобильном устройствах, поскольку это обычно делается в ущерб пользовательскому опыту на мобильном телефоне.)
Я собираюсь продемонстрировать эту технику на примере меню на моем собственном сайте и добавить код в файл header.php, а также в таблицу стилей и новый файл JavaScript. Вот меню для настольных устройств:
Это горизонтальное меню под изображением баннера и заголовком, и над основным контентом. На мобильном телефоне изображение баннера не видно. Я хочу удалить меню и заменить его символом бургера. Когда пользователь нажимает на этот символ, отображается меню. Вот код меню:
Адаптивное меню гамбургер
На прошлом уроке, мы создали анимацию для кнопки гамбургер, без привязки к меню. На этом уроке привяжем к нашей кнопке адаптивное меню.
На мобильных устройствах, при нажатии на кнопку гамбургер, слева выкатится навигационная панель с ссылками меню, при повторном нажатии, меню уберется обратно, за пределы видимости браузера.
В чем состоит фокус появления и исчезновения меню? Только CSS, а точнее конкретное его свойство:
Создается блок с классом menu, где мы позиционируем его с отрицательным значением при заданным position: fixed. Единицы измерения vw, указывают на ширину относительно браузера, где 1vw равен 1% текущего браузера. Получается, что меню находится за пределами браузера с левой стороны и занимает 100% ширины браузера, но пока спрятано.
Создается активный класс меню menu-active с нулевой позицией. При этой позиции блок меню занимает всю видимую часть браузер.
Когда происходит клик по кнопке, к классу menu добавляется активный класс menu-active и блок выдвигается, но об этом поговорим чуть позже.
Выезжающее мобильное меню
По умолчанию это меню спрятано, пока нет клика по кнопке гамбургер.
HTML разметка
CSS код
JQuery код
Если в документе присутствует jQuery код, значит в обязательном должна быть подключена библиотека jQuery. У нас имеется два класса с разным позиционированием блока сменю, осталось только написать функцию переключающую эти два класса при клике по кнопке гамбургер.
Расшифруем код выше. При клике по элементу с классом gamburger, сработает функция (некий набор действий) – «Метод toggleClass добавляет блоку с классом меню активный класс menu-active, если его нет и удаляет этот класс, если он уже есть.»
Мы выполнили программу минимум, однако не хватает реалистичности, меню как-бы повисло в воздухе. Зачем выдвигать навигационное меню, если не кликать по ссылкам этого меню? И еще при переходе по ссылкам и попадая на страницы сайта, меню должно снова исчезать.
Предположим, что у нас одностраничник, добавим ему пять секций с заголовком и параграфом.