Главная » Интересно

Как с помощью CSS и JS создать интерактивное гамбургер меню для вашего сайта

На чтение 5 мин Опубликовано Обновлено

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

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

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

Содержание
  1. Создание гамбургер меню
  2. Что такое гамбургер меню?
  3. Как создать гамбургер меню с помощью CSS?
  4. Как добавить функциональность к гамбургер меню с помощью JS?

Создание гамбургер меню

Для создания гамбургер меню с помощью CSS и JS необходимо выполнить следующие шаги:

  1. Создать иконку гамбургера с помощью HTML-элемента <div> и применить стили для его внешнего вида.
  2. Написать скрипт на JavaScript для обработки события клика на иконку гамбургера.
  3. Создать основное меню и применить стили для его скрытия и отображения при клике.

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

Что такое гамбургер меню?

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

Пример:

<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>

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

Как создать гамбургер меню с помощью CSS?

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

  1. Создайте HTML-структуру для гамбургер меню, используя теги <div> и <span>.
  2. Примените стили CSS к каждому элементу гамбургер меню, чтобы они располагались горизонтально и выглядели как три горизонтальные полосы.
  3. Используйте CSS-анимацию или JS-скрипты, чтобы при нажатии на гамбургер меню они «развертывались» в вертикальное меню с пунктами.

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

Вот пример кода CSS для создания гамбургер меню:


.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
height: 40px;
cursor: pointer;
}
.hamburger-menu .bar {
width: 100%;
height: 4px;
background-color: #000;
margin: 6px 0;
transition: background-color 0.3s ease;
}
.hamburger-menu.open .bar:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}

В этом примере мы используем CSS flexbox для расположения трех полосок гамбургер меню. Мы также добавляем переходы CSS для создания анимации «развертывания» меню при нажатии на гамбургер.

Теперь у вас есть базовые инструкции по созданию гамбургер меню с помощью CSS. Вы можете добавить этот элемент веб-дизайна своего сайта и настроить его по своему вкусу.

Как добавить функциональность к гамбургер меню с помощью JS?

После создания гамбургер меню с использованием CSS, следующим шагом будет добавление функциональности с помощью JavaScript (JS). Это позволит нам открыть и закрыть меню, когда пользователь кликает на гамбургер и выполняет другие действия.

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

<button class="hamburger-button">Гамбургер</button>
<nav class="menu">
<ul class="menu-list">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

Мы также можем использовать переменные для хранения выбранных элементов, чтобы обращаться к ним позже.

var hamburgerButton = document.querySelector('.hamburger-button');
var menu = document.querySelector('.menu');
var menuList = document.querySelector('.menu-list');

Затем мы можем использовать метод addEventListener, чтобы добавить обработчик событий, который будет реагировать на клик пользователя. Мы можем изменить свойство стиля элемента меню, чтобы показать или скрыть его. Например, при клике на кнопку гамбургера мы можем изменить свойство display у элемента меню на "block" или "none".

hamburgerButton.addEventListener('click', function() {
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
});

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

Мы также можем добавить анимацию к нашему меню, используя CSS-классы и методы JavaScript, такие как classList.add и classList.remove. Например, при открытии меню мы можем добавить класс "open" к элементу меню, и удалить его при закрытии.

hamburgerButton.addEventListener('click', function() {
if (menu.classList.contains('open')) {
menu.classList.remove('open');
} else {
menu.classList.add('open');
}
});

С помощью JavaScript мы можем добавить еще больше функциональности к нашему гамбургер меню, такую как закрытие меню при клике вне области меню или анимированное появление и исчезновение меню. Используя JavaScript, мы можем делать наши гамбургер меню более динамичными и интерактивными для пользователей.

Оцените статью