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

Question

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

Answer 1

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ę.

Comments

Dzięki. Znam to, ale nie mogę korzystać z bootstrapa :/ . Mogę ewentualnie zaimplementować kod JS (w ostateczności jQuery).

Answer 2

Witam. Może użyć :target

Codepen

Tylko sugestia nie przetestowana :)

Comments

Po zastosowaniu tego nie można już w ogóle korzystać z menu :D Znika całkowicie i na zawsze.
Ale dzięki :)

---

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ę.

---

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

hamburger tylko css

---

Bo odświeżało całą stronę. A mi chodziło o to, żeby przechodziło, ale bez odświeżania. Kotwicą.

Answer 3

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.

Comments

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"));
  });
});