Responsive Navigationsmenü, Gegenstände "unter einander"

Question

Ich hoffe, dass jemand mich mit dem, was ich mir erhoffe, in die richtige Richtung lenken kann. Ich erstelle eine responsive Website und habe ein traditionelles Navigationsmenü mit mehreren Elementen im oberen Bereich.

Ich brauche für dieses Menü, um zu schrumpfen, wenn die Seite schmaler wird, aber anstatt das Navigationsmenü brechen Ich möchte für die Elemente, die nicht passen, unter eine "Mehr ..." Dropdown-Registerkarte gehen. Macht das Sinn? Hier ist eine grafische Darstellung ...

So ist die obere Bild wäre, was es mit 1024 Breite aussehen könnte, und unten ist die 768 Breite.

Der Inhalt im Menü ist unbekannt, so dass die Breiten variieren würden, also müsste ich die Breite der kombinierten Links berechnen und dann würde alles, was mehr ist, unter das Dropdown-Menü Mehr gelegt werden.

Alle Tipps würden sehr geschätzt werden, nur nicht sicher, wo im Moment zu starten.

Dank

Answer 1

Hier ist eine schöne jQuery-Plugin, das das Problem lösen kann: https://github.com/352Media/flexMenu

Auch sicher sein, einen Schritt-für-Schritt bietet einen großen Artikel zu überprüfen, Anweisungen, wie diese Art von flexiblen Navigation zu organisieren, um das oben genannte Flexmenü mit Plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/

Answer 2

Ich glaube, meine Variante ein Ausgangspunkt für Sie sein kann. Ich bin ein Neuling in jQuery und eine Menge selbst bin Lernen - so jemand, fühlen Sie sich frei zu korrigieren (und verbessern) meine Methode oder meine Logik :)

Mein Ausgangspunkt ist hier: http://jsfiddle.net/skip405/yN595/1/

Um es zu sehen In Aktion müssen Sie die Größe des Ergebnisfensters so ändern, dass 3 oder 4 Elemente in einer Reihe (nicht 7) vorhanden sind, und drücken Sie erneut Ausführen. Schwebe über More, um den Rest von ihnen zu sehen.

In dieser Geige berechne ich die Breite der Listenelemente in einer Schleife und vergleiche sie mit der Breite des gesamten Menüs. Wenn die berechnete Breite der Artikel höher wird als die des Menüs, können wir die Anzahl der sichtbaren li s im Moment ermitteln.

Hinweis: Dieser Code funktioniert auf document.ready und funktioniert noch nicht bei der Größenanpassung des Fensters. Drücken Sie also Run, wenn Sie die Größe des Fensters für jetzt ändern.

Answer 3

Die Implementierung ist recht einfach, wenn das Menü statisch sein kann und nicht angepasst werden muss, wenn das Fenster in der Größe geändert wird; Das Beispiel von @ skip405 ist in diesem Fall eine wirklich gute Lösung (+1).

Wenn die Implementierung das Menü dynamisch an der Fenstergröße anpassen muss, wird es schwierig, ... Das window.onresize Ereignis wird häufig ausgelöst, während der Benutzer das Browserfenster skaliert, also eine naive Implementierung (z. B. @ skip405 Ansatz ausgeführt jedes Ereignis) wäre zu langsam/teuer.

würde ich das Problem lösen, wie folgt:

1. berechnen und fügen Sie am Anfang die äußere Breite aller Links auf.
2. Alle verfügbaren Links an die Registerkarte "more" anhängen (Cloning), damit sie dynamisch ein- und ausgeblendet werden können. Dies ist viel schneller als das Erstellen neuer (bzw. zerstörender) DOM-Elemente.
3. Binden Sie einen Handler an das Ereignis onresize. Ermitteln Sie im Handler die aktuelle Menübreite und vergleichen Sie sie mit der Breite der Links.Blenden Sie alle Links aus, die nicht in das Menü passen, und zeigen Sie deren Gegenstücke im Tab "more" an. Das gleiche gilt umgekehrt für Links, wenn das Menü breit genug ist.

Hier ist meine Implementierung: http://jsfiddle.net/vNqTF/

Gerade die Größe des Fensters und sehen, was passiert. ;) Beachten Sie, dass die Lösung natürlich noch optimiert werden kann - es ist nur ein Beispiel.