• 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)

0 głosów
127 wizyt
pytanie zadane 29 listopada 2016 w HTML i CSS przez użytkownika Guardd Początkujący (350 punkty)
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 użytkownika Comandeer Ekspert (326,890 punkty)

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 użytkownika Guardd Początkujący (350 punkty)
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 użytkownika pablop76 Dyskutant (9,500 punkty)

Witam. Może użyć :target

Codepen

Tylko sugestia nie przetestowana :)

komentarz 29 listopada 2016 przez użytkownika Guardd Początkujący (350 punkty)
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 użytkownika pablop76 Dyskutant (9,500 punkty)
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 użytkownika pablop76 Dyskutant (9,500 punkty)

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

hamburger tylko css

komentarz 30 listopada 2016 przez użytkownika Guardd Początkujący (350 punkty)
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 użytkownika xandros Pasjonat (15,660 punkty)
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 użytkownika Guardd Początkujący (350 punkty)

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ź 112 wizyt
pytanie zadane 29 listopada 2015 w HTML i CSS przez użytkownika runway Użytkownik (640 punkty)
0 głosów
4 odpowiedzi 91 wizyt
pytanie zadane 5 dni temu w JavaScript, jQuery, AJAX przez użytkownika Kamila Użytkownik (570 punkty)
0 głosów
2 odpowiedzi 137 wizyt
pytanie zadane 11 października 2016 w HTML i CSS przez użytkownika mizeriowy Użytkownik (550 punkty)
...