codeur & geek

Avant de découvrir Jquery, je haissais javascript... Il y a tellement de problèmes de compatibilité entre les navigateurs, que coder dans ce langage est un cauchemard!
Et puis Jquery est arrivé...

Voici un tutorial, ou plutot une sorte de résumé pour créer un menu animé qui ressemble à celui-ci : jquery fancy menu.

Le menu à été testé sous IE6/7, FF3 et safari 4.
Vous pouvez déjà télécharger la source.

Objectif :
Créer un menu qui, au survol de la souris sur un lien, s'étire et change de couleur pour laisser apparaitre un autre texte.

Étape 1: Structure du menu

 
<div id="fancyJM">
<ul>
<li><a title="texte qui s'affiche au sorvol" href="lien1.html">Lien 1</a></li>
<li><a title="texte qui s'affiche au sorvol" href="lien2.html">Lien 2</a></li>
<li><a title="texte qui s'affiche au sorvol" href="lien3.html">Lien 3</a></li>
</ul>
</div>
 

Étape 2: Fichiers dépendants

<!--styles -->
<link rel ="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<!--jquery famework-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--plugin citizenColor-->
<script type="text/javascript" src="js/jquery.citizenColor.js"></script>
<!--contient le script pour l'animation du menu-->
<script type="text/javascript" src="js/fancymenu.js"></script>
 

Étape 3: Élaboration du script javascript (fancymenu.js)

// Ce tableau nous servira à stocker la largeur du lien pour IE6
var aW = Array();
var browser = "";
 
$(document).ready(function() {
 
	// Détermine le type de navigateur
	if ($.browser.msie && $.browser.version.substr(0,1)<7) { browser = "ie6"; }
	else if ($.browser.msie && $.browser.version.substr(0,1)<8) { browser = "ie7"; }
 
	// initialise le menu:
	$("#fancyJM li").each(function(i){
 
		// crée un attribut "id" avec pour valeur la position de la liste courrante
		$(this).attr("id", i);
 
		// ajoute l'image à gauche du lien
		$(this).prepend("
<div class='fancyJM_arrow'></div>
 
 ");
	});
 
	// attache l'évenement over/out
	$("#fancyJM li").hover(
		function () { onLiOver($(this));}, // => over
		function () { onLiOut($(this)); }  // => out
	);
 
	// attache l'évenement click
	$("#fancyJM li").click( function(){
		document.location.href = $(this).children("a").attr("href");
	});
 
	// ----- IE HACK
	if(browser == "ie7"){ $(".fancyJM_arrow").css("margin-top", "0px"); }
 
	// ----- IE HACK
	/* probleme: IE ne sait pas calculer la largeur d'un élément tant
	   que celui-ci n'est pas totalement affiché dans le browser
	   Il faut donc créer une liste temporaire...
	*/
	if(browser.indexOf("ie") != -1){
		$("body").append("
<ul class='fancyJM_temp'></ul>
 
");
		$("#fancyJM li").each(function(i){
			$(".fancyJM_temp").append("
<li>
 
"+$(this).children("a").attr("title")+"
</li>
 
");
		});
 
		// ... et stocker la largeur de chaque element dans un tableau...
		$(".fancyJM_temp li p").each(function(i){
			aW[i] = $(this).width();
		});
 
		// ... puis supprimer cette liste
		$(".fancyJM_temp").remove();
	}
 
});
 
// appele cette fonction au survol de la souris
function onLiOver(e){
	// anime la couleur de fond
	e.animate({ backgroundColor: "#2b8f96", queue: true}, 300);
 
	//anime l'image
	e.children(".fancyJM_arrow").css("margin-top", "7px");
	e.children(".fancyJM_arrow").animate( { marginLeft:"24px", queue: true } , 200 );
 
	//cache le lien
	e.children("a").fadeOut(300,function () {
 
		// change la valeur du lien
		changeLinkvalue($(this));
 
		//affiche le lien
		e.children("a").fadeIn(300);
 
		/* si aucune autre animation n'est en cours
		   (le curseur est donc toujours au dessus du lien),
		   effectue l'animation pour étirer la liste */
		if(e.children("a").queue("fx").length <= 1){
			if(browser == "ie6"){ e.css("width", aW[e.attr("id")]);}
			else if(browser == "ie7"){ e.css("width", "100%");}
			else{ 	e.animate({ width: "100%"}, 300); }
		}
	});
}
 
// appele cette fonction lorsque la souris quitte le lien
function onLiOut(e){
	// meme principe, mais à l'envers!
	e.animate({ backgroundColor: "#999999", queue: true}, 300 );
	e.children(".fancyJM_arrow").animate( { marginLeft:"16px", queue: true } , 200 )
	e.children("a").fadeOut(300,function () {
		changeLinkvalue($(this));
		if(e.children("a").queue("fx").length <= 1){
			e.children("a").fadeIn(300);
			if(browser == "ie6" || browser == "ie7"){ e.css("width", 308); }
			else{  e.animate({ width: 308}, 300); }
		}
	});
}
 
/*
remplace la valeur du lien (e) par celle de son attribut title
puis remplace la valeur de l'attribut par celle du lien...
*/
function changeLinkvalue(e){
	s0 = e.html().replace(/ /gi,"&nbsp;"); // html value
	s1 = e.attr("title").replace(/ /gi,"&nbsp;"); // attribute value
	e.html(s1);
	e.attr("title", s0);
}

Attention cependant si vous copiez le code directement à partir du site, car le formatage crée des retours qui causeront des erreurs dans le javascript.

Voila pour mon premier tutoriel, j'espère que cela vous plaira.

Au passage, si vous avez des idées d'optimisation, je serais ravi que vous les partagiez!