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.