newVersion:
useFile:
Создание меню-бургера на HTML и CSS можно сделать достаточно просто. Ниже приведен пример кода, который реализует такое меню. Этот код включает в себя HTML-разметку, а также CSS-стили для стиля меню.
### HTMLhtml<br><!DOCTYPE html><br><html lang="ru"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Меню Бургер</title><br> <link rel="stylesheet" href="styles.css"><br></head><br><body><br> <div class="menu-container"><br> <div class="burger" id="burger"><br> <div class="line"></div><br> <div class="line"></div><br> <div class="line"></div><br> </div><br> <nav class="nav" id="nav"><br> <ul><br> <li><a href="#">Главная</a></li><br> <li><a href="#">О нас</a></li><br> <li><a href="#">Услуги</a></li><br> <li><a href="#">Контакты</a></li><br> </ul><br> </nav><br> </div><br><br> <script src="script.js"></script><br></body><br></html><br>
### CSS (styles.css)css<br>body {<br> font-family: Arial, sans-serif;<br> margin: 0;<br> padding: 0;<br>}<br><br>.menu-container {<br> position: relative;<br>}<br><br>.burger {<br> cursor: pointer;<br> display: flex;<br> flex-direction: column;<br> width: 30px;<br> height: 21px;<br> justify-content: space-between;<br> margin: 10px;<br>}<br><br>.line {<br> height: 3px;<br> background-color: #333;<br> transition: all 0.3s ease;<br>}<br><br>.nav {<br> display: none;<br> background-color: #fff;<br> position: absolute;<br> top: 50px;<br> right: 10px;<br> box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<br>}<br><br>.nav ul {<br> list-style-type: none;<br> padding: 0;<br> margin: 0;<br>}<br><br>.nav ul li {<br> border-bottom: 1px solid #eee;<br>}<br><br>.nav ul li a {<br> display: block;<br> padding: 15px 20px;<br> text-decoration: none;<br> color: #333;<br>}<br><br>.nav ul li a:hover {<br> background-color: #f5f5f5;<br>}<br><br>.nav.active {<br> display: block;<br>}<br>
### JavaScript (script.js)javascript<br>document.getElementById('burger').addEventListener('click', function () {<br> const nav = document.getElementById('nav');<br> nav.classList.toggle('active');<br>});<br>
### Описание
- HTML: Создает структуру меню с иконкой бургера и навигацией.
- CSS: Определяет стили для бургер-меню и навигации, включая плавные переходы.
- JavaScript: Добавляет возможность открытия и закрытия меню при клике на иконку бургера.
Просто скопируйте и вставьте этот код в свои файлы, и вы получите работающее бургер-меню. Вы можете изменить стили по своему усмотрению.