• 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
278 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 Mentor (369,350 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 Pasjonat (23,300 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 Pasjonat (23,300 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 Pasjonat (23,300 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 (27,680 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ź 132 wizyt
0 głosów
1 odpowiedź 65 wizyt
pytanie zadane 10 maja w HTML i CSS przez kazik8980 Początkujący (250 p.)
0 głosów
0 odpowiedzi 391 wizyt

39,755 zapytań

78,204 odpowiedzi

153,707 komentarzy

18,801 pasjonatów

Przeglądających: 194
Pasjonatów: 14 Gości: 180

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...