Ein horizontales Menü auf die gesamte Seitenbreite aufteilen

Ein horizontales Menü auf die gesamte Seitenbreite aufteilen

Wir kennen alle das Problem, die Navigation ist quer am oberen Bildschirmrand und jeder Punkt hat seine eigene ganz spezielle Breite. Nun sollen aber die einzelnen Menüpunkte gleichmäßig verteilt werden: Das erste linksbündig, das letzte rechtsbündig und dazwischen alle mit einem gleichmäßigen Abstand. Ach ja und das Menü soll auch mit allen Bildschirmbreiten funktionieren. Heute ist es selbstverständlich, dass Seiten responsiv sind
Das zu schaffen ist gar nicht so schwer, wie es am Anfang aussieht. Ich zeige dir gleich mit ein wenig HTML und CSS wie du das perfekt hinbekommst.

Eine gute Vorbereitung um ein horizontales Menü einzubauen

Bevor du etwas an deinem Theme veränderst, empfehle ich dir ein Child-Theme anzulegen. (Natürlich nur falls du noch keines hast.) Der Vorteil liegt ganz klar auf der Hand, alle Änderungen (im Quellcode oder den Stylesheets) im Child-Theme werden von einem Themeupdate nicht überschrieben. Du kannst also dein Originaltheme behalten und nach Lust und Laune am Child-Theme arbeiten ohne dass du die Änderungen vom Child-Theme verlierst.

Die Navigation in HTML

Horizontales Menü mit gleichmäßig verteilten Buchstaben als Navigation

Horizontales Menü mit gleichmäßig verteilten Buchstaben als Navigation

Die Navigation oder Menüs werden oft als als unsortierte Liste mit ul und li-Elementen ausgeführt. Semantisch ist es ja auch eine Liste, welche keine hierarchische Gliederung hat. Der Anwender kann jeden Menüpunkt auswählen, ohne andere vorher aktivieren zu müssen
Schauen wir mal mein Beispiel an. Ich hätte gerne so eine Art Index. Es soll jeder einzelne Buchstabe des Alphabets als horizontales Menü angezeigt werden und mit einem Klick auf einen Buchstaben springt man zum passenden Bereich auf der Seite. Diese Buchstaben sollen sich als horizontales Menü gleichmäßig verteilen, wie du es auf dem Screenshot hier siehst.
In HTML ist das ganz schnell zusammengebaut, wie du hier siehst.

Ein kleiner Trick

Es wird dich nicht überraschen, aber auf eine Kleinigkeit musst du aufpassen. Nach jedem li-Element kommt ein Leerzeichen und auch im letzten li-Element ist eines reingeschrieben. Ohne diese ganzen Leerzeichen klappt der CSS-Trick nicht, den wir für das horizontale Menü brauchen.

Die unsortierte Liste gleichmäßig verteilen

Ein ganz einfacher Ansatz ist die Eigenschaft text-align zu verwenden. Mit dem Wert justify wird der “unechte” Blocksatz verwendet. Dadurch werden die Zeilen auf die gesamte Breite gebracht, indem Leerzeichen zwischen den Wörtern eingefügt werden. Mit dem folgenden CSS wendest du es auf die Zeile mit den Buchstaben an.

Falls du jetzt schon die Seite im Browser angesehen hast, wirst du gemerkt haben, dass nichts passiert ist und du keine Änderung siehst. Das ist leider so! Denn der Blocksatz funktioniert nur auf ganzen Zeilen und eben nicht auf Zeilen, welche noch in derselben Zeile enden (Normalerweise sind dies, die letzten Zeilen eines Absatzes). Für unser horizontales Menü brauchen wir es aber für eine einzelne Zeile. Daher müssen wir dem Browser ein wenig unter die Arme greifen.

Die Liste in ein horizontales Menü verwandeln

Darum haben wir bei der unsortierten Liste noch ein li-Element mit der ID line angehängt. Aber die brauchen wir erst später. Denn jetzt müssen wir mal schauen, dass alle Buchstaben brav horizontal nebeneinander stehen und nicht wie üblich untereinander. Dazu passen wir unser CSS an und verwenden die display-Eigenschaft und deaktivieren gleichzeitig die Aufzählungszeichen der unsortierten liste.

Der Trick mit dem CSS

Jetzt stehen zwar alle Elemente hübsch nebeneinander, aber eben ohne Abstand. Wie wir gehört haben funktioniert der Blocksatz erst ab zweizeiligen Text oder eben mit ganzen Zeilen. Eine Lösung wäre einfach ein br-Element einzufügen. Aber einerseits ist das nicht sehr schön und andererseits auch ein semantisch falscher Markup.

Daher haben wir am Ende der Liste in spezielles Element mit der ID line eingefügt. Dieses nutzen wir jetzt um sozusagen eine zweite Zeile zu erzeugen. Wir stellen die padding-left-Eigenschaft einfach auf 100%. Damit rückt es von links über die gesamte Seitenbreite und wird damit automatisch in die nächste Zeile verschoben. Dadurch stehen die vorhergehenden Listenelemente aber in der ersten Zeile und der Blocksatz wird angewendet.

Jetzt ist das gleichmäßig verteilte horizontale Menü fertig und es sind nur ein paar Zeilen HTML (die man so oder so braucht) und eine paar Zeilen CSS gewesen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Blogheim.at Logo