• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sticky menu w postaci burgera na wersji mobilnej

VPS Starter Arubacloud
0 głosów
204 wizyt
pytanie zadane 21 maja 2023 w HTML i CSS przez c3cylone Nowicjusz (180 p.)
Cześć. Na wstępie zaznaczę, że jestem samoukiem i totalnym amatorem :)

Mam problem z nawigacją na stronie. Zrobiłem menu poziome z opcją sticky w JS. Chciałbym, żeby .navbar na wersji mobilnej zmieniło się w hamburger menu, a .order zostało obok. Niestety pojawia się spory problem, kiedy chcę dodać menu (nie wiem, czy to dobry pomysł) do <aside>, które miałoby być ukryte, a pojawiałoby się po kliknięciu w hamburgera. Wszystko się rozjeżdża i nie wygląda tak jak powinno. Poniżej wklejam kod.

https://codepen.io/marcin-reutt/pen/wvYRBWx

Kiedyś udało mi się zrobić coś podobnego, ale zrezygnowałem z tej opcji, bo nie do końca podoba mi się taka forma pozycjonowania. Właściwie to cały projekt mi się nie podobał. Tutaj kod. Nie wiem tylko czemu ikony hamburgera pojawiają się pod sobą. Kiedy uruchomię index.html w przeglądarce wygląda normalnie.

https://codepen.io/marcin-reutt/pen/BaqvyYG

W górnym projekcie, chciałbym osiągnąć podobny efekt, ale nie wiem co robię źle. Będę bardzo wdzięczny za jakieś podpowiedzi.

1 odpowiedź

0 głosów
odpowiedź 22 maja 2023 przez VBService Ekspert (251,210 p.)
edycja 23 maja 2023 przez VBService

Zapomniałeś zapisać klasę show i sekcję @media

 

dla zapisu

const burger = document.querySelector(".burger");

const iconBurger = document.querySelector(".fa-bars");
const iconX = document.querySelector(".fa-times");
const column = document.querySelector("aside");


burger.addEventListener("click", function() {
    iconBurger.classList.toggle("show");
    iconX.classList.toggle("show");
    column.classList.toggle("show");
})

proponuję np. taki

const burger = document.querySelector('.burger'),
      nav = document.querySelector('.navbar');

burger.addEventListener('click', function() {
  nav.classList.toggle('show');
});

całość on-line.

Podobne pytania

0 głosów
2 odpowiedzi 587 wizyt
0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 9 października 2021 w JavaScript przez Piotr Błaszczak Bywalec (2,890 p.)
0 głosów
1 odpowiedź 781 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...