NEU: Entdecke unser neuestes Contao Theme LASR mehr erfahren

CSS Kurs Contao Teil 11 Teaser

Benutzerfreundliche Dropdown-Navigationen in Contao gestalten

Sie haben viele Namen: sie heißen Suckerfish-, Superfish-, Dropdown-Navigation oder einfach Aufklappmenü. Aber wie man sie auch nennt, sie alle haben eines gemeinsam: sie kombinieren Haupt- und Unternavigation, bei der das Untermenü entweder bei mouseover oder per click/tap angezeigt wird.

Immer wieder lese ich im Contao-Forum, wie Nutzer zu dieser oder jener Contao-Extension greifen, um eine Dropdown-Navigation zu realisieren, die sie auch mit ein paar Zeilen CSS hinbekämen. Versteht mich nicht falsch, ich habe nichts gegen diese Erweiterungen. Nur oftmals führen sie, gerade in Zeiten von Responsive Webdesign, zu ganz neuen Problemen, die ohne sie gar nicht entstanden wären.

Im vorletzten Teil unseres CSS-Kurses für Contao wollen wir uns daher die Navigation vornehmen, die Contao-Nutzern die größten Probleme bereitet. Wir zeigen euch, wie ihr sie nur mit CSS und ohne Contao-Extensions oder Javascript realisieren könnt.

Dropdown-Navigation in Contao gestalten

Ich erinnere mich noch gut, als ich im Jahr 2008 das erste Mal eine relativ aufwändige Dropdown-Navigation mit 4 Ebenen in Contao realisierte. Sie funktionierte. Aber rückblickend betrachtet war die Navigation sowohl von der Bedienung, als auch von der Gestaltung mit CSS her eine Katastrophe.

Da ich in CSS den Kind-Selektor (ul.level_2 > li) nicht kannte, war ich in meiner Dropdown-Navigation vor allen Dingen damit beschäftigt, Stylings für die 1. Ebene in der 2. und 3. Ebene wieder zu zurückzusetzen. Über 300 Zeilen CSS waren nötig (300 Zeilen auch dank Hintergrundbildern, da Verläufe und CSS3 noch Zukunftsmusik waren), bis meine Dropdown-Navigation so funktionierte, wie sie sollte.

Freese Holz Navigation

Die Website von FREESE HOLZ hat zwar mittlerweile einen neuen Auftritt bekommen, aber glücklicherweise gibt es noch einen funktionierenden Screenshot in der Waybackmachine, falls ihr selbst mal gucken und testen wollt.

Heute setzen wir Dropdown-Navigationen immer seltener um. Doch wie es der Zufall so will, bekamen wir Anfang April von einer Agentur den Auftrag, eine Website mit Dropdown-Navigation in Contao zu realisieren.

Und obwohl seit meiner ersten Dropdown-Navigation in Contao 7 Jahre(!!!) vergangen sind, standen wir dennoch vor 2 Fragen:

  1. Subnavigation bei Click oder Hover öffnen?
  2. Welche Eigenschaft nutzen wir zum Ausblenden der Subnavigation?

1. Click oder Hover?

Die Frage hätte auch Javascript oder kein Javascript lauten können? Denn eine Dropdown-Navigation per Click zu öffnen, lässt sich nur mit JS realisieren. Da in unserem Fall auch die Menüpunkte, die die Navigation aufklappen, Inhalte enthielten, fiel für uns die Click-Lösung raus. Welcher Nutzer käme schon auf die Idee, den Menüpunkt ein zweites Mal zu klicken, nachdem sich beim ersten Klick das Menü geöffnet hat ?! Bei Touch-Geräten sieht das schon anders aus.

Apropos Touch-Geräte: Wer eine Website responsive gestaltet, dem raten wir, ebenfalls von fertigen Javascripts Abstand zu nehmen. Denn die werden gerne mal unberechenbar auf Smartphones und Tablets, wenn sich die Gestaltung der Navigation verändert.

2. Unterschiedliche Methoden zum Ausblenden der Subnavigation

Als ich meine erste Dropdown-Navigation 2008 umsetzte, hatte ich die Wahl zwischen display: none und left: -9999em und entschied mich für die falsche Methode. Ich wusste nicht, dass die meisten Screenreader Inhalte ignorieren, wenn sie per display: none ausgeblendet werden (oder ich wusste es, aber es war mir egal). Und auch Nutzer, die die Tab-Taste zum navigieren verwenden, haben Schwierigkeiten die Untermenüpunkte aufzurufen.

Wer stattdessen mit left: -9999em die Subnavigation ausblendet, ist auf der sicheren Seite. Screenreader können mit der Methode sehr gut umgehen und lesen die Unternavigation vor. Für Tab-Nutzer funktioniert die Navigation ebenfalls. Allerdings hat das Ausblenden über die Eigenschaft left auch einen Nachteil: Wenn zum Einblenden left: auto benutzt wird, lassen sich Navigationen nicht über CSS3-Transitions animieren.

Deswegen werden viele Dropdown-Navigationen heute mit visibility: hidden und beispielsweise opacity: 0 realisiert. Über opacity und transition wird die Unternavigation elegant und weich ein- und ausgeblendet. Die Eigenschaft visibility ist zusätzlich notwendig, damit die Unternavigation nicht nur transparent, sondern auch wirklich ausgeblendet ist.

Leider ist es mit visibility: hidden das gleiche wie mit dispay: none. Viele Screenreader lesen Unternavigationen nicht vor, wenn diese über visibility ausgeblendet werden.

Deswegen haben wir uns bei unserem aktuellen Projekt zum Ausblenden der Unternavigation über max-height: 0 entschieden, mit der selbst der IE8 zurechtkommt. Bei :hover wird die Navigation dann über max-height: 100% eingeblendet.

Unsere Empfehlungen für Dropdown-Navigationen

Verwendet den Kind-Selektor

Mit dem Kind-Selektor, zum Beispiel ul > li könnt ihr die direkten Kinder eines übergeordneten Elements ansprechen. Und dann der in Contao vorhandenen Klassen wie .level_1 könnt ihr die Listenelemente der Ebenen individuell über beispielsweise ul.level_1 > li gestalten.

Horizontale und vertikale Navigationen kombinieren

Wenn eure Hauptnavigation horizontal ausgerichtet ist, sollte eure Subnavigation vertikal ausgerichtet sein. Bei zwei horizontalen Navigationen hat der Nutzer oft das Problem, dass er über Hauptmenüpunkte „hovert“, wenn er einen der äußeren Untermenüpunkte erreichen will, so wie bei PIWIK:

Piwik Navigation

Hover-Navigation über MAX-HEIGHT

Wenn ihr eine einfache Dropdown-Navigation, die sich bei :hover aufklappt realisieren wollt, braucht ihr weder Javascript, noch eine extra Contao-Erweiterung. Es reicht, wenn ihr diese Anweisungen verwendet:

.nav--main .level_2 {
   position: absolute;
   left: auto;
   max-height: 0;
   z-index: 1001;
}

.nav--main .submenu:hover .level_2 {
   max-height: 100%;
}

Über CSS3 und beispielsweise opacity könnt ihr die Navigation dann langsam ein- oder ausblenden.

Tipps zur Verbesserung der Bedienbarkeit

Mein erstes Dropdown-Menü hat mich immer ein bisschen an meine Anfänge mit Windows 98 und speziell an das Startmenü erinnert. Über 3 oder mehr Ebenen musste man peinlichst genau darauf achten, dass man mit dem Cursor nicht den Menübereich verlässt. Sonst hat es sich direkt wieder zugeklappt und man musste von vorne beginnen.

Auf der Suche nach einer Lösung für das versehentliche Verlassen der Unternavigation, so gesehen ein Hover-Out, fand ich zwei interessante Ansätze:

1. Über PADDING versehentliches Hover-Out verhindern

Der Trick ist eigentlich ganz einfach. Dadurch, dass die Navigation meist als Block erkennbar ist, weiß der Nutzer ziemlich genau, in welchem Bereich er sich mit dem Cursor bewegen darf, damit die Navigation nicht zuklappt. Was aber, wenn der Bereich eigentlich ein bisschen größer ist?

Wenn wir es schaffen, die Gestaltung des Untermenüs auf die Listenelemente zu verlagern, können wir der ungeordneten Liste ein „unsichtbares“ padding geben. Der Nutzer hat dann noch ein paar Pixel mehr, bevor er die HOVER-Zone verlässt und sich das Menü zuklappt. Wieviele Pixel das genau sind, hängt letztendlich auch von der Größe der Navigation ab. 10 Pixel rundherum sind aber ein guter Richtwert.

See the Pen dropdown-navigation mit visibility by Dennis Erdmann (@erdmannfreunde) on CodePen.

2. Über verzögertes Zuklappen Hover-Out verhindern

Weiter oben erwähnte ich ja, dass sich über CSS3-Transitions Navigationen animieren lassen. Aber transition lässt sich nicht nur für ein paar nette Animationen nutzen, über transition-delay können wir auch die Bedienbarkeit einer Navigation verbessern.

Mit folgenden Anweisungen geben wir dem Nutzer noch ein bisschen Zeit, mit dem Cursor in den Bereich zurückzukehren und das Ausblenden zu verhindern, sollte er die Navigation versehentlich verlassen:

.nav--main .level_2 {
position: absolute;
left: auto;
z-index: 1001;

opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.2s 1s, max-height 0s 1.2s;
}

.nav--main .submenu:hover .level_2 {
opacity: 1;
max-height: 100%;
transition-delay: 0s;
}

See the Pen dropdown-navigation mit max-height und transition-delay by Dennis Erdmann (@erdmannfreunde) on CodePen.

Schon ganz gut. Nun störte mich lediglich, dass das verzögerte Ausblenden auch beim Wechsel zwischen Hauptmenüpunkten zu sehen war. Aber mit einem kleinen Trick, kann man die Transition abbrechen. Es muss nur mindestens 1 Pixel Abstand zwischen den Hauptmenüpunkten sein und ihr könnt die Animation hiermit abbrechen:

.nav--main:hover .level_2 {
   transition: none;
}

Einziger Haken an dieser Navigation: Sie funktioniert nur in modernen Browsern (IE ab Version 10), die auch CSS3-Transitions unterstützen.

See the Pen dropdown-navigation mit max-height und transition-delay by Dennis Erdmann (@erdmannfreunde) on CodePen.

Mega Menüs

Um ehrlich zu sein: Ich halte nicht viel von Mega Menüs, wie sie zum Beispiel SONY benutzt.

Navigationen müssen für mich schlank und einfach zu bedienen sein. Bei vielen Mega Menüs sieht es aber eher so aus, als wollte das Unternehmen protzen und behaupten „Schaut her, wie viele Seiten ich habe“. Die meisten Nutzer sind mit Mega Menüs schlichtweg überfordert (Stichwort: Paradox of Choice). Daher setzen wir bei sehr umfangreichen Seiten lieber auf Bild+Text-Navigationen, in denen man auch ein paar Worte zu den einzelnen Unterseiten und den zu erwartenden Inhalten sagen kann.

Eine größere Herausforderung wird es sicherlich auch, ein Mega Menü für Smartphone-Bildschirme fit zu machen. Denn dann müssen die vielen Menüpunkte und Zusatzinformationen gut aufbereitet werden, damit der Nutzer sich in der Navigation zurechtfindet.

Unser Fazit:

In der heutigen Zeit solltet ihr euch gut überlegen, wann die Verwendung einer Dropdown-Navigation sinnvoll ist. Inhalte, die ihr früher auf 3-4 Unterseiten verteilt hättet, könnt ihr heute auch bedenkenlos auf einer Seite platzieren, denn der Nutzer hat sich daran gewöhnt mehr zu scrollen.

Wenn ihr euch doch dazu entschließt, eine Dropdown-Navigation zu verwenden, achtet dennoch darauf die Navigation so einfach wie möglich zu halten. Das heißt im besten Fall, nur eine zweite Ebene zu nutzen. Mit zusätzlichem Padding oder einem verzögerten Zuklappen der Navigation könnt ihr dann noch die Bedienung einer Dropdown-Navigation deutlich verbessern.

