Frage zur "korrekten" Ausführung einer Responsive-Navigation

Hallo zusammen,

gerade bin ich ein wenig unschlüssig, ob denn mein Gedankengang zur Gestaltung einer Responsive-Navigation aus technischer Sicht so "in Ordnung" wäre.

Angenommen, eine Website besitzt ein klassisches Hauptmenü. Diesem Hauptmenü würde ich nun bei den Contao Frontend-Modul-Einstellungen zwei CSS-Klassen zuweisen:

• .navigation--viewport--default
• .navigation--viewport--mobile

Mein Gedanke zur CSS-Funktionalität wäre nun wie folgt:

• Wenn Viewport >= x, dann nutze ".navigation--viewport--default"
• Wenn Viewport < x, dann nutze ".navigation--viewport--mobile"

Im CSS würde ich das so gestalten:

Code:

---

@media all and (min-width: 1024px) {

  .navigation--viewport--default {CSS:blablabla;}
  .navigation--viewport--mobile {display:none; max-height: 0; visibility:hidden;}
}

@media all and (max-width: 1023px) {

  .navigation--viewport--mobile {CSS:blablabla;}
  .navigation--viewport--default {display:none; max-height: 0; visibility:hidden;}
}

---

Wäre das ein adäquates Vorgehen bzw. vielleicht sogar die Standard-Ausführung, oder doch völliger Quatsch? :D

Ich versuche nach Möglichkeit mit einer Navigation auszukommen.
Ein und Ausblenden bei kleinen Viewports über Checkbox (nur CSS) oder mit ein wenig Javascript. Kommt auch etwas drauf an wieviel Navigationsebenen zu erwarten sind. Dazu passe ich das Navigationstemplate entsprechend an.
Es gibt auch ein paar Erweiterungen (z.B. dk-mmenu oder codefog mobile_menu), die ich aber höchstens nutze wenn ein fertiges Theme diese mitbringt.

Alles klar, vielen Dank für Deine nette Rückmeldung!

Folgender Sachverhalt stellt sich:

• Bei "Desktop-Ansicht" soll das horizontal angeordnete Hauptmenü bis in die 2. Ebene als klassisches Dropdown-Menü arbeiten (siehe Abbildung 1).
• Bei "Mobil-Ansicht" soll das Hauptmenü zunächst über das berühmte Hamburger-Menü geöffnet werden. Die Menüpunkte der zweiten Menüebene sollen in diesem Falle jedoch nicht mehr im/am Hauptmenü selbst, sondern in horizontaler Anordnung ein Stück weit darunter dargestellt werden (siehe Abbildung 2).

Anhang 24608
Abbildung 1: Klassisches Dropdown-Menü für die Menüebenen 1 und 2 bei der Desktop-Ansicht.

Anhang 24609
Abbildung 2: Klassisches Hamburger-Menü für die erste Menüebene bei der mobilen Ansicht, während Ebene 2 ein Stück darunter dargestellt werden soll.

Die folgenden Fragen tun sich nun auf:

1. Bislang habe ich noch keine Möglichkeit gefunden, die zweite Menüebene in der mobilen Ansicht ausschließlich per CSS so zu konfigurieren, dass sie auch tatsächlich mit einem gewissen Abstand zum Hauptmenü platziert werden kann. Aus diesem Grunde habe ich notdürftig ein zweites Menü in den Frontend-Modulen erstellt, welches nun lediglich für die zweite Menüebene bei der mobilen Ausgabe zum Einsatz kommt. Frage: Ist diese Lösung denn "Pfusch"? :o
2. Das Dropdown-Menü bei Desktop-Ansicht wird durch Hovern ausgefahren. Eine solche Lösung würde ja bei mobiler Tablet/Smartphone-Nutzung nicht funktionieren, da hier keine Hover-Funktionalität existiert, oder? Wie könnte ich ein Smartphone-taugliches Dropdown-Menü erstellen? Der Aufwand über einen Checkbutton für jeden einzelnen Menüpunkt der Hauptnavigation wäre wohl maßlos übertrieben.

Besten Dank für die Hilfe! ;)