Die Idee ist: so viele Navigationselemente anzeigen, wie horizontal passen, mit einem UI-Toggle, um den Rest anzuzeigen. Ich mag die Idee. Warum alles hinter einem Toggle verstecken, wenn Platz ist, um die wichtigsten Links freizugeben? Wie es aussieht und wie es implementiert wird, kann variieren. Schauen wir uns einige Beispiele an!
Laut diesem Brad Frost Beitrag wurde dieses Muster von Michael Scharnagl geprägt, und hier ist die visuelle Demo
Das Muster fand seinen Weg in Brads Responsive Patterns
Siehe den Pen Priority+ Navigation von Brad Frost (@bradfrost) auf CodePen.
In dieser Demo springt die Navigation entweder von der Anzeige aller Links zur Anzeige von nur dreien mit einem "Mehr"-Link.
Die ganze Idee für diesen Beitrag stammt von einem kleinen Gedanken, bei dem ich mich fragte, ob es einen einfachen CSS-Weg gibt, um Navigationselemente nur dann vom Rand "abfallen" zu lassen, wenn Platz ist, und sie hinter einem Menü-Toggle verschwinden zu lassen. Meine Idee war, die Navigation mit einer festen Höhe und verstecktem Überlauf zu versehen und sie einrücken zu lassen. Wenn ein Navigationselement umbrach, würde es visuell verschwinden. Hier ist dieses Konzept
Siehe den Pen Drop Away Nav von Chris Coyier (@chriscoyier) auf CodePen.
Der Toggle ist in diesem Fall ein Drei-Linien-Menü-Navicon, aber er könnte leicht "Mehr" sagen oder ein "+" oder was auch immer sein. Er wird auch mit JavaScript ausgelöst, könnte aber leicht JavaScript-frei sein, indem man den Checkbox-Hack verwendet.
Das Einzige, was mir an dieser Technik nicht gefällt, ist die feste Höhe. Das ist immer ein Warnsignal in CSS. Wenn Text beteiligt ist, wird es ein wenig wie eine magische Zahl. Das wird ein wenig dadurch gemildert, dass man es in em oder rem einstellen kann, so dass es mit zunehmendem Text zunimmt. Aber trotzdem.
Eine Alternative, wenn Sie mehr JavaScript in Kauf nehmen, wäre, die Breiten jedes Navigationselements zu summieren und mit der verfügbaren Breite zu vergleichen. Wenn die Summe zu hoch ist, verstecken Sie Menüelemente hinter dem Toggle, bis die restlichen passen.
Ben Callahan hat mir einige Beispiele in freier Wildbahn gezeigt. Hier ist eines auf NCSBN.org
Luke Jacksonn hat eine Demo gemacht, die er "Greedy Navigation" nennt. Interessant, wie es weiß, wie viele Navigationselemente verborgen sind.
Siehe den Pen Greedy Navigation von lukejacksonn (@lukejacksonn) auf CodePen.
AWS implementiert das Muster ebenfalls, wie von Tom Horton implementiert
John Oxton King entwarf eine interessante Variante des Musters, die er "Infinite horizontal navigation" nannte
Es gibt die Meinung, dass The Guardian möglicherweise das erste Beispiel dafür war. Sehen Sie
Benutzen Sie es? Lieben Sie es? Hassen Sie es?
Interessantes Konzept. Mein einziges Problem mit dem Konzept ist, ob die Leute verstehen werden, auf die drei Striche (oder das Hamburger-Symbol oder Navicon oder wie auch immer man es nennen will) zu klicken. Ich mag das letzte Beispiel mit der Zahl, obwohl ich meiner Meinung nach das Wort "mehr" hinzufügen würde.
Eine weitere Option, die ich gesehen habe, ist, dass die Haupt-Navigationslinks so wie in diesen Beispielen dargestellt sind, aber die zusätzlichen Menüpunkte in einem seitlichen Flyout-Menü sind. Das setzt natürlich voraus, dass Sie das Menü manuell aufteilen, anstatt es nach Bedarf automatisch einklappen zu lassen.
Ich denke, für diese Art der Navigation würde ich anstelle des Hamburgers einen Ellipsenpunkt in Betracht ziehen.
Ich denke, ich würde es mit "···" (3x
·-ähnliches Symbol) testen. Diese Art von Navigation hat tatsächlich etwas Zugkraft auf Android :-)Das Designmuster hat Potenzial, aber ich glaube nicht, dass es ein gutes responsives Design schlägt. Mir fällt nur ein Anwendungsfall ein, bei dem es besser sein könnte, die "Prioritätsnavigation" zu verwenden, nämlich wenn die Seite in eine andere Website gezogen wird (vielleicht als Artikel oder in einem iFrame).
Ich stimme Jesse zu, die Verwendung eines Ellipsenpunkts anstelle macht, dass der Benutzer zum Ansehen von mehr klickt
Ich habe kürzlich ein ähnliches Konzept für die neue Menünavigation auf einer Website implementiert, an der ich arbeite. Ich habe das Projekt auf CodePen, wenn Sie es sich bisher ansehen möchten
http://codepen.io/RYJASM/pen/OVLRvZ
Für mein Menü, da alles nach rechts gefloatet war, habe ich die Position des ersten Menüelements von links zu seinem Elternelement verwendet. Es klappt auch in ein mobiles Menü ein. :)
Posten Sie es einfach, Mann!
Ausgezeichnetes Beispiel. Ich habe kürzlich an einem Projekt gearbeitet, bei dem dies eine großartige Lösung gewesen wäre.
Werde dies auf jeden Fall beim nächsten Projekt ausprobieren. Daumen hoch. +1
Schön, Ryan, mir gefällt, wie das Logo „seinen Rock hochhebt“, wenn sich das Menü auf extrem kleinen Bildschirmen öffnet…
Atg
„Benutzen Sie es? Lieben Sie es? Hassen Sie es?“
Offensichtlich Gewinnt Immer http://www.lukew.com/ff/entry.asp?1945
Habe das zuerst auf der Website von Virgin America gesehen. Nicht ganz die exakte Lösung, aber sie ist auch sehr modular in der Art, wie sie skaliert.
Habe es so (mit dem Burger für mehr) in einigen Projekten implementiert. Ich denke, so sollte das Web heute funktionieren.
Chris, man kann dasselbe ohne JavaScript und CSS-Media-Queries machen, siehe http://kizu.ru/fun/chevron/ (leider ist es nicht der sauberste Trick
...</span></span></span></span></span></span></div></div></div></div>).Es ist ein schöner Trick, aber ich wäre vorsichtig, dass die Option die Entscheidungsfindung rund um die Informationsarchitektur in den früheren Phasen nicht beeinträchtigt.
Toller Tipp!
Das ist unheimlich, weil ich letzte Nacht bis spät aufgeblieben bin und über eine gute Lösung nachgedacht habe, um den Hamburger zu ersetzen. Also habe ich die obere Leiste auf 5 unserer beliebtesten Links fixiert und auf der rechten Seite einen Hybrid-Hamburger, der statt der Mittellinie "mehr" anzeigt. Ich schätze, kluge Köpfe denken gleich. :) Ich muss nur noch sehen, ob es eine gute Idee ist.
Danke für die Hervorhebung von AWS! Obwohl ich derjenige war, der darauf hingewiesen hat, geht die Ehre an einen anderen unserer Ingenieure, Greg Stallings (ganz zu schweigen von unseren Design- und UX-Teams).
Toller Artikel!
Tolle Idee. Ich habe oft festgestellt, dass Menschen unterschiedliche Vorstellungen davon haben, welche Links wichtig sind.
Ähnlich wie bei einer Nav, die ich vor einiger Zeit erstellt habe: http://martinblackburn.github.io/responsive-nav/
Interessante Ideen, und nicht, dass ich es falsch meine, die Lösungen sind nicht kurz an cleverness und Kreativität.
Aber ich bin ehrlich gesagt unentschlossen bei den vorgeschlagenen Lösungen, aus zwei Gründen
1- Dieses Navigationsmuster ist der perfekte Kandidat für eine Flexbox-basierte Lösung, also warum nicht seine Kraft nutzen? Flexbox-Unterstützung ist 100%: http://caniuse.com/#search=flexbox.
Hier ist, wie ich es machen würde
http://codepen.io/ricardozea/pen/022b38c6c395368ec4befbf43737e398
Und…
2- Lukes „Offensichtlich Gewinnt Immer“ (http://www.lukew.com/ff/entry.asp?1945) sagt alles.
Guter Artikel zu Punkt 2. Er unterstützt meine Idee mit dem Top-Charms-Menü, das ich erstellt habe, und den neuen Vorschlägen zur Navigationsarchitektur, die ich für die Website gemacht habe.
Ich habe die Kommentare poliert und einen separaten Pen für das collapsing menu navigation Beispiel erstellt, das ich zuvor gepostet habe
http://codepen.io/RYJASM/pen/ZGEMLq
Die Flexbox-Unterstützung ist definitiv nicht 100%.
@Halley Carleton, sicher ist sie das, lass mich dir zeigen
Klicke hier: http://bit.ly/1E9FCx8
Und hier: http://i.imgur.com/tin3YVW.png
:]
Ich sehe viel Rot/Orange unter IE, das scheint keine 100% zu sein.
Außerdem machen Sie mit Ihrer Flexbox-Lösung die letzte Option größer, was für mich Priorität bedeutet. Wenn es eine höhere Priorität hat, warum steht es dann bei größeren Größen am Ende der Liste?
@Thomas Horton, das Rot/Orange in IE liegt außerhalb des Geltungsbereichs dieser Lösungen und von Flexbox. Der aktuelle Stand der Browser sagt etwas anderes.
Hmm, interessante Ansicht, dass der letzte Link in der Navigation mehr Bedeutung hat. Größer bedeutet nicht zwangsläufig höhere Bedeutung, schließlich spielen auch Position und Ort eine Rolle im Konzept der Hierarchie, und dieser letzte Link ist unter den anderen.
Aber ich verstehe Ihren Punkt, der sicherlich gültig ist. Also habe ich die Reaktionsfähigkeit der Nav basierend auf Ihrer Idee verbessert (riesigen Dank dafür übrigens), schauen Sie sie sich an: http://codepen.io/ricardozea/pen/022b38c6c395368ec4befbf43737e398
Wie wäre es mit der Verwendung von
nth-child-Selektoren für diesen Zweck? Kombiniert mit dem Checkbox-Hack wird es ziemlich einfach.Ich habe eine Demo gemacht.
Schauen Sie sie sich an - http://codepen.io/abhisack/pen/jPPXBB
@Ricardo: Das Lesen von caniuse muss immer im Kontext erfolgen. Sie behaupten, 9 von 9 Kästchen seien 100%. 9 von 9 bedeutet die neuesten Browser. Wenige Projekte können IE10 und darunter ignorieren. Und was ist mit Android 4.x, das ein erhebliches Publikum hat? Da es hier um responsive Navigation geht, können viele Projekte auch das nicht ignorieren. Und dann gibt es noch das Problem von 2 (oder 3) verschiedenen Syntax-Versionen für Flexbox.
Also nein, so einfach ist das nicht.
@Ferdy, ich verstehe, was Sie sagen, aber ich denke, Sie sind verwirrt.
Diese Lösung ist nur für mobile Browser, IE9 und darunter gehören nicht zu diesem Umfang. Daher gelten die hier angebotenen Lösungen oder die Verwendung von Flexbox nicht für diese Browser.
Was IE10 und Android 4.x betrifft, funktioniert Flexbox mit den Präfixen
-ms-und-webkit-zu 100%. Ich gehe davon aus, dass Sie Autoprefixer verwenden, um Vendor-Präfixe und alte Flexbox-Syntax zu automatisieren.Andererseits muss man sich die Analysen ansehen, um festzustellen, wie viel Traffic von mobilen IE10 (was ich, wenn überhaupt, als minimal bezeichnen würde) und Android 4.x kommt. Was Android 4.x betrifft, so zeigen unsere Analysen, dass die Leute Chrome mehr als den Standardbrowser nutzen und die Nutzung mit jeder Periode zunimmt.
Ich wollte in keiner Weise irgendeinen Browser ignorieren, ich meinte einfach, dass moderne Browser eine 100%ige Unterstützung für Flexbox haben.
Im schlimmsten Fall können die hier angebotenen Lösungen tatsächlich als Fallback betrachtet werden, falls Flexbox nicht unterstützt wird und Sie die alte Syntax vermeiden möchten.
Ehrlich gesagt, für mich ist das wirklich ganz einfach.
An Flexbox ist in seinem aktuellen Zustand absolut nichts einfach. Es sei denn, Sie möchten sich mit Polyfills, Präfixen und all dem auseinandersetzen. Definitiv möglich.
Mein größerer Punkt ist, dass diese Lösung NICHT nur für mobile Browser ist. Jedes Navigationsmuster im responsiven Bereich ist für ALLE Browser. Das ist der Sinn von Responsive überhaupt.
@Ferdy, ich bin mir nicht sicher, warum Sie denken, dass Flexbox derzeit nichts Einfaches hat, wenn alle modernen Browser grüne Kästchen in den caniuse.com-Ergebnissen haben. Ich sehe den „halb vollen“ Teil.
Es gibt keine Notwendigkeit für Polyfills, um Flexbox zu verwenden. Flexie macht die Dinge nicht einfacher, also muss man diesen Weg nicht gehen, besonders wenn es nur darum geht, die Syntax von 2009 zu unterstützen. Es gibt auch kein produktionsreifes Polyfill für die neueste Syntax. Ich sehe auch keine anderen Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#flexible-box-layout-spec
Diese Lösungen sehen besonders für mobile Browser gut aus: Die Gespräche hier drehen sich darum, wie die Lösungen auf kleinen Bildschirmen funktionieren.
Ich empfehle einen Blick auf Zoe Gillenwaters Vortrag auf der SmashingConf Oxford 2015: Enhancing Responsiveness with Flexbox – https://vimeo.com/124796320 (beginnen Sie die Wiedergabe bei 2:35).
Und schließlich ist „responsiv“ nicht ausschließlich an ALLE Browser gebunden. Vergessen Sie E-Mail-Clients nicht, für die wir auch „responsive“ machen.
Dies ist eine großartige Lösung für Websites mit dynamischer Navigation, bei denen Sie nicht wissen, wie viele Links es geben wird. Die Links mit höherer Priorität bleiben am Anfang der Liste und die weniger wichtigen Links werden in einen „+ mehr“-Link verschoben. Es ist nicht ideal, aber es ist eine gute Lösung für ein schwieriges Problem. Eine Website namens PamperPad macht etwas sehr Ähnliches, ähnlich dem ersten gegebenen Beispiel.
http://www.pamperpad.com