Гамбургер меню – это популярный способ представления навигационного меню на мобильных устройствах. Оно получило свое название благодаря схожести иконки с гамбургером: три горизонтальные полоски, расположенные одна под другой. Гамбургер меню является неотъемлемой частью многих современных веб-сайтов. Оно позволяет сэкономить пространство на экране и создать более удобную навигацию для пользователей.
Создание гамбургер меню несложно, и в этой статье мы рассмотрим, как реализовать его с помощью CSS и JS. Мы научимся создавать анимированный эффект раскрытия меню при клике на иконку, а также добавим функцию закрытия меню при клике вне его области.
Для создания гамбургер меню мы воспользуемся HTML-разметкой для его структуры, CSS для внешнего вида и JS для реализации интерактивности. Конечный результат будет адаптивным и совместимым с различными браузерами.
Гамбургер меню: создание в CSS и JS
Давайте рассмотрим простой пример реализации гамбургер меню с использованием CSS и JS.
| HTML | CSS | JavaScript |
<div class="menu-icon"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> | .menu-icon { width: 30px; height: 2px; background-color: black; transition: all 0.3s ease; } .menu-icon.open { transform: rotate(45deg); } | const menuIcon = document.querySelector('.menu-icon'); menuIcon.addEventListener('click', function() { this.classList.toggle('open'); }); |
В данном примере мы создаем div с классом "menu-icon" и три элемента span с классом "line". Каждый элемент span представляет одну линию гамбургера. С помощью CSS мы задаем размеры и цвет для линий, а также добавляем анимацию при нажатии на кнопку. Когда кнопка кликается, через JavaScript мы добавляем/удаляем класс "open" для элемента menuIcon, что позволяет поворачивать линии гамбургера в виде иконки "креста".
Это простой пример реализации гамбургер меню. С помощью CSS и JS вы можете вносить дополнительные изменения и настраивать его под свои нужды. Используйте гамбургер меню, чтобы обеспечить удобную навигацию на вашем мобильном сайте или приложении.
Создание гамбургер меню с использованием CSS
Создание гамбургер меню с использованием CSS довольно просто. Ниже приведено руководство по созданию гамбургер меню:
| HTML | CSS |
|---|---|
<div class="hamburger-menu"> <div class="hamburger-icon"> <span class="line1"></span> <span class="line2"></span> <span class="line3"></span> </div> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </div> | .hamburger-menu { display: flex; flex-direction: column; cursor: pointer; } .hamburger-icon { display: flex; flex-direction: column; } .line1, .line2, .line3 { width: 30px; height: 2px; background-color: black; margin: 3px 0; } .menu { display: none; } .show { display: flex; } |
В приведенном выше примере мы создаем контейнер с классом "hamburger-menu", внутри которого располагается иконка гамбургера с классом "hamburger-icon". Иконка состоит из трех полосок с классами "line1", "line2" и "line3". Далее следует список меню с классом "menu". Начально меню скрыто и отображается только иконка гамбургера.
В стиле CSS мы устанавливаем необходимые свойства для создания внешнего вида гамбургер меню. Мы также добавляем класс "show", который будет использоваться для отображения меню при клике на иконку гамбургера.
Когда пользователь нажимает на иконку гамбургера, мы используем JavaScript, чтобы добавить класс "show" к элементу "menu", что делает его видимым. Это позволяет пользователю увидеть скрытое меню.
Таким образом, создание гамбургер меню с использованием CSS несложно и позволяет создать современный и практичный элемент навигации.
Реализация анимации гамбургер меню с помощью JS
Для создания анимации гамбургер меню с использованием JavaScript, необходимо использовать DOM-манипуляции и CSS-трансформации.
Сначала создайте HTML-разметку для гамбургер меню с помощью тегов <div> и <span>. Разместите классы и идентификаторы, которые будут использоваться в JavaScript для манипуляции элементами.
<div class="hamburger-menu" id="hamburger-menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
Затем, в CSS, добавьте стили для гамбургер меню и его анимацию. Например:
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
cursor: pointer;
}
.line {
width: 100%;
height: 2px;
background-color: black;
transition: transform 0.3s ease;
}
.hamburger-menu.open .line-1 {
transform: translateY(9px) rotate(45deg);
}
.hamburger-menu.open .line-2 {
transform: scaleX(0);
}
.hamburger-menu.open .line-3 {
transform: translateY(-9px) rotate(-45deg);
}
Теперь, когда гамбургер меню готов, создайте JavaScript функцию для обработки клика и добавления/удаления класса 'open', который будет управлять анимацией.
document.getElementById('hamburger-menu').addEventListener('click', function() {
this.classList.toggle('open');
});
При клике на гамбургер меню, функция будет добавлять или удалять класс 'open' у элемента с идентификатором 'hamburger-menu', что вызовет анимацию трансформации для линий гамбургер меню.
Теперь вы можете легко реализовать анимацию гамбургер меню с помощью JS и CSS.
