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?
Lesezeichen