Horizontale Navigation Teaser

2 neue und 1 alte Art, um horizontale Navigationen in Contao zu gestalten

Im neunten Teil unserer Artikelserie CSS-Kurs für Contao dreht sich alles um die Gestaltung von horizontalen Navigationen. Wir beschäftigen uns mit den alten und neuen Möglichkeiten eine horizontale Navigationen zu gestalten und stellen euch ihre Vor- und Nachteile vor.

Beinahe jeden Tag lese ich im Contao Forum einen Eintrag zum Thema Navigationen in Contao. Von Einsteigerfragen wie „Welches Modul für welche Art von Navigation“ bis hin zu Fragen wie „Wie mache ich eine Navigation mit der Menü-Erweiterung XY responsive?“ ist eigentlich alles dabei.

Das war Grund genug für uns, das Thema Navigationen in unserem CSS-Kurs einmal näher zu beleuchten. In diesem Teil werden wir uns voll und ganz der horizontalen Navigation widmen. Wir zeigen euch ein paar Kniffe, mit denen ihr eure Navigationen leichter gestalten könnt und euch Anpassungen an den Templates ersparen könnt.

Kompass grau

Die Entwicklung der horizontalen Navigation

Horizontale Navigationen gelten heute als Standard im Webdesign. Ich erinnere mich aber noch gut an Zeiten zurück, in denen wir vorzugsweise auf vertikale Navigationen setzten. Das Hauptargument gegen horizontale Navigationen war stets:

„Und was ist, wenn noch mal ein bis zwei weitere Seiten dazukommen?“

Bei einer vertikalen Navigation hatte man das Problem in der Regel nicht, die wurde einfach nur länger. Dennoch haben sich horizontale Navigationen im Verlaufe der Zeit durchgesetzt. Auch weil wir feststellen mussten, dass es gar nicht so häufig passiert, dass noch 1-2 Menüpunkte in der Hauptnavigation dazu kamen. Im Laufe der Jahre lernten wir außerdem Websites anders zu strukturieren und fanden neue Möglichkeiten wie Dropdown-Navigationen, um mehr Navigationspunkte platzsparend unterzubringen. Heute haben Hauptnavigationen in der Regel nicht mehr als 5 oder 6 Menüpunkte, Tendenz fallend. 3 bis 5 Menüpunkte sind ideal und lassen sich auf den ersten Blick gut erfassen.

Horizontale Navigationen mit nur einer Ebene (in Contao: Stoplevel = 1 mit aktiviertem Hard-Limit) lassen sich heute sehr einfach und gleich auf mehrere Arten stylen:

Horizontale Navigation mit FLOAT

In den meisten CSS-und Contao-Büchern werden horizontale Navigationen mittels float: left; gestaltet. Und seitdem wir den IE6 nicht mehr unterstützen müssen, gehören viele damit verbundenen Probleme der Vergangenheit an (wer erinnert sich noch an den Doubled-Float-Margin-Bug?). Navigationen mittels float gelten heute als „der sichere Weg“.

Dennoch gibt es auch bei der horizontalen Navigation mithilfe von FLOAT ein bisschen was zu beachten:

  • Abstände sollten dem Anker per padding gegeben werden, damit die Click-Flächen groß genug und gut bedienbar sind
  • man sollte bei der Berechnung des padding berücksichtigen, dass Schriften in Browsern unterschiedlich gerendert werden und Menüpunkte umbrechen können
  • falls man stattdessen mit festen Weiten für Menüpunkte arbeitet, um bspw. 4 Menüpunkte über die gesamte Breite zu verteilen, sollten die Menüpunkttitel ähnlich lang sein, damit die Navigation harmonisch aussieht

Im einfachsten Fall kann eine horizontale Navigation mit Contao so aussehen:

See the Pen navigation with float: left by Dennis Erdmann (@erdmannfreunde) on CodePen.

Nachteile der horizontalen Navigation mit FLOAT

Mit einer Navigation mit gefloateten Elementen lassen sich etwa 8 von 10 aller Fälle abdecken. Mir fallen momentan nur 2 Fälle ein, in denen ich mit floating nicht weiter gekommen bin:

  1. die Navigation soll mittig zentriert sein, ohne, dass ich dem übergeordneten Container eine feste Breite gebe
  2. die Menüpunkte sollen gleichmäßig über die Seitenbreite verteilt werden, der Abstand zwischen den Punkten soll sich dynamisch berechnen

Für diese beiden Situation können wir aber schon seit längerem auf die CSS-Eigenschaft display: inline-block setzen.


Horizontale Navigation mit DISPLAY: INLINE-BLOCK

Wer sich, so wie wir, auf die Unterstützung des Internet Explorers ab Version 8 konzentriert, kann display: inline-block eigentlich immer dann einsetzten, wenn er oder sie sonst auf float: left gesetzt hätte. In unseren Tests gab es mit display: inline-block und dem IE8 erst dann Probleme, wenn man mit einer zweiten Ebene – wie zum Beispiel bei einer Dropdown-Navigation vorhanden – arbeiten wollte. Bei Firefox, Chrome und Safari funktionierte auch das meist ohne Probleme.

