Как сделать элементы панели навигации вертикальными, оставив при этом логотип и значок сверху?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как сделать элементы панели навигации вертикальными, оставив при этом логотип и значок сверху?

Сообщение Anonymous »

Я впервые занимаюсь адаптивным дизайном и использую это в качестве упражнения. Но после нескольких часов попыток я теперь в отчаянии. Итак, у меня есть простая панель навигации с логотипом в левом углу, четырьмя элементами навигации посередине и тремя кнопками справа.
Когда область просмотра достигает ширины 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);


HTML и JS:
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/791 ... -stay-on-t
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»