Discussion :

[kranagard]

Bonjour, je créé en ce moment un menu animé (à l'aide de sencha animator mais si vous avez mieux je suis ouvert). Je cherche à créer un menu dans lequel le nom bouge, le sous menu apparaît en animation et se fermant lorsque la souris quitte la div.

j'ai créé cela avec sencha, l'animation se lance, fait ce qu'il faut et reste ouverte tant que la souris est dans la frame (je l'ouvre dans une iframe)
mais mon problème est que lorsque la souris quitte cette frame l'animation ne se réinitialise pas toujours...

pour les évènements souris j'ai géré de cette manière pour le moment:
scene1: seul le menu est visible. mousemove => goToScene 2
scene2: les menu et sous menus se mettent en place en 1.7sec. un rectangle transparent se place dans le fond et à comme action: mouseMove => goToScene 1. J'ai placer un autre rectangle au dessus reprenant l'emplacement des sous menus.

->resultat
l'animation n'est pas terminée mais ce problème me fait me poser plusieurs questions:

-je continue en animation via sencha?
-je regarde plus du cotes de :hover et d'animations multiple (et plus simple)?

ce tuto correspond à ce que je veux faire les animations en moins.

tout conseil conceptuel, lien vers un tuto parlant de menu en css3 ou exemple est le bienvenue. Merci à vous

[kranagard]

en cherchant des exemples (sans trouver ce que je cherche vraiment) je me rends compte que Sencha me génère beaucoup de javascript qui peut en grande partie être évité grâce aux transitions du coup je me demande si je ne devrais pas regarder de ce cotés plutôt que de continuer à fouiller dans les tuto sencha :/
surtout que mon problème n'existe plus grâce à :hover en css...

vous me conseillez quoi?

[rodolphebrd]

Bonjour,

Voici des exemples en full css avec des drop down menu et des animations:

lien1, lien2

[kranagard]

merci pour ces liens, ils s'ajoutent à ceux que je regarde actuellement et je commence à mieux cerner le concept de transition, du coup je me dis de plus en plus que les animations que je faisais ne sont plus vraiment à l'ordre du jour...
mais même si mon menu est maintenant dynamique et très fonctionnel (contrairement à ce que j'arrivais à faire avant) il n'en reste pas moins que j'aimerai y introduire une animation plus poussée que celles que j'ai pu voir pour le moment. (jouant sur les lettres comme dans mon premier exemple, mais également d'autres)

il est tout à fait possible d'introduire mon iframe dans le menu mais cela implique l'ajout de javascript, ce qui alourdit pas mal le code...
n'est-il pas possible d'animer, ou de donner des effets à du texte en css3?


ps: merci grace à toi j'ai de nouvelles voies de recherches en tête

[kranagard]

finalement j'ai compris que le javascript généré ne servait qu'aux évènements...
du coup j'ai mixé le menu dynamique en css3 et des transitions pour obtenir ce que je voulais et ça rend pas mal du tout.

j'ai donc un menu comme ceci:

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
<div id="menu">
    <li>
       <img class="icon" src="/assets/images/favicon.png"/>
        <a href="/">@bAccueil()</a>
    </li>
    <li>
        <img class="icon" src="/assets/images/favicon.png"/>
        <a href="/info">@bInfo()</a>
        <ul>
            <li><a href="/info/plan">@Messages("menu.info.plan")</a></li>
            <li><a href="/info/horaire">@Messages("menu.info.horaires")</a></li>
            <li><a href="/info/contact">@Messages("menu.info.contact")</a></li>
        </ul>
    </li>
    <li>
        <img class="icon" src="/assets/images/favicon.png"/>
        <a href="/galerie">@bGalerie</a>
        <ul>
            <li><a href="/galerie/magasin">@Messages("menu.galerie.magasin")</a></li>
            <li><a href="/galerie/articles">@Messages("menu.galerie.article")</a></li>
        </ul>
    </li>
    <li>
        <img class="icon" src="/assets/images/favicon.png"/>
        <a href="/partenaires">@bPartenaire</a>
        <ul>
            <li><a href="/partenaires/artistes">@Messages("menu.partenaire.artistes")</a></li>
            <li><a href="/partenaires/marques">@Messages("menu.partenaire.marques")</a></li>
        </ul>
    </li>
</div>

et son css:

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
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
.icon{
    height: 20px;
    width:20px;
    float:left;
}
 
 
#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
 
#menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
 
 
#menu:before,
#menu:after {
    content: "";
    display: table;
}
 
#menu:after {
    clear: both;
}
 