Wie der Name schon sagt, haben Elemente, die die Eigenschaft display: inline-block erhalten, sowohl Inline- als auch Block-Eigenschaften. Was bedeutet das konkret? Inline heißt, dass sie sich (bei genug Platz) nebeneinander anordnen und Block, dass sich ihnen weitere Eigenschaften, wie Abstände (padding) oder eine Höhe zuweisen lässt.

Also genau das, was wir für die Gestaltung einer horizontalen Navigation benötigen. Dadurch, dass sich die Elemente weiterhin wie Text-Elemente verhalten, lassen sie sich über die übergeordnete <UL> mit text-align: center zentriert anordnen.

Auch lassen sich die Menüpunkte gleichmäßig über die Breite der Seite verteilen. Dank text-align: justify und einem kleinen Kniff:

See the Pen navigation with display: inline-block by Dennis Erdmann (@erdmannfreunde) on CodePen.

Der Kniff: Um einen Text mittels text-align: justify gleichmäßig über die komplette Breite zu verteilen, muss der Text eigentlich in die zweite Zeile umbrechen. Also setzen wir über ul:after ein weiteres Element ans Ende der Navigation, was auf jeden Fall in die zweite Zeile umbricht. Dieser Trick lässt sich in etwa mit einem clearfix zu vergleichen:

.nav--justified ul:after {
  content: '';
  display: block;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

Nachteile der Navigation mit DISPLAY: INLINE-BLOCK

Abgesehen von den unvorhersehbaren, möglichen Bugs im IE8 bei Dropdown-Navigationen, hat display: inline-block aber noch einen weiteren Nachteil: ein automatischer Abstand nach jedem Element. Will/muss man diesen entfernen, kann man entweder mit einem negativen margin oder font-size: 0 arbeiten.

See the Pen navigation with display: inline-block + negativem margin by Dennis Erdmann (@erdmannfreunde) on CodePen.

Falls ihr euch wundert, warum es bei euch oder anderen Contao-Websites auch ohne einen dieser Tricks funktioniert: Wenn der HTML-Code der Navigation in einer Zeile steht, so wie bei der aktivierter Funktion Markup komprimieren, dann sind in modernen Browsern ebenfalls keine Abstände zu sehen. Mehr dazu findet ihr bei CSS-Tricks.


Horizontale Navigation mit FLEXBOX

Als ich das erste Mal von der Idee hörte, Navigation mithilfe des Flexible Box Layout zu gestalten war ich zunächst irritiert: Ist das nicht eigentlich dazu gedacht, um mehrspaltige Layouts komfortabel anzuordnen? Aber in der Beschreibung zu FLEXBOX heißt es lediglich:

„Methode, um Elemente horizontal oder vertikal zu positionieren“

Also steht auch der Gestaltung einer Navigation mittels Flexbox eigentlich nichts im Wege. Auf die komplette Funktionsvielfalt von Flexbox müssen wir dabei nicht zurückgreifen, uns reichen 2 Zeilen CSS, um den zentrierte Darstellung aus Punkt 2 mit Flexbox zu realisieren:

.nav—main ul {
	display: flex;
	justify-content: center;
}

Dadurch werden die Listenelemente nebeneinander angeordnet und die Navigation wird zentriert dargestellt. Mithilfe der Eigenschaft flex: 1 1 auto; für das Listenelement könnt ihr die Menüpunkte außerdem über die gesamte Breite verteilen.

See the Pen navigation with display: flex by Dennis Erdmann (@erdmannfreunde) on CodePen.

Der große Vorteil von Flexbox gegenüber display: inline-block ist, dass es im Gegensatz zu Variante 2 keinen Abstand zwischen den Elementen gibt, den man erst wieder entfernen muss.

Nachteile der Navigation mit FLEXBOX

Laut Can I use wird das Flexbox-Model mittlerweile von 92% aller Browser unterstützt. In Deutschland sind es sogar 96%! Das hat uns ehrlicherweise etwas überrascht. Wer allerdings (so wie wir) noch den IE8 und IE9 unterstützt, muss sich auf jeden Fall ein Fallback für den Internet Exlorer überlegen. Denkbar wäre eine Gestaltung über display: inline-block aus Punkt 2.

Unser Fazit:

Lange Zeit galt float:left als der einzig sichere Weg, um eine horizontale Navigation zu stylen. Die Methode ist zuverlässig und funktioniert in jedem halbwegs modernen Browser. Allerdings hat diese Methode auch so ihre Grenzen.

Früher hätte man dann gesagt „geht nicht“. Heute sind wir aber dank CSS3 und Flexbox in der Lage, über den Tellerrand hinauszublicken. Und mit dem richtigen Fallback spricht eigentlich nichts dagegen, neue Wege im Bereich bei der Gestaltung von horizontalen Navigationen zu gehen.

Kommentare

Kommentar von Hans-Jörg |

Zentrierung einer Navigation mit float:
Die ul der ersten Ebene erhält display: table, was unter anderem ein shrink-to-fit auslöst. Sie ist jetzt also nur noch so breit wie die enthaltenen items. Nun kann klassisch über margin: 0 auto zentriert werden.

Antwort von Dennis

Stimmt, kannte ich noch gar nicht. Bei einfachen Navigationen auf jeden Fall eine Idee. Habe es jetzt nicht in allen Browsern getestet, aber in Chrome und Safari funktionierte es ohne Probleme. Danke!

Was ist die Summe aus 8 und 4?