Нужно правильно реализовать гамбургер. Что можно сделать?
HTML:
<label for="menu-toggle" class="menu-btn"> <span class="hamburger"></span> </label> |
<label for="menu-toggle" class="menu-btn"> <span class="hamburger"></span> </label>
CSS:
.hamburger, .hamburger:before, .hamburger:after { position: absolute; top: 53%; left: 0; width: 100%; height: 1px; background-color: white; } .hamburger:before, .hamburger:after { content: ""; } .hamburger:before { transform: translateY(-6px); } .hamburger:after { transform: translateY(6px); } #menu-toggle:checked ~ .menu-btn .hamburger { background: none; transform: rotate(45deg); } #menu-toggle:checked ~ .menu-btn .hamburger:before { top: 0; transform: rotate(45deg); } #menu-toggle:checked ~ .menu-btn .hamburger:after { top: 0; transform: rotate(-45deg); } #menu-toggle:checked ~ .menu-btn .hamburger { transform: rotate(45deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu-btn .hamburger:before { top: 0; transform: translateY(0) rotate(0deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu-btn .hamburger:after { top: 0; transform: translateY(0) rotate(-90deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu { opacity: 1; visibility: visible; width: 100%; position: fixed; left: 0; right: 0; height: 100%; background-color: black; z-index: 1; padding-top: 450px; text-align: center; } |
.hamburger, .hamburger:before, .hamburger:after { position: absolute; top: 53%; left: 0; width: 100%; height: 1px; background-color: white; } .hamburger:before, .hamburger:after { content: ""; } .hamburger:before { transform: translateY(-6px); } .hamburger:after { transform: translateY(6px); } #menu-toggle:checked ~ .menu-btn .hamburger { background: none; transform: rotate(45deg); } #menu-toggle:checked ~ .menu-btn .hamburger:before { top: 0; transform: rotate(45deg); } #menu-toggle:checked ~ .menu-btn .hamburger:after { top: 0; transform: rotate(-45deg); } #menu-toggle:checked ~ .menu-btn .hamburger { transform: rotate(45deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu-btn .hamburger:before { top: 0; transform: translateY(0) rotate(0deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu-btn .hamburger:after { top: 0; transform: translateY(0) rotate(-90deg); transition: transform 0.3s ease; } #menu-toggle:checked ~ .menu { opacity: 1; visibility: visible; width: 100%; position: fixed; left: 0; right: 0; height: 100%; background-color: black; z-index: 1; padding-top: 450px; text-align: center; }
В таком коде гамбургер открывается и закрывается, отлично.
Но задача гамбургера закрываться при нажатии на якорную ссылку:
Это всё тоже прекрасно работает за счёт js:
const menuToggle = document.querySelector("#menu-toggle"); const body = document.querySelector("body"); const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); menuToggle.addEventListener("click", function () { if (body.style.overflow === "hidden") { body.style.overflow = "auto"; } else { body.style.overflow = "hidden"; menu.style.display = 'block' } }); for (let el of menuLink) { el.addEventListener("click", () => { menu.style.display = 'none' body.style.overflow = "auto"; }); } |
const menuToggle = document.querySelector("#menu-toggle"); const body = document.querySelector("body"); const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); menuToggle.addEventListener("click", function () { if (body.style.overflow === "hidden") { body.style.overflow = "auto"; } else { body.style.overflow = "hidden"; menu.style.display = 'block' } }); for (let el of menuLink) { el.addEventListener("click", () => { menu.style.display = 'none' body.style.overflow = "auto"; }); }
НО после нажатия на ссылку крестик остаётся:
1.Нужно его перевести в гамбургер как то.
2.И самая главная проблема что при повторном нажатии, блогируется экран и не появляется менюшка гамбургера. Хотя крестик меняется на бургер:
Буду очень благодарен если кто сможет помочь ❤️
Дополнительно:
У вас принцип открытия закрытия построен на изменении состояния чекбокса.
Вот его вам и надо изменять в скрипте, а не трогать стили напрямую.
const toggler = document.getElementById('menu-toggle'); const menuLinks = document.querySelectorAll(".menu-link"); for (let el of menuLinks) { el.addEventListener("click", () => { toggler.checked = !toggler.checked; // toggler.checked = false; // или так }); } |
const toggler = document.getElementById('menu-toggle'); const menuLinks = document.querySelectorAll(".menu-link"); for (let el of menuLinks) { el.addEventListener("click", () => { toggler.checked = !toggler.checked; // toggler.checked = false; // или так }); }
- Благодарю :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для правильной реализации гамбургера на сайте можно использовать следующий код на HTML, CSS и JavaScript:
HTML:
<div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
CSS:
.hamburger { display: block; cursor: pointer; width: 30px; height: 20px; position: relative; } .line { width: 100%; height: 3px; background-color: #333; margin: 5px 0; }
JavaScript:
document.querySelector('.hamburger').addEventListener('click', function() { this.classList.toggle('active'); });
Этот код создает стилизованную и анимированную иконку гамбургера, которая при клике добавляет класс 'active'. Вы можете использовать этот класс для отображения и скрытия меню на вашем сайте.
Кроме того, вы можете добавить дополнительные стили и анимации для создания более креативного и интерактивного гамбургера, например, изменить цвет иконок при активации меню или добавить анимацию плавного появления и исчезновения меню.
Надеюсь, данное решение поможет вам правильно реализовать гамбургер на вашем сайте!