#menu {
    zoom:1;
}
 
 
#menu li {
    float: left;
    position: relative;
}
 
#menu a {
    float: left;
    padding-right: 30px;
    color: rgba(244,106,0,1);
    text-transform: uppercase;
    font: bold 21px Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
}
 
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 9999;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
 
#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
 
#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
}
 
#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
}
 
#menu ul a {
    padding: 0px;
    padding-left: 40px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
 
#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
}
 
#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
}

il me reste a modifier l'effet pour le sous menu et j'aurai fini (je mettrai un lien vers l'exemple si vous voulez)

ps: je travaille avec Play! framework et @bAccueil() fait appel à accueil.html

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
<div id="pHuPaTWzQ-an-anim"><ol>
 
    <li id="pHuPaTWzQ-an-scene-0" >
        <div class="pHuPaTWzQ-an-stage">
            <div id="pHuPaTWzQ-an-obj-1"><span>A</span></div>
            <div id="pHuPaTWzQ-an-obj-2"><span>c</span></div>
            <div id="pHuPaTWzQ-an-obj-3"><span>c</span></div>
            <div id="pHuPaTWzQ-an-obj-4"><span>u</span></div>
            <div id="pHuPaTWzQ-an-obj-5"><span>e</span></div>
            <div id="pHuPaTWzQ-an-obj-6"><span>i</span></div>
            <div id="pHuPaTWzQ-an-obj-7"><span>l</span></div>
        </div>
    </li>
 
    <li id="pHuPaTWzQ-an-scene-2" >
        <div class="pHuPaTWzQ-an-stage">
            <div id="pHuPaTWzQ-an-obj-9"><span>A</span></div>
            <div id="pHuPaTWzQ-an-obj-10"><span>c</span></div>
            <div id="pHuPaTWzQ-an-obj-11"><span>c</span></div>
            <div id="pHuPaTWzQ-an-obj-12"><span>u</span></div>
            <div id="pHuPaTWzQ-an-obj-13"><span>e</span></div>
            <div id="pHuPaTWzQ-an-obj-14"><span>i</span></div>
            <div id="pHuPaTWzQ-an-obj-15"><span>l</span></div>
            <div id="pHuPaTWzQ-an-obj-8"></div>
        </div>
    </li>
 
</ol></div>

le css gérant les transitions

[kranagard]

j'obtiens presque ce que je voulais mais il me reste un soucis avec le sous-menu, j'ai beau lire le code dans tous les sens je ne comprends pas ou il est mit qu'il vient d'en bas (mon sous menu s'affiche progressivement en opacity et en position)
j'aimerai modifier ces effets mais je ne trouve pas ou sont ces valeurs :/

la ligne déclenchant la transition est celle là:

Code :

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

-webkit-transition: all .2s ease-in-out;

jusque là je comprends. Je me doute que l' "ul" est en invisible et que donc son opacity est modifiée graduellement, ça pas de soucis. mais sa position de base devrait être déclarée avec un top la décalant vers le bas logiquement ou quelque chose dans le style or je ne trouve rien lui correspondant

au final je voudrais faire arriver les sous menus (donc ul) par la droite, mais j'aimerai surtout comprendre d'ou vient ce mouvement, je ne trouve pas de transition pouvant lui correspondre