1PROMTAI.RU » Как правильно создавать меню гамбургер css в сетке grid

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

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

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Меню Гамбургер</title>
</head>
<body>
<div class="menu-container">
<div class="hamburger" id="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav class="menu" id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body { margin: 0; font-family: Arial, sans-serif;
}
.menu-container { display: grid; grid-template-columns: 1fr; position: relative;
}
.hamburger { cursor: pointer; padding: 15px; background-color: #333; color: white;
}
.bar { display: block; width: 30px; height: 3px; margin: 5px auto; background-color: white; transition: all 0.3s ease;
}
.menu { display: none; /* Скрываем меню по умолчанию */ position: absolute; top: 60px; /* Расположение меню под гамбургером */ left: 0; right: 0; background-color: #333; z-index: 1;
}
.menu ul { list-style: none; padding: 0; margin: 0;
}
.menu li { text-align: center;
}
.menu a { display: block; padding: 15px; color: white; text-decoration: none;
}
.menu a:hover { background-color: #575757;
}
/* Класс для отображения меню */
.menu-active { display: block;
}

JavaScript (script.js)

document.getElementById('hamburger').addEventListener('click', function() { const menu = document.getElementById('menu'); menu.classList.toggle('menu-active');
});

Описание

HTML: Создана структура меню с элементами гамбургера и навигационным меню. Элементы меню находятся внутри.

CSS: Используется CSS Grid для организации элементов. Меню скрыто по умолчанию, и отображается только при добавлении класса menu-active. Также стилизованы элементы гамбургера и меню.JavaScript: Добавлен обработчик событий для гамбургера, который переключает класс menu-active на навигационном меню при клике.

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

Обсуждение закрыто.

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

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

Новые записи

Новые

Реклама 4

Комментарии

Реклама 6

Мои сайты

Вход и регистрация

Реклама 5

Новые комментарии

Реклама 2

Календарь

Реклама 3

Рубрики