Kommentare

Kommentar von Philipp |

Wie immer lesenswert. Danke für den Tipp mit dem max-height für das Ein- und Ausblenden von Untermenüs. Kannte ich noch nicht.
Witzig: Freese Holz aus Bordesholm, habe ich gleich erkannt, da im Nachbardorf. Erst dann auch gelesen, dass es so ist.

Antwort von Dennis

Moin Philipp,

ja Freese Holz war Kunde der ersten Stunde. Der Relaunch hat die Besucherzahlen vervielfacht. Mittlerweile werden sie aber von einer Agentur aus HH betreut. Freut mich, wenn du etwas aus dem Artikel mitnehmen konntest :-)

Kommentar von Rocco |

Eine sehr tolle Variante, vor allem weil sie ohne JS auskommt. Leider funktioniert es bei mir nicht wenn der Layout-Builder aktiviert ist. Nur über den Umweg, dem "max-height" in .nav--main .submenu:hover .level_2 eine Pixel-Angabe zu geben. Aber dies ist sicher nicht der Sinn dahinter ... Naja, evtl. bekomme ich es durch rumfrickeln doch noch auf die Reihe. Ansonsten super Seite mit tollen Tipps zu Contao!
LG

Antwort von Dennis

Das ist interessant. Habe es mal mit den CSS-Anweisungen aus dem Layout-Builder ausprobiert und da geht es noch. Du könntest mal probieren, ob vielleicht auch die Stelle, an der du die Navigation verwendest (Kopfzeile vs. Hauptspalte) eine Rolle spielt.

Ansonsten gerne mal einen Link per Mail schicken, dann kann ich mal einen Blick drauf werfen.

Kommentar von Torsten |

Hallo Dennis,

vielen Dank für diesen Artikel. Mit diesen Infos konnte ich die Navigation der Seite, die du mir redesigned hast, um ein Dropdown erweitern.

Gruß!

Torsten

Kommentar von Hinreiner |

Erst mal, super Artikel.
Ich habe ein kleines Problem.
Wenn ich das Dropdownmenu mit "position:absolute;" einstelle, ist es der richtigen Position, aber es wird nur ein Menüpunkt angezeigt. Start & Stop in Conato = 0. Bei "position:relative" erscheinen zwar alle Menüpunkte, aber die Position passt nicht mehr.
Würde mich über eine Idee freuen.
Danke und weiter so.

Antwort von Dennis

Moin Hinreiner,

schau mal ob deine Navigation vom übergeordneten Container abgeschnitten wird. Wenn deine Navigation beispielsweise im Header ist, sollte #header, #header .inside und die Navigation kein overflow: hidden haben. 

Ansonsten kann ich mir das auch anschauen, wenn du eine online eine Demo hast. Sende mir dafür einfach eine Nachricht per Mail.

Kommentar von Chris |

Hallo, ich stolpere gerade über die ID NAV, in Contao seht immer ID .level_1 und class=level_1, wie ändert man gerade dort die class auf nav--nav ?
Viele Grüße
Chris

Antwort von Dennis

Moin Chris,

du kannst dem Frontend-Modul Navigation eine eigene ID und Klasse geben. Dafür gibt es in Contao 2 eigene Felder in den Experten-Einstellungen.

Viele Grüße,
Dennis

Kommentar von Andreas |

"der Kind-Selektor funktioniert nur bei Elementkombinationen" - Dies kann so nicht stimmen. '.level_1 > li' spricht die gleichen Elemente an wie 'ul.level_1 > li'. Zweiterer ist nur ein wenig stärker.

Antwort von Dennis

Moin Andreas,

danke für den Hinweis. Ich kann das heute auch nicht mehr nachvollziehen, aber ich meine es gab da mal einen Schwäche in einer älteren IE-Version. Ich habe den Hinweis entfernt.

Bitte addieren Sie 9 und 3.