Umfangreiche Seitennavigation automatisch verkleinern

0

Vor einigen Wochen habe ich mein WordPress-Theme bei WordPress eingereicht und gestern wurde ein Review durchgeführt, bei dem ein Problem mit der Navigation beanstandet wurde. Auf dieses Problem möchte ich in diesem Artikel eingehen, da es einem bei der Entwicklung einer Webseite zwangsläufig irgendwann über den Weg laufen wird. Die Rede ist von der Seitennavigation, die aufgrund vieler Einträge entweder sehr unübersichtlich aussieht oder sogar das gesamte Design oder Layout der Seite beschädigt. Eine sehr elegante Lösung für diese Problem werde ich Ihnen nun präsentieren.

1) Das Problem mit überfüllten Menüs

In meinem Theme sah das oben beschrieben Problem wie auf dem unten stehenden Bild aus. Sobald sich zuviele Elemente in der Navigationsleiste befanden, wurden diese in einer neuen Zeile unterhalb der anderen Menüpunkte angezeigt. Das ist weder sonderlich schön noch funktionell.

Werden zuviele Elemente in der Navigation angezeigt, brechen einige Elemte in eine neue Zeile um.

2) Lösung des Problems mithilfe von Javascript

Zur Lösung dieses Problems habe ich ein einfaches Javascript geschrieben, das sie unten sehen. Im Wesentlichen prüft das Skript zunächst, ob das Menü eine vorgebene Maximalbreite überschreitet. Ist das nicht der Fall, passiert weiter nichts. Enthält das Menü jedoch sehr viele Menüpunkte (wie auf dem Bild oben), so wird ein neuer Menüpunkt mit einer Ellipse (“…”) erstellt, unter dem später die übrigen Menüpunkte zu finden sein werden. Damit das funktioniert, verschiebt das Skript den Menüpunkt links des neu erstellten Menüpunkts so, dass es zum Untermenü des Menüpunkts “…” wird. Das Skript wiederholt diesen Vorgang so lange, bis das Menü wieder schmaler als die vorgebene Maximalbreite ist.

$(document).ready(function(){
	
	// Maximalbreite in Pixel festlegen
	var width = '720';
	
	// falls das Menue breiter als der obige Wert ist...
	if($('.nav-wrapper').width() > width){
		
		// ...erstelle einen neuen Menuepunkt "..."
		$('.sf-menu').append('<li class="menu-item more-item"><a href="#">...</a><ul><li class="more-item destination"></li></ul></li>');
		
		// Verschiebe solange Menueelemente in den Menuepunkt "..." bis das Menue schmaler als die Maximalbreite ist
		$('.menu-item').each( function(){		
			if($('.nav-wrapper').width() > width){
				$('.more-item').prev().appendTo(".destination");
			}			
		});

	}

});

Durch den Einsatz des Plugins ergibt sich das Ergebnis, das Sie auf den nachfolgenden Bildern sehen. Die ehemals vollwertigen Menüpunkte werden nun zu Untermenüs des Menüpunkts “…”. Trotzdem sind die Untermenüs der ehemaligen Toplevel-Menüpunkte noch als Menüpunkte im nächsttieferen Level erreichbar.

Seitennavigation mit dynamisch erstelltem Menüpunkt “…”

Sofern Sie das Skript für Ihr Projekt verwenden möchten, sollten Sie darauf achten, dass Sie die Bezeichnungen der Elemente innerhalb des Skripts für Ihre Anwendung anpassen. Andernfalls wird das Skript nicht funktionieren.

3) Fazit

Die oben vorgstellte Lösung ist vor allem dann interessant, wenn Sie eine Seite für einen Kunden, eine große Community oder unerfahrene Nutzer entwickeln, die unter Umständen nicht darauf achten, welche Elemente Sie in ihrer Navigation anzeigen. Unschöne Bugs sind in den meisten Fällen die Folge. Durch das vorgestellte Skript beugen Sie diesem Problem vor und erlauben das Hinzufügen sehr vieler Navigationselemente.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.