Anzeige
Anzeige
News
Artikel merken

Drop-Down-Menüs: 5 moderne Alternativen für eine perfekte Nutzerführung – auch mobil

Mit moderneren Websites und immer moderneren Design-Methoden verschwindet auch das klassische Drop-Down-Menü mehr und mehr. Wir zeigen euch fünf Alternativen, die sich jedem Design anpassen.

Von Jessy Kösterke
3 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: barrelandcrow.com)

Das Drop-Down-Menü mag für manche nicht mehr zeitgemäß sein, gravierender aber ist: Es ist ungeeignet auf kleinen Screens wie zum Beispiel dem Smartphone. Benutzer wollen eine Navigation, die einfach zu bedienen und auf die nötigsten Funktionen beschränkt ist. Eine Navigation, die unabhängig vom Endgerät ist und überall gleich funktioniert. Doch wie lässt sich das umsetzen? Wir schauen uns heute deshalb fünf Alternativen zum klassischen Drop-Down-Menü.

Anzeige
Anzeige

Diese Alternativen eignen sich natürlich nicht für jeden Anwendungsfall – meistens sind sie auf wenige Menüpunkte beschränkt. Damit ein Menü nicht zu voll wird oder zu gequetscht wirkt, empfehle ich entweder eine Sitemap – oder, weniger relevante Menüpunkte in den Footer zu verschieben.

1. Das Parallax-Menü

(Screenshot: barrelandcrow.com)

(Screenshot: barrelandcrow.com)

Ob als Parallax-Effekt oder feste Ebenen, das Menü wird in Kategorien aufgeteilt und nimmt die ganze Seite ein. Es ist kein Untergang wenn nicht alle Menüpunkte auf den ersten Blick ersichtlich sind, Benutzer scheuen sich nicht davor zu scrollen – ganz im Gegenteil. Dadurch hat das Parallax-Menü einen großen Vorteil auf kleineren Screens wie Smartphones.

Anzeige
Anzeige

Aber ganz ohne Hilfe sollte man seine Besucher dann doch nicht stehen lassen. Ein kleiner Hinweis durch Icons sollte symbolisieren, wie es weiter geht oder was der Benutzer zu tun hat. Ebenso sollten die einzelnen Abschnitte sichtbar voneinander getrennt und die Klickbereiche über das ganze Feld gelegt sein.

Anzeige
Anzeige

2. Das Hamburger-Menü

True lässt den Inhalt von rechts einfahren. (Screenshot: true.agecy)

True lässt den Inhalt von rechts einfahren. (Screenshot: true.agecy)

Ja – Das umstrittene Hamburger-Menü. Spätestens seitdem die meisten Websites responsive sind und in mobiler Version gut aussehen, ist das Hamburger-Menü-Icon kein fremdes Symbol mehr. Wer das Menü nicht auf Anhieb findet, wird ausprobieren – das liegt schließlich in unserer Natur. Und keiner schreibt vor, dass das Icon aus drei waagerechten Strichen bestehen muss, man findet es inzwischen in den verschiedensten Variationen.

(Screenshot: tschibo.de)

Um Platz zu sparen, setzt Tchibo einfach das Wort „Menü“ mit in das Burger-Icon.(Screenshot: tchibo.de)

Ob der Inhalt hinter dem Menü nun von links, rechts, oben, als listenartige Aufzählung oder in Kreisen daher kommt, ist euch überlassen. Hamburger-Menüs schaffen Platz und geben dem Benutzer nur eine Möglichkeit. Und: Es funktioniert auf allen Geräten. Wie ihr diese leckere Hamburger Animation umsetzt, erfahrt ihr in diesem Artikel.

Anzeige
Anzeige

3. Das Raster-Menü

drop-down-alternative-katvig

Katvig integriert Bilder und einfache Animationen um Aufmerksamkeit zu erlangen. (Screenshot: katvig.dk)

Das Card-Design wird schon an vielen Orten im Web genutzt, warum nicht auch das Menü im Card-Design gestalten – wenn es die Menüpunkte und das Design möglich machen? Eine Aufteilung erfolgt in einem Raster mit verschiedenen Kästchen – und zwar so, dass der Besucher durch jede Karte auf eine andere Seite geleitet wird – wie bei einem Menü auch. Die Idee ist so einfach und intuitiv, dass jeder Besucher in der Lage ist zu navigieren – und mit Bequemlichkeit zu seinem Ziel gelangt.

Aufgrund der flexiblen Kästchen rutschen sie, je nach Größe des Endgeräts, in die richtige Position und sehen in jeder Auflösung gut aus. Um Aufmerksamkeit auf die einzelnen Bereiche zu lenken, kannst du mit Texten, Farben, Bildern und Videos spielen.

4. Fixiertes Menü

(Screenshot: t3n.de)

(Screenshot: t3n.de)

Einfach und benutzerfreundlich: Gerade wo der Trend zu langen One-Page-Seiten tendiert, helfen die fixierten Menüleisten deinen Besuchern, sich einfach durch die Website zu bewegen – eine einfache Menüleiste mit den wichtigsten Menüpunkten, die an relevanter Stelle fixiert wird. Die meisten fixierten Menüleisten sind erst etwas höher und schrumpfen dann beim Scrollen ein wenig zusammen.

Anzeige
Anzeige

Diese Variante ist eine der benutzerfreundlichsten Methoden. Natürlich kann man das in der mobilen Version nicht immer genauso umsetzten. Aber es gibt einige Methoden, wie das horizontale Scrollen, die ein fixiertes Menü weiterhin möglich machen.

(Screenshot: apple.com)

Apple hat in der mobilen Version die zweite Ebene in ein horizontales Menü verstaut, indem von horizontal gescrollt wird. (Screenshot: apple.com)

5. Das vertikale Seiten-Menü

(Screenshot: twitter.com)

(Screenshot: twitter.com)

Zwei der wohl bekanntesten Websites nutzen es – Facebook und Twitter. Gerade für Websites mit vielen Ebenen bietet sich eine solche Seiten-Navigation an. Beide Websites packen wichtige Inhalte in die Seiten-Navigation. Die schlichte und schlanke Übersicht ist optimal, um einfache und vor allem viele Textelemente auf einen Blick darzustellen.

Es ist dabei natürlich dir überlassen, ob sich die Navigation rechts oder links befindet, beides hat Vor- und Nachteile und hängt von der Gesamtaufteilung ab. Grundsätzlich sollte man nicht darüber nachdenken, ob das eine vom anderen Elemente ablenkt. Sieh es als Ganzes: Das eine Element vervollständigt das andere.

Anzeige
Anzeige

Und wie löst du dein Menü in Zeiten mobiler Seiten und Burger-Menüs?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
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

Benny1721

Wir sind auch seit einiger Zeit am Überlegen was wir an unserer Seite auf http://solutionsforweb.de besser machen. Gerade Nr. 2, das Hamburger Menü, hat es mir angetan und wird gleich morgen mal umgesetzt :)

Antworten
Dirim Media Webdesign- & Werbeagentur

Toller Beitrag! :) Das Raster-Menü kannte ich noch nicht, ist aber eine schöne und übersichtliche Alternative. Mein Favorit ist jedoch das fixierte Menü, damit kann man nichts falsch machen, weil es benutzerfreundlich und übersichtlich ist. :)

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige