Responsive Grid Menu

Das Grid Menu in Navi+ ist mit einem Mobile-First-Ansatz konzipiert. Das bedeutet, dass Sie das Menü zuerst für mobile Geräte konfigurieren und optimieren, und die Desktop-Version wird automatisch von dem mobilen Layout skaliert, anstatt von Grund auf neu aufgebaut zu werden.

Grid Menus werden typischerweise verwendet, um wichtige Funktionen oder Kategorien hervorzuheben, normalerweise mit 8 bis 12 Elementen. Auf mobilen Geräten wird das Grid häufig in 2 bis 3 Reihen angezeigt, mit 4 bis 5 Elementen pro Reihe. Um dies zu erreichen, können Sie die Breitenlayout-Einstellung verwenden, wie 3/12 oder 2/10, um zu steuern, wie das Grid auf kleineren Bildschirmen passt.

Auf Desktop ist die verfügbare Bildschirmbreite viel größer (oft entsprechend 2–3 mobilen Bildschirmen). Wenn das Grid immer noch nur 4–5 Elemente pro Reihe anzeigt, kann es zu spärlich aussehen. Um dies zu lösen, bietet Navi+ die Einstellung für das Desktop/mobile Anzeigeverhältnis. Wenn Sie beispielsweise ein Verhältnis von 2x einstellen, wird die Anzahl der pro Desktop-Reihe angezeigten Elemente im Vergleich zu mobil verdoppelt, was zu 8–10 Elementen pro Reihe führt und ein ausgewogeneres Layout auf großen Bildschirmen schafft.

Auf mobilen Geräten können Grid Menus auf zwei Arten angezeigt werden. Die erste Option ist die Vollbreite, bei der das Grid die gesamte Bildschirmbreite ausfüllt, wodurch die Elemente leicht zu sehen und zu tippen sind. Die zweite Option ist ein horizontal scrollbares Grid, bei dem die Elementgrößen fest bleiben und die Benutzer nach links oder rechts wischen können, um mehr Inhalte zu erkunden. Beide Optionen funktionieren gut auf mobilen Geräten, und Sie können diejenige auswählen, die am besten zu Ihrem Inhalt und Anwendungsfall passt.

Auf Desktop sind Wischgesten nicht üblich, daher wird das Grid Menu mit einer festen Breite von 100 % angezeigt. Durch die Kombination des Desktop/mobile Anzeigeverhältnisses mit gerätespezifischen Größeneinstellungen (im Format 8

16, was bedeutet 8 auf mobil und 16 auf Desktop) können Sie sicherstellen, dass das Grid auf größeren Bildschirmen klar, voll und gut proportioniert aussieht.

Dieser Ansatz hält Ihr Grid Menu auf mobilen und Desktop-Geräten konsistent, einfach zu verwalten und leicht zu aktualisieren – ohne zwei separate Menüsysteme pflegen zu müssen. Sie müssen das Grid Menu nur einmal auf mobil gestalten, und Navi+ kümmert sich um den Rest.