Bernd: Navigation unterstreichen

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?

  1. 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

    --
    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
    Toller Dampf voraus von Terry Pratchett

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

    1. @@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?

      Screenshot aus Entwicklertool zeigt: transition-property und transition-duration gesetzt

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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?

        Screenshot aus Entwicklertool zeigt: transition-property und transition-duration gesetzt

        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

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
  2. @@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 }

    Screenshot aus Entwicklertool

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

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory