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.

Themenüberblick:

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:

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.

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:

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.

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.