Menü lässt sich über link nicht schließen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Daniiel721

Neues Mitglied
23 Februar 2018
27
0
1
27
#1
Hallo zusammen,

Ich habe heute für meine Homepage ein Bürger-Menü erstellt. Des funktioniert einwandfrei. Lässt sich über das Label gut öffnen und schließen. Jetzt möchte ich aber dass es sich über die Links z.b. Produkt oder startseite auch schließen lässt. Die Links sind bei mir mit einer Position auf der Homepage versehen. Aber entweder springt mir die Seite nur auf die Position oder es lässt sich dadurch nur schließen aber beides hat bis jetzt nicht funktioniert. Könnt ihr mir helfen?

Meine Seite: Www.danmos.de

Danke

Nachtrag : vielleicht mit der onClick Funktion <a href="#" onClick="Menu.Open"> oder so...
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.169
250
83
65
#2
Genau, da finde ich nur ein Lösung mit Javascript:
Code:
    <script>
        var links = document.querySelectorAll(".menu a");
        for (var i = 0; i < links.length; i++) {
            links[i].addEventListener("click", function () {
                document.getElementById("open-menu").checked = false;
            })
        }
    </script>
An Ende des Body einfügen.
 
Zustimmungen: Daniiel721

Daniiel721

Neues Mitglied
23 Februar 2018
27
0
1
27
#3
Boah super.Danke dir. Ich musste es zwar hinter dem body einfügen aber funktioniert grandios . das wird ja keine Probleme für mich geben, wenn ich Java mit rein misch? Oder? Wie findest du sonst mein Code? Das habe ich alles selbst geschrieben und ich hatte davor 0 Erfahrung
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.169
250
83
65
#4
Sehr gut, dass Du das selber geschrieben hast, denn der Checkbox-Hack ist ja ein bisschen tricky.
Ich bevorzuge zwar auch gern reine CSS-Lösungen, aber in dem Fall habe ich es nicht hin bekommen, dass sowohl der Link als auch der Klick auf das Label funktioniert. Macht aber nichts, denn selbst wenn Javascript deaktiviert ist, ist die Seite ja bedienbar: Man kann das Menü einfach durch erneuten Klick auf das Menüsymbol weg klicken.
Man hätte noch versuchen können, es mit :target zu lösen, aber dann ist man nicht sicher, ob es unerwünschte Nebeneffekte hat.
 
Zustimmungen: Daniiel721

djheke

Aktives Mitglied
8 Februar 2012
915
82
28
#5
Es sollte aber auch ohne Checkbox gehen, aber dafür mit :focus und :active. Als Attribut noch tabindex="0" im Anker.