Wie kann man 2 Menüs erstellen das für Desktop und Mobile funktioniert?
In der einen sollen ein Menüs das für Mobile design ist mit "Hamburger" Schaltfläche und da soll per Fullscreen das Menü zu sehen sehen (Mit Dropdown das wenn man ein anderen Hovered wieder zusammenfährt.)
Und ab 1028 x () soll dann das Menü für die Desktop Anwendung zusehen sein das per Mega Menü Angebote oder sonst noch Links anbietet (wenn man darauf hovered).
(Ich weis das man den Browser verkleinern kann, das soll nicht das Problem sein. Es soll auch die gleichen Links sein nur das man im Desktop Menü halt noch Bilder und Text sehen kann)
Ich hoffe man kann mir irgendwie helfen dieses Problem zu lösen.
Weil ich komme momentan echt nicht weiter.
2 Antworten
Schalte mit Media Queries um, sobald ein bestimmter Breakpoint erreicht wurde. Das könnte z.B. eine Breite von 768px sein. Alle Breiten darüber zeigen die Desktopansicht, alle Breiten darunter die für Smartphones.
Ein sehr simples Beispiel:
body {
color: blue;
}
@media (min-width: 768px) {
body {
color: red;
}
}
Für Smartphones wäre die Schriftfarbe blau, für Geräte mit größerer Bildschirmbreite wäre sie rot. In deinem Fall könntest du Elemente standardmäßig ausblenden (mit display: none) und für Desktop den Style wieder überschreiben (display: block).
Ein Beispiel eines responsive Menüs kannst du dir hier anschauen: How To: Responsive Navigation.
Was möglicherweise auch eine Überlegung wert sein könnte: Eine Menüdarstellung zu finden, die sich auf beiden Ansichten doch nicht so sehr unterscheidet. Siehe die Beispiele hier:
Klingt danach, als wenn du Media queries suchst, dort kannst du per CSS auf Größen prüfen