Vertikale Navigation bei der die Submenüs ein- und ausgeblendet werden

Hallo zusammen,

ich bin gerade dabei unsere Homepage für Viewports mit Breakpoints umzusetzen. Die horizontale Navigation für die größeren Breiten ist im Prinzip sogut wie fertig. Aber für Geräte mit einer Seitenbreite von 767 Pixel und schmäler habe ich noch ein Problem, welches ich bislang noch nicht lösen konnte.

Die Navigation wird als vertikale Navigation über ein Icon ein- und ausgeblendet, was bereits schon mal funktioniert. Jetzt möchte ich gerne, dass per Mausklick die Menüpunkte der Untermenüs einzeln ein- und ausgeblendet werden können. Bei meinen Recherchen dazu habe ich nur eine Methode dafür finden können und zwar mit "target". All diese Anleitungen setzen voraus, dass die Webseite mit den Untermenüs doppelt vorgehalten wird mit unterschiedlichen ID's. Gibt es eine Möglichkeit dies auch ohne doppelter Webseite umzusetzen?

Ein gutes Beispiel wie ich es gerne in etwa hätte ist unter der Adresse https://www.mv-stoettwang.de/ zu finden.

Die betreffende Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden. Auf der Webseite ist das Problem bei einer Seitenbreite von 767 Pixel zu sehen. Momentan ist nur die Startseite auf die verschiedenen Breakpoints angepasst und auch noch nicht ganz fertig. Zudem ist es lediglich eine Testumgebung und nicht unser Produktiv-System.

Wer kann mir bitte gute Tipps oder eine Anleitung nennen mit denen man die Funktion zum ein- und ausblenden für Unterseiten umsetzen kann, ohne daa man die betreffenden Webseiten doppelt vorhalten muss.

Danke!


Gruß
Thomas

Ich weiss jetzt nicht was Du meinst mit Seite muss doppelt vorgehalten werde. Ich habe früher auch mal target verwendet, aber keine Seiten doppelt vorgehalten. Inzwischen arbeite ich für solche Navigationen mit einer Checkbox. Ist aus meiner Sicht für zwei Navigationsebenen gut machbar. Hier mal ein Link https://wiki.selfhtml.org/wiki/CSS/T..._Checkbox-Hack
Alternativ eine Erweiterung einsetzen oder mit Javascript arbeiten. Kombinationen mit Checkbox und Javascript gibt es m.E. auch. Einfach im Internet nach "reponsive Navigation und Check-Box-Hack" oder "Navigation und Check-Box" suchen. Da findest Du eine Menge Beispiele und Tutorials.
In Aktion kannst Du eine rein auf Check-Box-Hack basierende Navigation (ohne js) auf https://www.brace.de sehen. Die Seite ist nicht von mir. Ich habe dort nur auf Wunsch mal die responsive Navigation ohne JS eingebaut.

Kleiner Nachtrag: Deine Beispielseite ist mit JS-realisiert - ohne Fallback-Lösung, wenn js nicht aktiviert ist. Grundsätzlich wäre selbst von der Optik da die Erweiterung mmenu wohl nahe dran.

Ich glaube ich hatte Dich schon einmal drauf hingewiesen.
Die Warnung wegen eines Sicherheitsrisikos animiert mich nicht, mir Deine Seite anzuschauen:

Warnung: Mögliches Sicherheitsrisiko erkannt

Firefox hat ein mögliches Sicherheitsrisiko erkannt und sub.musikverein-hirschzell.de nicht geladen. Falls Sie die Website besuchen, könnten Angreifer versuchen, Passwörter, E-Mails oder Kreditkartendaten zu stehlen.

Was können Sie dagegen tun?

Am wahrscheinlichsten wird das Problem durch die Website verursacht und Sie können nichts dagegen tun. Sie können den Website-Administrator über das Problem benachrichtigen.

Weitere Informationen…

Hol Dir ein kostenfreies Zertifikat auch für Deine Subdomain oder stelle diese Seite nur mit http zur Verfügung.

Danke für den Tipp mit dem Checkbox-Hack, im Prinzip ist es genau das was ich mir vorgestellt hatte. Wie man es aufbaut und designt weiß ich nun, aber wie man es unter Contao realisieren kann, da bin ich bislang noch nicht dahintergekommen.
Wie bekommt man die zusätzlichen Elemente „input“ und „label“ in den HTML-Code der Navigation für level_1 und level_2, so dass diese nur beim gewünschten Breakpoint des Media Queries eingebunden werden? Bei meinen Recherchen dazu habe ich bisher noch nichts Passendes finden können.
Für hilfreiche Tipps oder Informationen wäre ich sehr dankbar.

Gruß
Thomas

Einfach durch Template-Anpassung.

Hallo zusammen,

ich bekomme die Anpassung vom "nav_default.html5" Template für "input" und "label" nicht hin, weder die beiden Elemente sind dabei richtig eingebunden noch funktioniert der Zähler für die Submenüs. Gibt es irgendwo ein Musterbeispiel, an dem man sich vielleicht orientieren könnte? Bei meinen Recherchen dazu habe ich noch nichts entsprechendes gefunden.
Kann mir bitte jemand einen passenden Link benennen oder einen guten Tipp dafür geben.
Danke!


Gruß
Thomas