[Article] Créez un menu animé avec jQuery

Version imprimable

11/02/2009, 22h50
Kerod

[Article] Créez un menu animé avec jQuery

Bonjour,

Didier Mouronval nous propose une traduction de l'article anglophone de Zach Dunn (Webmaster de Build Internet) : How to Make a Smooth Animated Menu with jQuery

Cet article nous donne une technique pour créer un menu animé en utilisant le framework JavaScript jQuery.

Pour toutes questions/suggestions, vous pouvez les faire à la suite de ce message.

Bonne lecture
12/02/2009, 20h18
SKINp

Bon tutoriel, belle animation!

Quel est la meilleure technique pour ajouter du contenu sous le menu?

Simplement ajouter du texte et/ou images fait en sorte que ce contenu est déplacer lorsque l'animation se produit.

Y a-t-il un moyen simple de faire animer le menu par dessus le contenu qui suit ou est-il préférable de placer le menu dans un <div> ayant comme height la hauteur maximale de l'animation et de placer le contenu en dessous?

Merci.

Salut,

Effectivement, après avoir un peu testé selon tes remarques, deux éléments posent problème en ajoutant du contenu :

Le float: left des li oblige à rétablir le flux après le menu (par exemple avec un clear: both)
Une fois le flux rétabli, l'animation "pousse" le contenu vers le bas.

Pour parer à cela, j'ai testé une solution qui semble convenable (testé sur FF2, IE6/7, Opera, Chrome et Safari).
Il s'agit de positionner le ul du menu en absolute et affecter au conteneur du contenu un clear et un margin-top suffisant.
Voici un exemple de code (complétant celui de l'article) :

Code:

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
body{
	font-family:"Lucida Grande", arial, sans-serif;
	background:#F3F3F3;
}
 
ul{
	position: absolute;
	margin:0;
	padding:0;
}
 
li{
	width:100px;
	height:50px;
	float:left;
	color:#191919;
	text-align:center;
	overflow:hidden;
}
 
a{
	color:#FFF;
	text-decoration:none;
}
 
p{
	padding:0px 5px;
}
 
	.subtext{
		padding-top:15px;
	}
 
/*Menu Color Classes*/
.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}
 
.corps{
	width: 100%;
	height: 800px;
	margin-top: 5em;
	background-color: silver;
}

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Menu anim&eacute; fluide avec jQuery</title>
 
	<link type="text/css" rel="stylesheet" href="animated-menu.css"/>
 
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="js/animated-menu.js" type="text/javascript"></script>
</head>
 
<body>
 
	<p>Survolez le menu pour le voir s'animer.</p>
 
	<ul>
		<li class="green">
			<p><a href="#">Accueil</a></p>
			<p class="subtext">Accueil du site</p>
		</li>
		<li class="yellow">
			<p><a href="#">A propos</a></p>
			<p class="subtext">Plus d'infos</p>
		</li>
		<li class="red">
			<p><a href="http://www.developpez.com/">Site</a></p>
			<p class="subtext">Visitez developpez</p>
		</li>
		<li class="blue">
			<p><a href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/">Forum</a></p>
			<p class="subtext">jQuery sur developpez</p>
		</li>
		<li class="purple">
			<p><a href="../">Retour</a></p>
			<p class="subtext">Retour &agrave; l'article.</p>
		</li>
	</ul>
	<div style="clear: both"></div>
	<div class="corps">
		Lorem ipsum...
	</div>
</body>
</html>

A noter :
* Le ul en position absolute.
* Une div avec clear both intermédiaire juste après le menu pour rétablir le flux.
* La div "corps" (le contenu) avec un margin-top exprimé en em afin que le résultat soit convenable quel que soit le navigateur, la taille de la police etc...

30/04/2009, 15h36
Federico_muy_bien

Merci !
Mais comme je n'aime pas faire des trucs sans (trop) comprendre .. qu'est ce que la balise <div style="clear: both"></div> ???
Et surtout à quoi elle sert car je l'ai supprimé sans faire exprés et le bloc reste au dessus du contenu ... (Safari 4)
30/04/2009, 15h45
Kerod

