Menu Beispiele im Responsive Webdesign

Wir haben für unsere Kunden mehrere Arten von Navigations-Menus zur Auswahl. Während früher die sogenannte geöffnete Navigation oder das Floating Menu üblich waren, heute aber auch noch häufig rasterbasierte Navigationen (Tabellenstruktur) oder einfache Selectboxen als Menuführung anzutreffen sind, bevorzugen wir die Slider- und Toggle-Navigationen.
Bei dieser Menu-Variante wird die Navigation über einen Button geöffnet („Hamburger-Button“, welcher mit seinen 3 vertikalen Strichen einem belegten Hamburger ähnelt). Je nach Content wird das aufklappbare Menu für eine bessere Usability überlagert oder der obere Inhalt der Seite nach unten verschoben.
Wichtig ist hierbei darauf zu achten, dass das überlagernde Menüs -falls fixiert dargestellt- nicht höher ist als das Display (Viewport). Deshalb tendieren wir dazu, nicht mehr als sieben Hauptkategorien auf unseren Kundenseiten zu implementieren. Viele analysierte Seiten zeigen bei einer Bildschirmgrösse von ca. 1400px  ein problematisches Menuverhalten: Es verschiebt sich, bricht oder verschwindet am Seitenrand. Da viele Responsive-Checker-Tools aber nur die Standardgrössen testen (1920px, 1024px, 768px) wird das vom Kunde nicht bemerkt.

Die folgenden Navigationens-Lösungen berücksichtigen die Darstellung auf kleinen und grossen Displays. Jede Navigationsart wird anhand eines Beispiels interaktiv erklärt.

Diese Menu-Darstellungsarten haben sich bei unseren Kunden besonders bewährt:

  • Full-Screen-Overlay (Über ein Button öffnet sich das Navigationsmenu im mobile Bereich im Vollbild. Der Hintergrund wird mit einem Hintergrundbild oder abgedunkelt dargestellt.)

Full-Screen-Overlay – Beispiel 1

(Desktop-Monitor muss bis auf Tabletgrösse verkleinert werden)

 

Full-Screen-Overlay – Beispiel 2

(Desktop-Monitor muss bis auf Tabletgrösse verkleinert werden)

Full-Screen-Overlay – Beispiel 3

(Desktop-Monitor muss bis auf Tabletgrösse verkleinert werden)

Full-Screen-Overlay – Beispiel 8

(Desktop-Monitor muss bis auf Tabletgrösse verkleinert werden)

Das Mega-Menu

Das Mega-Menu gehört zu den sogenannten Mehrfach- oder Multi-Level-Menus. Es wird hauptsächlich auf Webseiten mit einer grossen Anzahl von Kategorien (z.B. Shopsysteme, Institutionen mit vielen Fachbereichen), Informationen ( Weiterbildungsportalen mit umfangreichen Materialien) oder auf Internetseiten installiert, die ihren Besuchern ein komfortables Auffinden von inhalten ermöglichen wollen. Beispiele und Charakteristiken zu dieser Art von Menu finden Sie auf dieser Extraseite.

2019 Wir-erstellen-Webseiten.ch

 Gutenbergstr.1 · 4142 Basel · 061 525 53 63

Top