Discussion :

[nicolas2603]

Bonjour,

Je chercher à mettre en place un dropdown menu en css3, qui affiche les sous-menus au survol, mais qui offre un delay à l'utilisateur avant de disparaître lorsque le curseur ne survole plus. Je me tourne donc naturellement vers la propriété transition-delay, que je règle à 1 seconde pour le masquage, et 0 seconde pour l'affichage.
Cela fonctionne bien, en partie : si je quitte le survol du <menu ul ul>, il met bien une seconde à disparaître, comme c'est spécifié dans le paramètre. Mais si je passe d'un <ul> à un autre, le sous-menu s'ouvre immédiatement tandis le sous-menu de l'autre menu reste affiché pendant une seconde, et donc il y a conflit visuel à l'écran.
Est-il possible de faire en sorte que le délai de masquage d'une seconde ne soit appliqué que lorsque le survol n'est pas sur un autre menu ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#menu ul ul {
  position: absolute;
  left: -9999px;
  width: 100%;
  opacity: 0;
  border-bottom:3px solid #85c551;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition-delay:1s;-webkit-transition-delay:1s;-moz-transition-delay:1s;-ms-transition-delay:1s;-o-transition-delay:1s;
}
#menu ul ul li {
  float: left;
  position: relative;
}
#menu > ul > li:hover > ul {
  left: 0;
  top: 40px;
  opacity: 1;
  transition-delay:0s;-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;
}
</style>

Merci d'avance.

[Invité]

bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#menu ul ul {
  position: absolute;
  left: -9999px;
  width: 100%;
  opacity: 0;
  border-bottom:3px solid #85c551;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 6px rgba(0,0,0,.2);
}
 
#menu:not(:hover) ul ul {
  transition-delay:1s;-webkit-transition-delay:1s;-moz-transition-delay:1s;-ms-transition-delay:1s;-o-transition-delay:1s;
}

[nicolas2603]

Alors là moi je dis "chapeau bas" !!
Merci, ça fonctionne exactement comme je le souhaitais, je ne connaissais pas du tout cette possibilité