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

Zamknięcie rozwijanego menu typu "hamburger" za pomocą CSS (ew. JS)

VPS Starter Arubacloud
0 głosów
1,024 wizyt
pytanie zadane 29 listopada 2016 w HTML i CSS przez Guardd Początkujący (350 p.)
Hej,

Jest możliwe, aby w poniższym kodzie, po rozwinięciu menu w lewym, górnym rogu i kliknięcu w link, te menu się z powrotem zwijało? Chciałbym użyć tylko CSSa, ale jeśli nie jest to możliwe, to jak to zrobić przy pomocy JavaScriptu?

http://codepen.io/Basia12345/pen/ZBaEbg

3 odpowiedzi

0 głosów
odpowiedź 29 listopada 2016 przez Comandeer Guru (599,730 p.)

Widzę, że zrobiłeś to na :checked. Niemniej nie jest to polecana metoda, ponieważ sprawia problemy czytnikom ekranowym. W tym względzie akurat Bootstrap ma fajną implementację.

komentarz 29 listopada 2016 przez Guardd Początkujący (350 p.)
Dzięki. Znam to, ale nie mogę korzystać z bootstrapa :/ . Mogę ewentualnie zaimplementować kod JS (w ostateczności jQuery).
0 głosów
odpowiedź 29 listopada 2016 przez pablop76 VIP (123,060 p.)

Witam. Może użyć :target

Codepen

Tylko sugestia nie przetestowana :)

komentarz 29 listopada 2016 przez Guardd Początkujący (350 p.)
Po zastosowaniu tego nie można już w ogóle korzystać z menu :D Znika całkowicie i na zawsze.
Ale dzięki :)
komentarz 30 listopada 2016 przez pablop76 VIP (123,060 p.)
Podlinkowałem tylko pierwszy link. I działa. To samo trzeba zrobić z resztą. W tej metodzie przeładowuje się cały html więć dostajemy zamknięty hamburger po przejściu na kolejną podstronę.
1
komentarz 30 listopada 2016 przez pablop76 VIP (123,060 p.)

Menu hamburger tylko css., Z tym, że pozbylem się checkboxa

hamburger tylko css

komentarz 30 listopada 2016 przez Guardd Początkujący (350 p.)
Bo odświeżało całą stronę. A mi chodziło o to, żeby przechodziło, ale bez odświeżania. Kotwicą.
0 głosów
odpowiedź 30 listopada 2016 przez xandros Nałogowiec (29,450 p.)
Może toggle klasy, która pokazuje/chowa menu na event on click:

https://developer.mozilla.org/pl/docs/Web/API/Element/classList

Czysty JS.
komentarz 30 listopada 2016 przez Guardd Początkujący (350 p.)

Poradziłem sobie dziś z jQuery... Ale dzięki za pomoc!

 


$(document).ready(function() {
  $(".menuOption").click(function () {
    var checkBoxes = $(".main-menu-switch");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  });
});

 

Podobne pytania

0 głosów
1 odpowiedź 169 wizyt
pytanie zadane 16 czerwca 2018 w HTML i CSS przez przemek11 Nowicjusz (150 p.)
0 głosów
1 odpowiedź 231 wizyt
0 głosów
1 odpowiedź 362 wizyt
pytanie zadane 18 stycznia 2019 w JavaScript przez Helio Dor Nowicjusz (230 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...