Support d'un accordéon CSS3
bonjour
j'ai implementé un menu "accordéon" avec effet des transitions (pur CSS3, sans javascript). Comme je ne suis pas parti d'un modèle tout fait, je cherche à savoir avec quoi c'est compatible.
j'ai tester avec les versions courantes de firefox(5.x), opera (10.x), Chrome (??) et IE8. ça marche partout sauf chez IE mais je trouve que le rendu "dégradé" de IE est pas trop mal.
Question à la communauté: est ce que vous pouvez me dire si "ça" marche pour vous (les transitions animées avec vos navigateurs ) et important si vous trouvez le menu assez réactif/facile à utiliser. merci.
la partie importante du css est là:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
div#sidebar ul.UfoDictionary li.category ul
{/*display:none;*/
overflow:hidden; height:0px;
transition-property:height;
transition-duration: 1s;
transition-delay: 0.6s;
transition-timing-function:ease-in-out;
-moz-transition:height 1s ease-in-out 0.6s;
-webkit-transition:height 1s ease-in-out 0.6s;
-o-transition:height 1s ease-in-out 0.6s;
}
div#sidebar ul.UfoDictionary li.category:hover ul
{/*display:block*/
overflow:auto;height:250px;
transition-delay: 0.2s;/*plus rapide pour compenser le temps passer à bouger la souris*/
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
} |
un fragment de xhtml significatif
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="sidebar">
<!-- we will display a ufo dictionary -->
<ul class="UfoDictionary" id=dictionary4e4bb3ba89409>
<li class="category" >up_chapters
<ul>
<li><a href="browser.php?q=up_chapters%C2%A7main">~main</a></li>
</ul>
</li>
<li class="category" >tech
<ul>
<li><a href="browser.php?q=tech%C2%A7rs_craft_el_raven">'Raven' ECM Unit</a></li>
<li><a href="browser.php?q=tech%C2%A7rs_craft_weapon_sparrowhawk">'Sparrowhawk' AA Missile Rack</a></li>
</ul>
</li>
</ul>
</div> |
le css
la démo se trouve ici: (le site est en construction, mais concentrons nous sur le menu... )
[url]http:// jerikojerk.free.fr/ufo-ai/browser.php[url]
