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
Liste der Anhänge anzeigen (Anzahl: 2)
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:
- 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
- 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! ;)