Как создать меню бургер на HTML и CSS без JavaScript — подробное руководство по созданию гамбургер-меню без использования JavaScript

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

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

Первым шагом является создание HTML-разметки для нашего меню. Для этого мы используем стандартные теги <ul> и <li> для создания списка элементов меню. Каждый элемент списка будет представлять собой ссылку на определенную страницу или раздел нашего веб-сайта.

После создания HTML-разметки мы приступаем к стилизации нашего меню с помощью CSS. Мы используем псевдоэлементы <::before> и <::after> для создания иконки меню бургер. Затем мы применяем анимацию и переходы для создания плавных эффектов при навигации.

Как создать гамбургер-меню на HTML и CSS без JavaScript — пошаговое руководство

Шаг 1: Создайте структуру HTML

В первую очередь, создайте основную структуру HTML для вашего меню. Вы можете использовать тег <nav> для создания области меню, а затем внутри него разместить список элементов меню с помощью тегов <ul> и <li>. Каждому элементу меню присвойте класс или идентификатор, чтобы потом легко стилизовать их с помощью CSS.

Шаг 2: Создайте иконку «гамбургер»

Для создания иконки «гамбургер» можно использовать псевдоэлементы ::before и ::after. Добавьте класс или идентификатор для вашего иконки и установите его позицию, размер и внешний вид с помощью CSS.

Шаг 3: Скрытие основного меню

С помощью CSS вы можете скрыть основное меню по умолчанию для мобильных устройств. Для этого используйте медиа-запросы и установите свойство display: none; для контейнера меню или каждого элемента меню.

Шаг 4: Создание анимации на CSS

Для создания анимации открытия и закрытия меню используйте псевдокласс :checked и атрибут for. Создайте элемент <input type="checkbox"> и поместите его после иконки «гамбургер». Затем свяжите его атрибутом for с классом или идентификатором иконки.

При помощи медиа-запросов и CSS, установите свойство display: none; для списка элементов меню. При активации чекбокса, измените свойство display: block; для списка элементов меню, чтобы показать его в выпадающем меню.

Шаг 5: Добавление стилей

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

После завершения всех шагов, вы получите кросс-браузерное гамбургер-меню на HTML и CSS без использования JavaScript.

Шаг 1: Настройка HTML-разметки

Перед тем, как приступить к созданию меню бургер на HTML и CSS без JavaScript, нам необходимо настроить HTML-разметку для нашего меню.

Для начала, мы можем создать обертку для нашего меню, используя тег <nav>. Внутри этой обертки, мы создадим таблицу, в которой будут располагаться пункты меню. Для этого, мы используем тег <table>.

Внутри таблицы, мы будем использовать теги <tr> и <td> для создания строк и ячеек таблицы соответственно. В каждой ячейке, мы разместим ссылку на соответствующую страницу.

Например, для создания первого пункта меню, мы можем использовать следующий код:

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

После завершения HTML-разметки для меню, приступим к оформлению с помощью CSS.

Шаг 2: Создание основных стилей

Во-первых, нам нужно задать стили для основного контейнера меню. Мы можем сделать это, добавив стили для класса «.burger-menu». В этом классе мы устанавливаем ширину и высоту контейнера, устанавливаем позицию как «fixed» для фиксированного расположения меню на странице, а также центрируем его по горизонтали и вертикали.

Затем мы определяем основной стиль для кнопки бургер-меню. Мы присваиваем классу «.burger-btn» цвет фона, ширину и высоту, и добавляем некоторые стили для его позиционирования на странице.

Далее нам нужно создать стили для скрытого панели меню. Мы добавляем класс «.burger-menu__panel» и устанавливаем его ширину и высоту, устанавливаем позицию как «absolute», и задаем его цвет фона и границу.

Затем мы создаем стили для элементов меню внутри панели. Мы присваиваем класс «.burger-menu__item» и определяем его высоту, отступы, границы и фоновый цвет. Мы также добавляем стили для ссылок внутри элементов меню, устанавливая цвет текста, стили подчеркивания, отступы и размер шрифта.

И, наконец, мы задаем стили для состояния панели «открыто» и «закрыто». Для этого мы добавляем классы «.burger-menu—open» и «.burger-menu—closed» и задаем им соответствующие стили, например, изменение расположения панели, ширины, высоты и прозрачности.

Вот и все! Мы создали основные стили для нашего гамбургер-меню без использования JavaScript. Теперь можно переходить к следующему шагу — добавлению анимации с использованием CSS.

Шаг 3: Добавление иконки гамбургера

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

Для добавления иконки гамбургера мы используем псевдоэлемент ::before, который позволяет добавить контент перед содержимым элемента.

Добавьте следующий CSS-код в ваш файл стилей:

.navbar-toggler::before {
content: '';
display: block;
width: 25px;
height: 3px;
background-color: #000;
margin-bottom: 5px;
}
.navbar-toggler.open::before {
background-color: transparent;
}
.navbar-toggler.open + .navbar-collapse {
display: block;
}

В этом CSS-коде мы создаем горизонтальную полоску в качестве иконки гамбургера. Когда меню открыто, мы устанавливаем фон иконки гамбургера прозрачным, чтобы она стала крестиком. Кроме того, мы показываем меню, устанавливая свойство display: block для элемента с классом .navbar-collapse.

Шаг 4: Создание анимации при клике

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

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

input[type="checkbox"] {
display: none;
}
.burger-icon {
/* стили иконки бургер-меню */
}
.burger-icon:checked + .menu {
/* анимация показа меню */
}
.close-icon {
/* стили иконки закрытия меню */
}
.close-icon:checked + .menu {
/* анимация скрытия меню */
}
.menu {
/* стили меню */
}

@media (max-width: 600px) {
.menu {
display: none;
}
.menu-toggle {
display: block;
}
}

@keyframes menuAnimation {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.menu-container-mobile {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation-name: menuAnimation;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}