Verzögerungen mittels CSS3 transitions

25.10.2013, 13:00 von Daniel || 0 Kommentare || Mit anderen teilen

Gerade bei großen und verschachtelten Drop Down-Menüs kann es schnell nervig werden, wenn man aus Versehen mit der Mouse den sensitiven Bereich verlässt und alle Ebenen wieder eingeklappt sind. Eine kurze Verzögerung schafft hier Abhilfe.

Menüs, die mittels reinem CSS gebaut werden, hatten in dieser Hinsicht bisher einen großen Nachteil. Verzögerungen beim Verlassen des Menüpunktes ließen sich nicht per CSS, sondern höchstens per Javascript nutzen. Das ändert sich nun zum Glück dank der CSS3 Transitions.

Die Syntax

transition:all 150ms ease-in-out 500ms;

Während die ersten drei Angaben mittlerweile bekannt sein dürften, beschreibt der vierte Wert die Dauer der Verzögerung (delay). Im Beispiel entsprechen 500ms also einer halben Sekunde, die auch mit 0.5s oder kurz .5s angegeben werden kann.

Im Falle eines Menüs kann man also folgende CSS-Angaben setzen:

#mainNav ul,
#mainNav a {
  display:block;
  transition:all 150ms ease-in-out 500ms;
}

Dabei macht es Sinn, die Transitions bei der Liste als auch den Links einzusetzen. Nutzt man die Transitions nur für die Listen, tritt folgender Effekt auf: Das Einblenden der Untermenüs wird animiert; die Veränderungen, die man mittels :hover auf die Links vornimmt, werden nicht animiert, was sehr unschön aussehen kann.

Delay nur beim Verlassen des sensitiven Bereichs

Ein weiteres Manko obiger Angabe ist, dass die Verzögerung auch beim Einfahren der Mouse angewendet wird. Die halbe Sekunde aus dem obigen Beispiel tritt also auch beim Mouseenter-Event auf. Dem kann man aber mit einer weiteren CSS-Regel entgegen wirken:

#mainNav li:hover > a,
#mainNav li:focus > a,
#mainNav li:hover > ul,
#mainNav li:focus > ul {
  transition-delay:0ms;
}

Der Trick dabei ist, den Wert von transition-delay auf 0s zurück zu setzen, wenn es einen :hover gibt. Dadurch greift die Verzögerung nur, wenn man das Menü mit der Mouse wieder verlässt. Einfach, aber effektiv.

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare



Nutze Deinen Gravatar.


Bitte addieren Sie 1 und 5.