Navigation mit ausklappender Zusatzinfo – ohne JavaScript

Hin und wieder kann es vorkommen, dass man erklärende Infos zu einem Navigationspunkt weitergeben möchte. Oder einfach noch ein wenig Werbung für die zu erwartenden Inhalte machen will. Das kann man prima ohne JavaScript mit ein wenig CSS erreichen. Ich habe drei unterschiedliche Varianten in einem Codepen zusammengestellt. Als Basis für die Gestaltung habe ich die Standard-Dateien von YAML – meinem bevorzugten Framework – genutzt. Schliesslich kommt es im Wesentlichen auf die Umsetzung der Funktionalität, nicht auf das konkrete Design an.

See the Pen Navigation with additional infos on hover – stripped down by Jens Grochtdreis (@jensgro) on CodePen

In allen drei Varianten wird beim Überfahren des Listenelementes – nicht des darin enthaltenen Links – ein zusätzlicher Text eingeblendet. Ich habe diesen mittels der YAML-Klasse ym-hideme aus dem Viewport geschoben und nicht mittels display: none ausgeblendet. Dadurch ist der Zusatztext Screenreadernutzern grundsätzlich zugänglich. Es geht hier ja nur um einen visuellen Effekt. Diese Klasse arbeitet mit position:absolute, um den zu versteckenden Text aus der Sicht zu schieben. Und hier setzt der Unterschied der ersten beiden Vorschläge an.

Denn beim Überfahren eines Listenelements werden die Positionierungskoordinaten des Zusatztextes verändert. left: 100% sorgt dafür, dass der Zusatztext direkt an die Navigation anschliesst. Der Verzicht auf einen Pixelwert macht die Lösung flexibel. Sie kann in fixen, aber auch in fluiden oder responsiven Layouts eingesetzt werden. Durch die absolute Positionierung ist der Orientierungsrahmen wichtig. Ein absolut positioniertes Element orientiert sich nach dem nächsten Elternelement, dass eine andere Positionierung als static hat. Elegant löst man dieses Problem meist mit position: relative.

In der ersten Varianten wird der Liste position:relative zugewiesen, in der zweiten Variante ist es das Listenelement selber. So hängt in der ersten Variante der Text also immer ob an der Navigation. Das lohnt sich speziell für längere Texte. Bei der zweiten Version hängt der Text direkt am Navigationspunkt und macht so seine Zugehörigkeit für die Nutzer sehr deutlich. Die dritte Version ist komplett anders. Hier realisiere ich durch left: 0 und einem position: relative auch für den eingeblendeten Container, dass der Text direkt unter innerhalb der Navigation als Ergänzung zum Navigationspunkt erscheint.

Um das Einblenden ein wenig angenehmer zu gestalten, habe ich Transitions genutzt. Alte IE werden diese nicht anzeigen, das Ausklappen funktioniert trotzdem. Wegen der Animation war es mir wichtig, die Hintergrundfarbe nicht wie bei den anderen beiden Lösungen auf den Zusatztext zu legen, sondern auf das aktivierte Listenelement. So gibt es keine leichte Verzögerung, bis man die Hintergrundfarbe sieht, die Animation wirkt dadurch viel angenehmer.

Wen der SCSS-Code nicht interessiert, der kann sich auch das resultierende CSS leicht anschauen. Einfach am rechten unteren Ende des SCSS-Tabs auf „View Compiled“ klicken und das resultierende CSS wird angezeigt. Alternativ auf „Edit und Codepen“ klicken und dann im CSS-Tab auf das Wort „CSS“ klicken. Auch dann wird das SCSS in CSS umgewandelt.

Übrigens habe ich auch eine Seite erstellt, die die Techniken im Zusammenhang eines Gridsystems zeigen. Denn es stellt sich ja die Frage, ob die nach rechts ausragenden Layer nicht mit anderen Informationen auf der Seite kollidieren. Der Praxistest zeigt, dass da kein Problem entsteht.

4 Kommentare

  1. Navi 1 und 2 sind recht brauchbar, Navi 3 ist mit Mausbedienung leider nicht ganz so gut nutzbar: wenn ein aktiver Menüpunkt (hier: Wirtschaft) zwischen zwei :hover-Menüpunkten liegt (und beim Bewegen des Mauszeigers von oben nach unten).
    Wird das Ende des Startseite-Infobereichs (Übergang zum aktiven Menüpunkt) erreicht und klappt wieder ein, klappt kein weiterer :hover-Bereich aus und der Mauszeiger steht am Ende des gerade noch sichtbaren Infobereichs, nun allerdings außerhalb der Navigation (da der aktive Menüpunkt keinen Infobereich enthält).

  2. Kurze Anmerkung zur Barrierefreiheit:

    1) Einen :focus-Pseudoselektor mit einem li-Element zu benutzen bringt für Tastaturbediener in der Regel nichts, da lis keinen Fokus erhalten können¹. So ist der Zusatztext nicht zu sehen. Eine Lösung ist nun den adjacent sibling selector (Direkt-folgendes-Geswister-Selektor) zu nutzen um bei einem :hover/:focus des a-Elements den Hinweistext anzuzeigen. (Codebeispiel auf Codepen)

    2) Du gehst davon aus, dass ein Screenreader-Nutzer die Texte in den li-Elementen sequentiell mitliest. Im Normalfall springen Screenreader-Nutzer allerdings in Navigationen von Link zu Link. Da die Zusatzinformationen außerhalb des Links sind werden sie nicht angesagt.

    Hier besteht nur die Möglichkeit den gesamten Zusatztext in das a-Element einzuschachteln² (was ja dank HTML5 kein Problem mehr ist)³. Hier ist abzuwägen ob die Zusatzinformationen wirklich entscheidend für das Auswählen eines Navigationspunktes sind oder ob man gerade Screenreader-Nutzer nicht ohne der Zusatzinformation ein schnelleres Navigieren ermöglicht. (Codebeispiel auf Codepen)

    ¹ Außer man fügt ein tabindex=0 hinzu, was dann aber in diesem Fall bedeuten würde, dass der Fokus erst auf dem li und nach einem erneuten drücken der Tabulator-Taste dann auf dem innen liegenden a stehen würde.

    ² Natürlich nur, wenn der Zusatztext selbst keine Links enthält.

    ³ Alternativ wäre natürlich auch möglich ARIA-Attribute wie aria-describedby zu nutzen.

    • Danke, Eric, für die Detailinfos. Ich finde ja alle drei Varianten nicht so prall, wollte aber einfach mal die Versionen zur Diskussion stellen bzw. demonstrieren, was geht. Plädierst Du eher für die ARIA-Version? Oder wäre nicht doch eine JS-getriebene Variante besser, bei der die Tastaturnutzer besser bedient werden und den Screenreadernutzern dynamisch mittels ARIA geholfen wird? Dann wäre es auch nur konsequent, die Inhalte sogar mittels display: none; auszublenden, um die Inhalte auch vor Screenreadern zu verstecken. Oder?

      • Wie immer kommt es drauf an was man bezwecken möchte und viele Wege führen nach Rom.

        Ich würde mich bei kurzen Zusatztexten für die Verschachtelung im a entscheiden (schon alleine weil der Text dann auch anklickbar ist), bei längeren für die Variante mit dem Geschwisterselektor.

        Ein kleines JavaScript das erlaubt kurz aus dem Menü herauszufahren ohne dass es zuklappt ist auch sinnvoll.

        Ich persönlich bin kein Fan von ARIA wenn es Möglichkeiten gibt ein gleichwertiges Ergebnis ohne zu erreichen.