Entwicklung & Design

Responsive Webdesign, Teil 2: Das Navigationsmenü

Seite 2 / 2

Navigationsmenüs – von Multi Toggle bis Grid Based

(Multi) Toggle – Accordion(-artig)

Mein Lieblinspattern. Hierbei verwandelt ihr euer Menü in ein Accordion, das auch Sub-Menüs in den entsprechenden Sub-Accordions abbilden kann. Diese Technik ist auch für große Navigationsmenüs geeignet. So müsst ihr nicht auf Elemente verzichten, sollte die Anzahl eurer Menüpunkte zu „groß“ sein.

Pro

  • Elegante Lösung: Die Navigation wird auf ein, für den mobilen Einsatz bestimmtes, Medium beziehungsweise Gerät optimiert.
  • Gute Skalierbarkeit: Durch die Listendarstellung können weitere Navigationselemente hinzugefügt werden, ohne das restliche Layout zu beinflussen.
  • Platzsparend: Auch dieses Pattern ermöglicht eine gute Aufnahme des Inhalts, da nicht zuviel Platz für eine Navigation „verschwendet“ wird.

Contra

  • Peformance: Nicht alle Geräte unterstützen Animationen mit CSS in einer performanten Weise.
  • JavaScript: Auch hier ist die Abhängigkeit (der Trigger) nicht groß, trotzdem existiert sie.

Bibliotheken, die euch dabei unterstützen:

Menu Overlay – Dropdown Menü

Mit dieser Technik verwandelt ihr eure Navigation in ein Dropdown-Menü, das sich links oder rechts am oberen Rand befindet – alle anderen Elemente können darunter „durchscrollen“. Dabei ist zu beachten, dass eine zu große Navigation nicht optimal darstellbar ist, außer es gibt eine Submenü-Funktionalität. Pro und Contra verhält sich gleich wie bei dem oben genannten Pattern.

Off Canvas – Das Navigations Menü verschwindet

Mit dieser Methode versteckt ihr die Navigation in einen Bereich außerhalb des Viewports und blendet diesen Teil, nach einer Interaktion, wieder ein. Das bekannteste Beispiel für diese Methode dürfte die mobile Version von Facebook sein.

Pro

  • Durch Facebook kann dieses Navigationspattern leichter erkannt werden
  • Platzsparend: Es wird kein Platz für die Navigation verbraucht.
  • Skalierbarkeit: Weitere Elemente oder sogar Untermenüs können leicht dargestellt werden.

Contra

  • Darstellung: Kann auf Desktop-Auflösungen wie ein Blick zurück nach 1991 aussehen.
  • JavaScript wird benötigt.

Bibliotheken, die euch dabei untersützten:

Grid Based – Tabulare Ansicht

Dieses Pattern verwandelt euer Navigatiosnmenü in eine tabellenartige Ansicht. Diese Methode ist nicht für Unterpunkte geeignet, trotzdem kann sie eine zufriedenstellende Lösung für euer Webprojekt darstellen. Zudem verleiht sie der Website ein aufgeräumtes Aussehen, bei dem Nutzer alle Navigationspunkte auf einmal sehen können.

Pro

  • Darstellung: Es wird keine zusätzliche Interaktion benötigt, um das Navigationsmenü anzeigen zu lassen.
  • Touch-friendly: Durch die Größe der einzelnen Elemente kann die Bedienung erleichtert werden.

Contra

  • Größe: Dieses Navigationspattern kann mehr Platz beanspruchen als andere Pattern
  • Erkennbarkeit: Es kann für einige Benutzer schwierig sein, dieses Pattern als Navigation zu erkennen.

Bibliotheken, die euch dabei untersützten:

Natürlich sind diese vorgestellten Pattern nicht zwingend zu verwenden. Daher gibt es auch einige alternative Lösungen für Probleme, die nicht immer auftreten, aber können. Eine einfache Möglichkeit, ein Accordion zu Tabs zu wandeln (natürlich auch umgekehrt) bietet dieses jQuery-Plugin.

Dieser Artikel ist der zweite Teil einer Serie, hier geht es zurück zum ersten Teil: Responsive Webdesign: Layout- und Textdarstellung.

Welche Pattern oder Plugins vermisst ihr in dieser Liste?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

17 Kommentare
LittleOne
LittleOne

Sehr koole Reihe!!! Danke dafür! Was super wäre ein plugin welches Akkordionen zu Tabs und umgekehrt umwandelt. Denn oft hat man im Display-View eine Tabbox und auf dem Smartphone soll es dann aber ein Akkordion sein. Designer halt :) Hauptsache es sieht schön aus :D Ansonsten wie gesagt sehr gute Reihe, freue mich schon auf die nächste!

Antworten
Mario Janschitz

@LittleOne … auf Seite 2 findest du ein Plugin, dass dir Tabs->Accordion und umgekehrt anbietet. :)

Antworten
Johannes Steu

Ein Off-Canvas-Menü lässt sich auch ohne JS realisieren.

Antworten
Mario Janschitz

Hallo Stolle!
Danke für deinen Kommentar, hast du auch einen Link für mich?

Antworten
Johannes Steu

Hallo,

die ganze Bewegung der DIV’s etc. funktioniert komplett mit CSS3.
Die einfachste Variante wäre in der Tat per JS die Action auszulösen, also die .click()-Action abzufragen und eine entsprechende Klasse setzen um die „Magic“ zu aktivieren.

Ohne JS würde es auch noch so gehen mit dem :target-Attribut:
http://css-tricks.com/off-canvas-menu-with-css-target/

Was auch gehen würde, aber das ist weniger elegant, ist eine Checkbox umzulabeln und dann mit der Pseudoklasse :checked weiterarbeiten.

Antworten
Mario Janschitz

Hallo Stolle, danke für deinen Einwurf, aber :target ist ein Pseudoelement und funktioniert erst ab IE9 – würde ich daher nicht einsetzen.

Eine checkbox finde ich persönlich unpassend und würde ich höchstens als „Hack“ bezeichnen.

Antworten
Johannes Steu

Ja, wie gesagt nicht ganz so schön. Aber an sich kannst du alles mit CSS3 bauen und nur das Click-Event mit JS machen (der Text liest sich als würdest du auch die Bewegung der DIV’s mit JS rendern).

Antworten
Mario Janschitz

Ah ok! Nein, ist nicht so gemeint als müsste man alles mit JS erledigen.
Sonst stimme ich dir zu.

Antworten
andreas
andreas

wo ist das problem, wenn :target erst mit ie9 geht? viel eher funktionieren media-queries auch nicht. zudem sprechen die optisch ausgelagerten navigationen eher tablet und handy an, da würde ich bezweifeln, ob da ein ie8 drauf ist.

mit checkboxen finde ich es gut, weil man sich so das „aktivieren und deaktiveren“ per js spart.

Antworten
LittleOne
LittleOne

@Mario Janschitz: Wer lesen kann ist klar im Vorteil:D Vielen Dank für den Hinweis :D

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung