Когда область просмотра достигает ширины 912 пикселей, я скрываю элементы навигации посередине. Теперь остается только Логотип слева, а три кнопки справа заменяются значком меню гамбургера.
Когда я нажимаю на значок меню гамбургера< /code>, элементы навигации должны появиться и располагаться вертикально под логотипом и значком меню. Но они просто появляются где-то между логотипом и меню. На данный момент я слишком неопытен, чтобы решить эту проблему. Поэтому я прошу о помощи.
Ссылка на JSFiddle: https://jsfiddle.net/0nrc1wq4/1/
Код: Выделить всё
[*]
[img]../images/logo-small.svg[/img]
[list]
[url=#Willkommen]Willkommen[/url]
[*][url=#Wohnen]Wohnen[/url]
[*][url=#Kleinwalsertal]Kleinwalsertal[/url]
[*][url=#Kontakt]Kontakt[/url]
[/list]
[list]
[*]
[img]../images/icon-phone.svg[/img]
[*]
[img]../images/icon-contact.svg[/img]
[*]
[img]../images/icon-booking.svg[/img]
[/list]
☰
const burgerMenu = document.getElementById("burger-menu");
const logo = document.getElementById("icon-logo");
const navUl = document.querySelector("nav ul");
function toggleMenu() {
toggleLogo();
toggleBurgerMenuIcon();
toggleNavVisibility();
}
function toggleLogo() {
if (logo.src.includes("logo-small.svg")) {
logo.src = "../images/logo-filled.svg";
} else {
logo.src = "../images/logo-small.svg";
}
}
function toggleBurgerMenuIcon() {
if (burgerMenu.innerHTML === "☰") {
burgerMenu.innerHTML = "✖";
} else {
burgerMenu.innerHTML = "☰";
}
}
function toggleNavVisibility() {
navUl.classList.toggle("nav-visible");
}
burgerMenu.addEventListener("click", toggleMenu);
Заранее спасибо!
Подробнее здесь: https://stackoverflow.com/questions/791 ... -stay-on-t