Le div dont tu parles sert à rétablir le flux suite à l'utilisation du float:left sur les balises li (cf. le CSS).

Si tu le retires et qu'il n'y a pas vraiment de contenu après, il n'y aura aucun effet par contre si tu utilises ce code sur une page contenu beaucoup de contenu, il est préférable de le laisser sinon tu vas avoir des blocs qui vont se chevaucher.

Bon il existe d'autres solutions pour rétablir un flux qui font que l'on a pas besoin d'utiliser forcément d'autres balises...:mrgreen:

Salut

En voulant utiliser ce script dans une page faisant appel a des fonctions ajax je me suis retrouvé confronté a un petit probleme.

Impossible de forcer l'onglet cliqué a rester ouvert.

Bon je suis pas bien fort en jquery, ducoup ca a vite tourné a la torture neuronal :aie:

J'ai fini par trouvé une solution qui semble bien fonctionner :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Menu anim&eacute; fluide avec jQuery</title>
 
	<link type="text/css" rel="stylesheet" href="http://dmouronval.developpez.com/tutoriels/javascript/jquery/creer-menu-anime-fluide-avec-jquery/fichiers/animated-menu.css"/>
 
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="http://dmouronval.developpez.com/tutoriels/javascript/jquery/creer-menu-anime-fluide-avec-jquery/fichiers/js/jquery.easing.1.3.js" type="text/javascript"></script>
 
	<script type="text/javascript">
	$(document).ready(function(){
 
	// MOD NOOBX
	test = 'x'; // variable global qui va nous servir a savoir si un element a été cliqué 
 
	//En cas de click
	$("li").click(function(){
		if(test != this){// on verifie si l'ongelet cliqué a deja été ouvert sinon ou ferme l'onglet precedemment ouvert
			$(test).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
		}
	 test = this; // on assigne a la variable de test le nouvel onglet ouvert
	});
 
	$("li").mouseout(function(){
		if(test != this){ //si l'onglet dont la souris sort est different de la variable test alors on ferme l'onglet
			$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
		}
	});
	// !MOD NOOBX
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
 
 
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
 
 
});
	</script>
</head>
 
<body>
 
	<p>Survolez le menu pour le voir s'animer.</p>
 
	<ul>
		<li class="green">
			<p><a href="#">Accueil</a></p>
 
			<p class="subtext">Accueil du site</p>
		</li>
		<li class="yellow">
			<p><a href="#">A propos</a></p>
			<p class="subtext">Plus d'infos</p>
		</li>
		<li class="red">
 
			<p><a href="http://www.developpez.com/">Site</a></p>
			<p class="subtext">Visitez developpez</p>
		</li>
		<li class="blue">
			<p><a href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/">Forum</a></p>
			<p class="subtext">jQuery sur developpez</p>
		</li>
 
		<li class="purple">
			<p><a href="../">Retour</a></p>
			<p class="subtext">Retour &agrave; l'article.</p>
		</li>
	</ul>
 
</body>
</html>

J'ai commenté mes modifs ca devrait pas etre trop dur a comprendre ^^
L'idée général est d'assigner une variable et de la comparer a chaque fois que nécessaire.

Ca tourne en l'état. :ccool:

Je suppose qu'il est possible de faire mieux/plus simple/plus rapide/....
Je compte sur vous pour me l'expliquer ;)

[EDIT]
Un code plus serieux proposé par spacefrog

Code:

1
2
3
4
5
6
7
8
$("li.effet").click(function(){
      $(this).mouseout(function(){$(this).stop()})		
      $("li.effet").not(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'});
   	   $("li.effet").not(this).mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	})

merci grenouille ;)

10/02/2010, 20h05
SpaceFrog

Oui enfin n'étant pas un expert en Jquery loin s'en faut le code proposé est un peu une bidouille.
il serait mieux d'attribuer une classe à l'objet cliqué et de faire les modifications et animate uniquement sur l'objet au lieu de faire sur "tous sauf" en effet sur le click d'un autre onglet, en principe un seul devrait subir l'animate pour le retour à la hauteur 50px de même pour la réattribution du mouseout.