Un menu tout smooth et fondu avec JQuery

On a souvent vu en flash de jolis menus tout en effets de fondu au passage de la souris. Mais saviez-vous qu’avec JQuery il était possible de réaliser les mêmes effets? Le principe est relativement simple, explications.

Sans faire étalage des bonnes pratiques en matière de gestion d’images de menus, partons du principe que nous n’avons qu’un seul bouton. Ce bouton est bien entendu un lien <a> contenu dans une balise <li> elle-même dans un <ul>. Et bien soyons fous, mettons un <span> à l’intérieur du A, sans rien dessus, de cette façon :

<ul id="menu_horizontal"><li><a href=""><span></span></a></li></ul>

Jusque là, tout va bien. Il faut toutefois rajouter en CSS des tailles aux différents éléments (<a> et <span>) pour qu’il prennent bien toute l’image de background, définir les positions et surtout, appliquer un index supérieur au <span>. Par exemple :

ul#menu_horizontal li a{<br />
	background:url('../images/menu/monimage_out.png') no-repeat scroll top left;<br />
	display: block;<br />
	height: 50px; width: 150px;<br />
	position: relative;<br />
}</p>
<p>ul#menu_horizontal li a span {<br />
	background:url('../images/menu/monimage_over.png') no-repeat scroll bottom left;<br />
	display:block;<br />
	position:absolute;<br />
	top:0;<br />
	left:0;<br />
	height:100%;<br />
	width:100%;<br />
	z-index:100;<br />
}

Le principe du menu en fondu, c’est de mettre le background en mouseOut sur le <a>, et celui en mouseOver sur le <span>. Seulement le truc c’est de donner une opacité nulle au <span> dès le départ. L’objectif étant de passer l’opacité à 1 au survol, et à 0 à la disparition du curseur. Voici un petit schéma résumant tout ça :

Tout cela va se gérer à l’aide de javascript. Dans un premier temps, il convient de passer l’opacité du span à 0 :

$(document).ready(function() {<br />
	$(&quot;ul#menu_horizontal span&quot;).css(&quot;opacity&quot;,&quot;0&quot;);<br />
});

Une fois cela réalisé, il va falloir rajouter un listener sur le survol du span. Notez que ce n’est pas par ce que son opacité est nulle qu’il a disparu, c’est pour cela qu’il est essentiel de jouer sur l’opacité et non le display. Pour cela aussi que contrairement à ce que l’on pourrait croire il ne serait pas judicieux de jouer sur les fadeIn / fadeOut. Ce qui donne :

<br />
$(document).ready(function() {<br />
	// Initialise l'opacité à &quot;vide&quot; au chargement<br />
	$(&quot;ul#menu_horizontal span&quot;).css(&quot;opacity&quot;,&quot;0&quot;);<br />
	// Au survol du span<br />
	$(&quot;ul#menu_horizontal span&quot;).hover(function () {<br />
		// Anime l'opacité à &quot;plein&quot;<br />
		$(this).animate({<br />
				opacity: 1<br />
			}, 'normal');<br />
		},<br />
		// on mouse out<br />
		function () {<br />
			// Anime l'opacité à &quot;vide&quot;<br />
			$(this).animate({<br />
			opacity: 0<br />
		}, 'normal');<br />
	});<br />
});

Voilà comment cela peut rendre :

On notera que l’animation de fondu ne s’arrête pas forcément lorsque l’on sort du carré. Pour arranger cela il faut indiquer à la sortie d’arrêter toutes les animations en cours sur l’objet courant. C’est l’intérêt de la fronction stop(). En l’utilisant, on obtient finalement :

<br />
$(document).ready(function() {<br />
	// Initialise l'opacité à &quot;vide&quot; au chargement<br />
	$(&quot;ul#menu_horizontal span&quot;).css(&quot;opacity&quot;,&quot;0&quot;);<br />
	// Au survol du span<br />
	$(&quot;ul#menu_horizontal span&quot;).hover(function () {<br />
		// Anime l'opacité à &quot;plein&quot;<br />
		$(this).stop().animate({<br />
				opacity: 1<br />
			}, 'normal');<br />
		},<br />
		// on mouse out<br />
		function () {<br />
			// Anime l'opacité à &quot;vide&quot;<br />
			$(this).stop().animate({<br />
			opacity: 0<br />
		}, 'normal');<br />
	});<br />
});

Et le résultat :

Et voilà, le menu est paré! Le rendu concret de menu smooth peut être vu sur la page d’accueil de http://www.kicoe.net.
A bientôt !