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

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

Добавить комментарий Отменить ответ

Реклама 5

Поиск

Календарь

Мои сайты

Реклама 1

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

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