MegaMenu - breakpoint zum Switchen zum Hamburger-Menü
Problem
Wenn man in der Navigation ziemlich viele Punkte hat, kann es sein, dass die Navigation nicht mehr neben dem Logo passt. Sie springt dann zur nächsten Zeile, was nicht optimal für gute UX ist. Das liegt daran, dass wir fest erst ab 767px die Hamburger-Icon anzeigen. Alles drüber (z.B. iPad Hochkant) gilt als "desktop". Auch wenn man mit font-size oder padding versucht, den Abstand zu verkleinern, ist das keine gute Lösung.
Lösungvorschlag
Nicht mehr die hide-on-mobile
und hide-on-desktop
CSS Klassen benutzen, sondern neue Einstellung für MegaMenu. Hier brauche ich dein Input @mor. Die einfachste Lösung wäre ein Setting für Breakpoint. Wenn man z.B. 1000 setzt, wird unter 1000 das Hamburger Menü angezeigt. Setzt man nichts, wird unser Standard-Breakpoint verwendet.
Außerdem können wir die Option "Automatisch" einbauen. Wenn man das auswählt, wird per JS automatisch ermittelt, ob ein Hamburger-Menü (also mobile) oder die normale Desktop-Version angezeigt. Ich habe mir das kurz überlegt und wäre eigentlich nicht schwierig einzubauen
Was denkst du @mor?
- Setting für Breakpoint einbauen
- Zusätzliche Option "Automatisch" einbauen. JS wird selber bestimmen, ob schon zu Hamburger-Menü geswitscht werden soll.
- Standard bleibt so wie es im Moment ist.