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.
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:
- Subnavigation bei Click oder Hover öffnen?
- 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:
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.
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 Erdmann
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 Erdmann
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 Erdmann
Moin Hinreiner,
schau mal ob deine Navigation vom übergeordneten Container abgeschnitten wird. Wenn deine Navigation beispielsweise im Header ist, sollte
#header,#header .insideund die Navigation keinoverflow: hiddenhaben.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 Erdmann
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 Erdmann
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.
Kommentar von Wanst |
Hallo Dennis, können wir mal etwas näher auf die Navigation per Tastatur eingehen? Du hast das im ersten Absatz unter 2. kurz angerissen, aber das nicht weiter ausgeführt. Relevanz hat das für mich wegen der Barrierefreiheit, die ja immer wichtiger wird.
In dem Beispiel hier und auch in deinen Themes scheint das genauso gut oder schlecht zu funktionieren wie bei mir auch: Wenn ich mich mit der Tab-Taste durchklicke, schaffe ich es zwar gerade noch mit '.level_1 a:focus + .level_2', dass sich das Menü öffnet, aber sobald ich weiter "tabbe", schließt es sich wieder, weil 'a' den Fokus wieder verliert (aber nur 'a' bekommt den Fokus, ich kann die Öffnung der Untermenüs nicht den 'li's überlassen, dann passiert gar nix).
Ich schiebe das auf die Aufteilung der HTML-Navigations-Elemente in Contao, da
'ul.level_1 > li > ul.level_2'
als sibling neben
'ul.level_1 > li > a'
liegt und nicht darin (also etwa so:
'ul.level_1 > li > a > ul.level_2'
).
Bevor ich jetzt aber das Navigationstemplate beackere, fällt dir noch eine CSS-Lösung dafür ein?
Antwort von Dennis Erdmann
Sorry für die späte Antwort. Ich kann den Fehler nachvollziehen, finde aber leider keine Lösung.
Kommentar von Marion |
Hallo Dennis,
vielen Dank für den hilfreichen Artikel, gerade auch die Sache mit den Kind-Selektoren.
Mittlerweile bin ich der Ansicht, dass ein Klick-Menü in Sachen Barrierefreiheit doch besser sein könnte, weil viele motorisch eingeschränkte Menschen eine Hover-Navigation nicht so gut bedienen können, auch Ältere z. B..
Hast Du einen Tip, wie man eine bestehende Hover- in eine Klick-Navigation ändern kann? Gibt es da ein Script/eine Erweiterung in Contao?
Grüße
Marion
Antwort von Dennis Erdmann
Moin Marion,
ich kenne keine Erweiterung, die „nur“ das macht. Aber es wäre mit ein paar Zeilen Javascript zu lösen. Ich habe diese Lösung (in einer noch etwas aufwändigeren Version) bei diesem Projekt umgesetzt:
Gemeindediakonie Lübeck
Wenn du an einer Individuallösung interessiert bist, dann melde dich gerne: Kontakt
Kommentar von Marion |
Hallo Dennis,
eine sehr schöne und klare Seite! Ebenso die Navi. Danke für Dein Angebot, ich suche erstmal im Forum nach der Ergänzung.