it-swarm.com.de

Responsive Secondary Menu

Ich habe ein Layout ähnlich dem folgenden Screenshot. Wo das Top-Navi mit Twitter reduziert wird Bootstrap Nav kollabiert. Außerdem habe ich ein sekundäres Menü unter der Navigationsleiste auf der linken Seite, das für die Navigation wichtig ist.

Welches ist der beste Weg, um dasselbe auf Bildschirmen in Tablet- und Telefongröße zu geben?

screenshot

11
Harsha M V

Erstaunlich, wie ich noch nie über dieses Rätsel nachgedacht habe, aber es ist faszinierend. Hier sind die möglichen Lösungen, die ich finden könnte:

Zwei Menüschaltflächen
Mein erster Gedanke war, das U-Boot links von der Leinwand zu entfernen. Sie haben rechts eine Menüschaltfläche für ein Dropdown-Menü der Hauptnavigation und links eine Menüschaltfläche für die Off-Canvas-Nebennavigation. Aber das ist das ganze Problem, es bleiben zwei verschiedene Menüstile übrig, was zumindest verwirrend ist. Sie können dies mit einem sekundären Header und einem weiteren Dropdown-Menü lösen.

Navigation zusammenführen
Mein zweiter Gedanke war, die beiden Navigationen zusammenzuführen. Sie können dies tun, wenn es eine klare Hierarchie mit dem übergeordneten Link in der Hauptnavigation und allen untergeordneten Links in der Nebennavigation gibt. Die Struktur sieht ungefähr so ​​aus:

Dashboard
    Account
    Subscription
    Billing information
    Account members
    Careers page
    etc.
Candidates
Agenda
Reports
Activity

Dies funktioniert nicht, wenn die Links im Subnav nichts mit den Links im Hauptnavigationssystem zu tun haben. Dies wäre jedoch meine Wahl und würde sogar empfehlen, Ihre Navigationsstruktur zu überarbeiten.

Subnav sichtbar lassen
Die letzte Lösung, die ich mir vorstellen kann, besteht darin, das Subnav auf der Seite sichtbar zu lassen, es aber in eine horizontale, kleinere Navigation zu ändern. Dadurch wird mehr Abstand zwischen dem Inhalt und dem Hauptheader mit dem Hauptmenü hergestellt, sodass dies für Sie möglicherweise nicht vorzuziehen ist.

Hier ist eine weitere Lektüre:
Responsive Design Pattern für die sekundäre Navigation - gibt es eine Möglichkeit, den Benutzer nicht zu überfluten?
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

8

Eine Lösung wäre, das primäre Navigationssystem wie derzeit geplant zu reduzieren und die sekundären Navigationselemente einfach zu stapeln.

enter image description here

Der Grund für diesen Ansatz liegt darin, dass die meisten dieser Elemente wie Texteingabe, Dropdown-Liste, Speichern usw. mit zahlreichen Aktionen verbunden sind. Sie möchten die wenig verfügbaren Immobilien nutzen, die Sie jedoch zulassen Der Benutzer muss sich jeweils auf eine Sache konzentrieren.

3
jnmnrd