Как сделать меню бургер css media запрос

Меню бургер является компактным способом организации навигации на страницах с ограниченным пространством. Для реализации достаточно HTML-структуры с кнопкой и списком ссылок, а весь визуальный эффект достигается с помощью CSS и медиа запросов. Стандартный подход включает три горизонтальные линии, которые при клике трансформируются в крестик, одновременно открывая скрытое меню.

CSS позволяет управлять положением меню, анимацией и переходами между состояниями без использования JavaScript. Например, свойство transform вместе с transition создаёт плавную анимацию линий кнопки. Использование pseudo-классов :checked или :target обеспечивает переключение состояния меню через чекбоксы или якорные ссылки.

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

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

Верстка базовой структуры меню бургер

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

• Создайте элемент <nav> для обертки всей навигации.
• Добавьте внутри <button> с классом «burger» для кнопки меню.
• Внутри кнопки разместите три <span>, представляющие линии бургер-иконки.
• Список ссылок оформите через <ul> с элементами <li> и <a>.

Пример структуры:

<nav class="menu">
<button class="burger">
<span></span>
<span></span>
<span></span>
</button>
<ul class="menu-links">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

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

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

Стилизация кнопки бургер и анимация линий

Кнопка бургер должна быть визуально заметной и одновременно компактной. Рекомендуется использовать фиксированные размеры: ширина 40–50px, высота 35–40px. Линии оформляются через span с высотой 3–4px, шириной 100% кнопки и закругленными краями.

Для анимации линий применяется CSS transform и transition. Верхняя и нижняя линии поворачиваются на ±45° при открытии меню, средняя линия исчезает через opacity или смещается за пределы кнопки.

Пример CSS-свойств для анимации:

Свойство	Описание	Рекомендации
width	Длина линии	100% кнопки, фиксированная в пикселях
height	Толщина линии	3–4px, для визуальной легкости
border-radius	Закругление концов	2px, для плавного эффекта
transition	Плавное изменение состояния	transform 0.3s ease, opacity 0.2s
transform	Вращение или смещение линии	rotate(45deg) и translateY для верхней/нижней линии

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

Позиционирование и скрытие меню при загрузке страницы

Меню бургер должно быть изначально скрыто для экранов с небольшой шириной. Рекомендуется использовать position: absolute или fixed для списка навигации, чтобы он не занимал место в потоке документа и перекрывал контент только при открытии.

Для скрытия меню применяются свойства transform: translateX(-100%) или display: none. Transform предпочтительнее для плавной анимации с transition, так как сохраняет доступность элементов для экранных читалок.

Пример CSS для изначального скрытия меню:

.menu-links {

  position: fixed;

  top: 0;

  left: 0;

  width: 70%;

  height: 100%;

  background-color: #fff;

  transform: translateX(-100%);

  transition: transform 0.3s ease;

  z-index: 1000;

}

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

Открытие и закрытие меню с помощью CSS-переключателей

Для управления состоянием меню без JavaScript используется CSS-переключатель через элемент <input type=»checkbox»>. Кнопка бургер связывается с этим чекбоксом через атрибут for, позволяя менять состояние при клике.

Когда чекбокс отмечен, применяется селектор :checked, который активирует видимость меню и анимацию линий кнопки. Например, для смещения списка в видимую область используется transform: translateX(0), а для линий кнопки – rotate() и opacity: 0 для средней линии.

Пример структуры:

<input type=»checkbox» id=»burger-toggle» class=»burger-checkbox»>

<label for=»burger-toggle» class=»burger»>

  <span></span>

  <span></span>

  <span></span>

</label>

<ul class=»menu-links»>…</ul>

CSS-селекторы для управления состоянием:

.burger-checkbox:checked ~ .menu-links {

  transform: translateX(0);

}

.burger-checkbox:checked + .burger > span:nth-child(1) {

  transform: rotate(45deg) translateY(8px);

}

.burger-checkbox:checked + .burger > span:nth-child(2) {

  opacity: 0;

}

.burger-checkbox:checked + .burger > span:nth-child(3) {

  transform: rotate(-45deg) translateY(-8px);

}

Такой метод обеспечивает полностью CSS-управляемое меню, совместимое с клавиатурой и доступное для экранных читалок, сохраняя плавность анимации и адаптивность для мобильных устройств.

Применение медиа запросов для адаптации под разные экраны

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

Пример медиа запроса для мобильных экранов:

@media (max-width: 768px) {

  .menu-links {

    transform: translateX(-100%);

    width: 70%;

    position: fixed;

    height: 100%;

    top: 0;

    left: 0;

  }

  .burger {

    display: block;

  }

}

Для экранов шире 1024px:

@media (min-width: 1024px) {

  .menu-links {

    transform: none;

    position: static;

    display: flex;

    width: auto;

  }

  .burger {

    display: none;

  }

}

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

Тестирование и корректировка поведения меню на мобильных устройствах

Проверка включает:

• Клик по кнопке бургер открывает и закрывает меню без задержек.
• Линии кнопки анимируются плавно, не накладываясь на контент.
• Ссылки остаются доступными для нажатия и не перекрываются другими элементами.
• Меню корректно скрывается при изменении ориентации устройства.

Для корректировки поведения используют CSS-подстройки в медиа запросах:

• Уменьшение ширины меню на экранах до 360px, чтобы кнопка оставалась видимой.
• Регулировка отступов и высоты строк в списке ссылок для удобного нажатия пальцем.
• Оптимизация z-index, чтобы меню не перекрывало системные элементы интерфейса.

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

Вопрос-ответ:

Как связать кнопку бургер с меню без использования JavaScript?

Можно использовать чекбокс и label. Чекбокс скрывается через CSS, а label связывается с ним через атрибут for. При клике на label чекбокс изменяет состояние, и через селектор :checked можно изменять свойства списка меню и линий кнопки, включая трансформацию и прозрачность.

Какие CSS-свойства лучше применять для плавного открытия меню?

Для анимации меню используют transform с translateX для перемещения блока в видимую область и transition для плавного изменения. Линии кнопки анимируются через rotate, translateY и opacity. Такой подход уменьшает нагрузку на браузер и обеспечивает плавное появление элементов без сдвига контента.

Как настроить адаптивное поведение меню для разных экранов?

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

Как проверить удобство использования меню на мобильных устройствах?

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