question : mouvement d'un menu

the_snip · 14/12/2011, 00h27

Bonjour,

j'ai un menu simple :

Code :

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

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 :

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

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.

danielhagnoul · 14/12/2011, 01h57

Bonsoir

En espérant avoir bien compris !

Code :

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

1
2
3
4
5
6
7
<ul id="navigation">
	<li class="home"><a href="#" id="link1" data-move="1">Home</a></li>
	<li class="photos"><a href="#" id="link2" data-move="1">Photos</a></li>
	<li class="about"><a href="#" id="link3" data-move="1">About</a></li>
	<li class="contact"><a href="#" id="link4" data-move="1">Contact</a></li>
	<li class="rssfeed"><a href="#" id="link5" data-move="1">RSSFeed</a></li>
</ul>

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
$("[id^='link']").click(function(){
	$("[id^='link']").not(this).data("move", "1");
	$(this).data("move", "0");
	$('#navigation > li').mouseleave();
 
	console.log( this.id );
});
 
$('#navigation > li').hover(
	function () {
		$('a', this).stop().animate({'marginLeft':'100px'},200);
	},
	function () {
		if ( $('a', this).data("move") == 1 ){
			$('a', this).stop().animate({'marginLeft':'0px'},200);
		}
	}
);

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email