Transitions et IE9

**StripMat** · 23/01/2015, 15h56

Bonjour,

J'ai créé des menu avec sous menu qui se display sur un :hover, seulement sans transitions c'est presque inutilisable tellement le display/hide des sous-menu est rapide.

Sa fonctionne très bien sous Firefox et Chrome, seulement la majorité de mes utilisateurs utilisent IE9 par défaut, donc pas de transitions et des utilisateurs qui ne peuvent utiliser simplement ces menu déroulants.

J'ai fais une recherche sur le web mais je n'ai rien trouvé de convainquant, comment contourner ce problème et appliquer ces transitions ?

Je voudrais si possible conserver ces transitions, mais s'il n'existe aucune solutions je me verrai contraint de changer le fonctionnement de mes menus, au moins pour IE9-

J'ai plus ou moins vu que certains plug-in jQuery détectent les transitions sous IE9 et moins pour automatiquement les reproduire en JS, seulement le lien de la source était mort... Sa éxiste un truc pareil ? J'ajouterai le fichier à ma page et tout se ferai tout seul ? Ce serait magique

**NoSmoking** · 24/01/2015, 10h58

Bonjour,

(...)seulement sans transitions c'est presque inutilisable tellement le display/hide des sous-menu est rapide.

inutilisable est peut être un peu fort si le but reste de faire apparaitre un sous menu

Si tu nous en disais plus sur les "transitions" que tu souhaites appliquer car les transitions ne sont pas prises en compte sur IE9.

**StripMat** · 26/01/2015, 13h59

Le mot inutilisable est peut être excessif, disons que sans transitions, se diriger dans l'arborescence de mes menus est fastidieux !

Voila un exemple de menu que je voudrai mettre en place : JSFiddle

Quelle solution je peux mettre en place pour que ces menu soient utilisables sous IE9 ? J'vais sûrement m'orienter vers du JS mais j'aimerai pas avoir à ré-inventer la roue, s'il existe une solution en jQuery qui détecte et transforme le CSS3 en JS je suis preneur ^^

**NoSmoking** · 27/01/2015, 22h02

Je pense qu'il faut que tu diriges vers une autre présentation de ton menu, ce type de menu au HOVER est vite très pénible, tu devrais plutôt te diriger vers une ouverture au click, en CCS3 (IE9 reconnaît :checked) ou (au pire) en javascript.

Un exemple d'utilisation sur Galerie au click sans JavaScript, c'est complétement trivial .

**StripMat** · 28/01/2015, 10h44

Je mesure pleinement les difficultés engendrées par l'utilisation de menu déroulants sur HOVER, c'est pourquoi en bossant sur une version de compatibilité IE9 j'me suis dis autant faire un "mode" ou ces mêmes menus se déroulent au clic. Un seul css, deux classes différentes pour mon body, un javascript spécial pour IE9 et le tour est joué, selon le navigateur ou l'option choisi par l'utilisateur, mes menus se déroulent au clic ou en hover. Reste plus qu'a trouver s'il est possible de mémoriser le choix dans un cookie

J'avais déjà été regarder ce menu au clic sans JS, mais j'avoue n'avoir pas bien saisi comment il fonctionnait, le coup des :checked j'ai pas réussi à le reproduire, j'essayerai plus tard.

**NoSmoking** · 29/01/2015, 22h37

Je te mets un exemple complet, avec beaucoup de fioritures, qui te montrera la façon triviale de mettre cela en oeuvre

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu Accordion en CSS</title>
<meta name="Author" content="NoSmoking">
<style>
html,body {
  margin:0;
  padding:0;
  font:normal 1.0em/1.25em Verdana,Arial,Helvetica,sans-serif;
}
#page{
  position:relative;
  width:50em;
  margin:1em auto;
}
#nav {
  float:left;
  border:1px solid #CCC;
  padding:2px;
  font-size:.9em;
}
h1 {
    color:#069;
}
code{
  color:#00F;
  font-family:"Courier New";
  font-size:1.1em;
}
/* reset liste */
ul, li{
  margin:0;
  padding:0;
  list-style:none;
  cursor:pointer;
}
ul li{
  width:15em;
}
/* modification aspect des LABELs */
li label {
  position:relative;  /* pour servir de référent */
  display:block;
  padding:0.5em;
  background:#EEE;
  cursor:pointer;
  border:1px solid #CCC;
}
/* tous sauf le 1st */
li + li{
  margin-top:0.125em;
}
/* annulation pour les sous menu */
li li{
  margin-top:0.125em;
}
/* modification aspect des liens A */
li a {
  display:block;
  color:#00F;
  padding:0.5em;
  text-decoration:none;
  border:1px solid transparent;
}
/* aspect lien au survol */
li:hover > a{
  background:#F0F0FF;
  border:1px solid #6495ED;
  background: rgb(193, 224, 255);
  
}
/* cache les sous menu UL */
ul li ul {
  display:none;
}
/* GESTION des CLICK */
/* on masque les checkbox */
.r_check{
  opacity:0;
  position:absolute;
}
/* affiche UL si INPUT checked */
.r_check:checked ~ ul {
  display:block;
}
/* indication sur l'expand du menu */
.r_check +label:before{
  content:'\2261';
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:1.5em;
  font-weight:bold;
  font-size:1.5em;
  line-height:1.5em;
  color:#888;
  text-align:center;
  border-left:1px solid white;
}
.r_check:checked +label:before{
  content:'\25BC';
}
</style>
<div id="page">
  <h1>Menu Accordion en CSS</h1>
  <p>Utilisation de la pseudoclasse <code>:checked</code> apparue avec le CSS3.</p>
  <ul id="nav">
    <li>
      <input type="checkbox" id="menu_1" class="r_check">
      <label for="menu_1">Menu #1</label>
      <ul>
        <li><a href="">Sous menu 1.1</a></li>
        <li><a href="">Sous menu 1.2</a></li>
        <li>
          <input type="checkbox" id="smenu_1_3" class="r_check">
          <label for="smenu_1_3">Sous menu 1.3</label>
          <ul>
            <li><a href="">Sous menu 1.3.1</a></li>
            <li><a href="">Sous menu 1.3.2</a></li>
            <li><a href="">Sous menu 1.3.3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="menu_2" class="r_check">
      <label for="menu_2">Menu #2</label>
      <ul>
        <li><a href="">Sous menu 2.1</a></li>
        <li><a href="">Sous menu 2.1</a></li>
        <li>
          <input type="checkbox" id="smenu_2_3" class="r_check">
          <label for="smenu_2_3">Sous menu 2.3</label>
          <ul>
            <li><a href="">Sous menu 2.3.1</a></li>
            <li><a href="">Sous menu 2.3.2</a></li>
            <li><a href="">Sous menu 2.3.3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Transitions et IE9

CSS

Discussions similaires

Partager

Partager