it-swarm.com.de

Responsive Menü mit vielen Menüpunkten

Wir haben ein ansprechendes Menü, das auf Mobilgeräten nur die Menüelemente der obersten Ebene (x8) anzeigt, auf dem Desktop jedoch auch Hover-Dropdowns mit Servicebereichen innerhalb des übergeordneten Menüelements.

Das Problem ist, dass wir die Fähigkeit benötigen, eine andere Navigationsebene mit den tatsächlichen Diensten in diesem Bereich anzuzeigen.

Hier ist der Link: http://www.irwinmitchell.com

Ein Beispielszenario wäre:

Personal Legal Services
  >  Administrative & Public Law
       -  Disability Law
       -  Education Litigation
       -  Prison Law
       -  Professional Regulation and Discipline
       -  Social & Healthcare Law

Eine solche Struktur muss also für alle Servicebereiche innerhalb der Hauptnavigation angezeigt werden.

Wurde schon einmal jemand mit diesem Problem konfrontiert oder hat er Ideen, wie man am besten weitere Unterkategorien in der Navigation präsentieren kann?

12
Roy Barber

Wie andere bereits betont haben, haben Sie ein riesiges Menü, und unabhängig davon, wie Sie es gestalten, verlieren Sie wahrscheinlich Kunden, die nicht mühsam 20 Menüpunkte durchlesen möchten, um herauszufinden, welches für sie am besten geeignet ist.

Angenommen, Sie müssen ein 3-Ebenen-Menü haben:

Auf mobil können Sie einen Menü-Link haben, der eine scrollbare Menüliste öffnet. Wenn Sie auf eine Option klicken, schieben Sie diese Menüoptionen vom Bildschirm nach links und zeigen die Untermenüoptionen in einer anderen scrollbaren Liste an. Sie können dasselbe für eine dritte Ebene wiederholen. Solche Bildlauflisten sind auf Mobilgeräten sehr verbreitet, und diese Erfahrung ist wahrscheinlich besser und vertrauter als jede Desktop-Erfahrung, die Sie erstellen können.

enter image description here

Auf Desktop ist eine 3-Ebenen-Navigation ungewöhnlich. Wenn Websites wie Amazon, eBay, Microsoft und Apple Websites mit nur zwei Navigationsebenen erstellen können), müssen Sie sich fragen, warum Sie dies nicht können. Ich würde "Verwaltungs- und öffentliches Recht" beibehalten Es ist (als Link zu einer neuen Seite) und enthält die untergeordneten Elemente auf der neuen Seite. Wenn Sie auf Apple.com auf "Mac" klicken, werden Sie zu einer neuen Seite geführt und mit den im Wesentlichen Unterkategorien angezeigt aber als große Miniaturbilder und Text oben. Dies ist einfacher und weniger umständlich zu navigieren, als über Menüelemente und dann Untermenüelemente zu fahren:

enter image description here

Wenn Sie wirklich 3 Navigationsebenen auf dem Desktop ausführen müssen, können Sie so etwas wie Amazon ausführen, bei dem Sie mehrere Instanzen ihres "Shop by Department" haben 'für' Zuhause, persönliche juristische Dienstleistungen, geschäftliche juristische Dienstleistungen, unsere Mitarbeiter usw. '. Klicken Sie also auf einen Hauptmenüpunkt und sehen Sie eine einzelne Spaltenliste mit kleiner Zeilenhöhe zum schnellen Scannen. Bewegen Sie den Mauszeiger über einen dieser Punkte, um ein anderes Untermenü auf der rechten Seite zu sprengen.

enter image description here

7
mattdempseycom

Mehrstufige Dropdowns sind eine technische Lösung für das Problem, dass zu viele Menüelemente vorhanden sind. Die beste Lösung für das Problem besteht darin, zunächst die Menüstruktur zu vereinfachen. Wenn Sie wirklich so viele Menüelemente benötigen, ist es wahrscheinlich besser, sie mithilfe von Untermenüs aufzuteilen.

Ich stelle mir komplexe Navigation gerne als Führer in einem Kaufhaus vor. Sie schlagen Sie nicht mit einer Liste aller Artikel im Laden. Wenn Sie hineingehen, erhalten Sie nur die oberste Navigationsebene. Herrenbekleidung, Haushaltsgeräte, Einrichtungsgegenstände usw. Bei der Navigation zu diesem Abschnitt erhalten Sie eine weitere Navigation innerhalb der Kategorie. Hemden, Anzüge, Hosen usw.

Ein solches Muster ermöglicht es einem Benutzer, sehr schnell korrekte Entscheidungen zu treffen und diese anschließend zu verfeinern, wodurch er von der Notwendigkeit entlastet wird, die Option every zu verarbeiten, bevor die entsprechende ausgewählt wird. Machen Sie es dem Site-Besucher einfach, lassen Sie ihn nicht nachdenken (zu viel).

3
Seth Warburton

Ich würde das ähnlich sehen wie das Überqueren eines Baumes. Auf jedem Knoten können Sie die untergeordneten Knoten anzeigen oder zum übergeordneten Knoten zurückkehren, um die Geschwister anzuzeigen. Wenn Sie Ihre Navigation so präsentieren, müssen Sie auf keiner Seite eine zweite Tiefenstufe anzeigen. Möglicherweise sind mehr Benutzerklicks erforderlich, da der gesamte Navigationsbereich nach und nach angezeigt wird. Bei kleinen Formfaktoren sollte dies jedoch gut funktionieren. Ich denke, meine kurze Antwort ist, dass Sie kein hierarchisches Menü präsentieren sollten, wenn Sie nicht den Platz haben, um es zu unterstützen.

Übrigens hoffe ich, dass jemand anderes auf diese Frage antwortet und mir das Gegenteil beweist, indem er einen wirklich eleganten Weg zeigt, dies zu tun.

1
EricM

Wenn Sie sich das Menü "Durchsuchen" unter dem folgenden Link ansehen, werden Sie am Ende jeder Liste einen Link "Mehr anzeigen" sehen. Wenn Sie darauf klicken, werden alle Links für den angegebenen Abschnitt angezeigt.

http://artsy.net/

Ich frage mich, ob Sie die untergeordneten Links mit einem ähnlichen Ansatz anzeigen könnten, vielleicht mit einem Schubladenumschalter.

0
superUntitled

Ich habe reaktionsschnelle Lösungen für Dropdowns und Mega-Menüs für ein bevorstehendes UI-Framework erstellt, das ich veröffentlichen werde. Nachdem ich mir Ihre Implementierung angesehen habe, würde ich Folgendes vorschlagen, basierend auf meiner eigenen Arbeit:

  • Bewegen Sie die mobile Menüleiste an den Anfang der Seite. Es muss nicht repariert werden, sollte aber das oberste Element der Benutzeroberfläche sein. Wenn dies behoben ist, lassen Sie das Scrollen bei der Menüerweiterung zu, kehren Sie jedoch zu fest zurück, wenn es geschlossen ist.
  • Bewegen Sie die Menüschaltfläche nach rechts und fügen Sie links in der Menüleiste eine kleine Version Ihres Logos hinzu. Entfernen Sie entweder die Suche, integrieren Sie sie in das Menü oder geben Sie ihr einen eigenen erweiterbaren Bereich, der durch eine Schaltfläche in der Menüleiste ausgelöst wird.
  • Die anfängliche Ansicht des erweiterten Menüs kann ähnlich sein wie die, die Sie haben, aber ich würde es 100% breit machen und die Pfeile um 90 Grad drehen, so dass sie nach unten zeigen. Nur Menüpunkte mit Untermenüs sollten Pfeile haben.
  • Fügen Sie dem übergeordneten Menüelement ein Klickereignis hinzu, um das Untermenü umzuschalten. Das Untermenü sollte zumindest sichtbar eingerückt sein und es kann hilfreich sein, eine andere Farbe zu erstellen.
  • Ich würde nicht empfehlen, mehr als eine Untermenüebene für Desktop oder Mobile zu haben.
  • Es darf jeweils nur 1 Untermenü angezeigt werden.

Hier ist ein Beispiel von dem, was ich getan habe, mit einer Erklärung unten:

responsive dropdown showcase

  1. Die normale Desktop-Funktionalität.
  2. Das Menü wird auf dem Handy reduziert und durch eine Menütaste ersetzt.
  3. Wenn Sie auf die Menüschaltfläche klicken oder sie berühren, wird das Menü erweitert. (Die Menüschaltfläche wird nicht angezeigt, da über diesen drei viel mehr Menüelemente vorhanden sind.)
  4. Wenn Sie auf das Dropdown-Menüelement klicken oder es berühren, wird es ebenfalls erweitert.
0
Virtuosi Media