Navigation unterstreichen

[Bernd]

Hallo,

auf einer Demo Seite habe ich eine schöne Navigation gefunden:
http://impreza6.us-themes.com/gallery/

Wenn ich mit der Maus über einen Punkt fahre, wird es langsam unterstrichen. Leider sehe ich mit den Entwicklertools nicht wie dieses aufgebaut wurde. Könnt ihr da etwas erkennen?

[Auge]

Hallo

auf einer Demo Seite habe ich eine schöne Navigation gefunden:
http://impreza6.us-themes.com/gallery/

Wenn ich mit der Maus über einen Punkt fahre, wird es langsam unterstrichen. Leider sehe ich mit den Entwicklertools nicht wie dieses aufgebaut wurde. Könnt ihr da etwas erkennen?

Ich kannm aus der Taqtsache, dass sich bei mir nichts tut ^[1], zumindest schließen, dass der Effekt mit JavaScript realisiert wird. Der Effekt sollte sich aber auch mit CSS erzielen lassen.

/* das Aussehen in den verschiedenen Zuständen */
a {
  text-decoration: none;
}
a:focus, a:hover, a:active {
  text-decoration: underline;
}
/* die Animation */
a, a:focus, a:hover, a:active {
  transition: text-decoration ease 1.5s;
}

Die Details zu Transitionen findest du in unserem Wiki. Falls du, wie anzunehmen ist, weitere Fragen dazu hast, frage bitte in diesem, deinem Thread.

Tschö, Auge

---

1. Auf mir unbekannten Seiten lasse ich JavaScript nicht zu. ↩︎

[Gunnar Bittersmann]

@@Auge

Ich kannm aus der Taqtsache, dass sich bei mir nichts tut [^1], zumindest schließen, dass der Effekt mit JavaScript realisiert wird. Der Effekt sollte sich aber auch mit CSS erzielen lassen.

Hm, wird er das nicht?

LLAP 🖖

[Auge]

Hallo

Ich kannm aus der Taqtsache, dass sich bei mir nichts tut [^1], zumindest schließen, dass der Effekt mit JavaScript realisiert wird. Der Effekt sollte sich aber auch mit CSS erzielen lassen.

Hm, wird er das nicht?

Ohne JS tut sich dort überhaupt nichts. Ich hab' mich mal getraut, JS von der ausliefernden Domain auf der Seite zu aktivieren. Und siehe da, die Transition der Linkdarstellung läuft nun ab. Ich habe jetzt aber nicht weiter in irgendwelche Quelltexte geschaut, um sagen zu können, mit dieser oder jener Funktion wird der Effekt erzielt.

Tschö, Auge

[Gunnar Bittersmann]

@@Bernd

auf einer Demo Seite habe ich eine schöne Navigation gefunden:
http://impreza6.us-themes.com/gallery/

Über Schönheit lässt sich (nicht) streiten. Was für die einen „schön“ sein mag, ist für die anderen schlicht unbedienbar. Wie diese Navigation.

Bei Navigation per Tastatur sieht man nicht, wo man gerade ist (d.h. welches Element gerade fokussiert ist). Und zwar wegen a { outline: 0 }

Merke: Niemals outline entfernen, wenn man :focus nicht anderweitig sichtbar macht!

LLAP 🖖