question : mouvement d'un menu
Bonjour,
j'ai un menu simple :
Code:
1
2
3
4
5
6
7
| <ul id="navigation">
<li class="home"><a href="#" id="link1"></a></li>
<li class="photos"><a href="#" id="link2"></a></li>
<li class="about"><a href="#" id="link3"></a></li>
<li class="contact"><a href="#" id="link4"></a></li>
<li class="rssfeed"><a href="#" id="link5"></a></li>
</ul> |
quand on passe la souris (hover) sur un onglet du menu (c'est un menu vertical)
alors l'onglet se déplace vers la droite, et lorsqu'on enlève la souris l'onglet se replace.
jusque là tout va bien.
ce que je souhaite c'est en plus, lors d'un clique sur un onglet du menu, faire en sorte que l'onglet reste déplacer a droite, et se replace lorsque je clique sur un autre onglet du menu (et ainsi de suite)
voici mon code actuel pour le hover, je me doute bien qu'il faut utiliser la propriété click mais j'ai tout essayez, je n'y arrive pas.
script jquery placé dans les balises <head>:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'100px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'00px'},200);
}
);
});
</script> |
j'utilise noConflict car j'ai besoin d'un autre framework en parallèle.
