Salut,
skywalk3r a écrit :
Salut,
si tu veux un effet accordeon avec transitions tu peux essayer le framework mootools qui permet de faire ce type d'effets assez simplement (surtout depuis l'implementation de la classe Accordion)...
tu peux voir ce que ca donne ici et constater egalement que c'est assez simple a mettre en oeuvre :
http://demos.mootools.net/Accordion
Ca ne change pas grand chose par rapport au menu du tuto de Thomas, non ?
A priori, le soucis ne se pose qu'au changement de page et sur le menu de Mootools, le problème serait le même, ce cas n'étant pas prévu.
Comme l'a dit Florent, le menu de Thomas prévoit qu'un ou plusieurs sous-menus restent ouverts au changement de page. Cette partie n'est pas très technique puisqu'il ne s'agit que d'ajouter des classes... comme suit :
<ul class="navigation">
<li><a href="#" title="Aller à la page 1">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu [#blue]open_at_load[/#]">
<li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>
<li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
<li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
<li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>
</ul>
</li>
<li><a href="#" title="Aller à la page 4">Item 4</a></li>
</ul>
Dans ce cas, le sous-menu de Item 2 reste ouvert lorsqu'on clique sur Item 2.1, Item 2.2 ou Item 2.3 (à condition de bien avoir mis la classe sur les pages correspondantes)
Après, quelquechose de plus technique (puisque ça suppose quelques modifications de code JS) serait qu'on ferme bien le menu mais... pas de manière brusque.
Pour que ça fasse "propre", le mieux serait, lors du clic sur un lien du menu, de créer un cookie qui enregistre le lien cliqué. En surplus, il faudrait, à chaque chargement de page, détecter si un cookie existe et attribuer le comportement des sous-menus en conséquence :
- Le cookie n'existe pas ou le lien enregistré ne fait pas parti du sous-menu et il n'y a pas de classe "open_at_load" sur le sous-menu
-> On cache le sous-menu avec hide(), c'est à dire que le sous-menu apparait fermé au chargement de la page.
- Le sous-menu contient la classe "open_at_load"
-> On laisse le sous-menu ouvert
- Le sous-menu n'a pas de classe "open_at_load" et un lien du sous-menu est enregistré dans le cookie
-> On ferme le menu avec slideUp(), c'est à dire que le sous-menu apparait ouvert au chargement de la page et se ferme progressivement.
Pour finir, on pourrait s'occuper de la suppression du cookie.
Modifié par koala64 (07 Dec 2007 - 15:54)