Accueil > ajax > menu-ajax-jquery

{ Menu jquery / ajax 100& asynchrone }

Introduction

Avantages

Pas de rechargement de la page pendant la navigation

Inconvénients

URL déformées

Référencement

Html

<div id="ajax">
<div class="side-col left">
  <div class="cell">
	<ul class="menu-support">
	  <li class="toggleSubMenu">
		<a href="faq/index.php">FAQ</a>
		<ul class="subMenu">
		  <li>
			<a href="faq/email/index.php">Email</a>
		  </li>
		  <li>
			<a href="faq/webmail/index.php">Webmail</a>
		  </li>
		  <li>
			<a href="faq/frontpage/index.php">Frontpage</a>
		  </li>
		  <li>
			<a href="faq/ftp/index.php">FTP</a>
		  </li>
		  <li>
			<a href="faq/phpmysql/index.php">PHP/MySQL</a>
		  </li>
		  <li>
			<a href="faq/scripts-cgiperl/index.php">Scripts CGI/Perl</a>
		  </li>
		  <li>
			<a href="faq/statistiques/index.php">Statistiques</a>
		  </li>
		  <li>
			<a href="faq/noms-de-domaine-et-sous-domaines/index.php">Noms de domaine et sous-domaines</a>
		  </li>
		  <li>
			<a href="faq/url-rewriting-et-redirections/index.php">URL rewriting et redirections</a>
		  </li>
		  <li>
			<a href="faq/problemes-techniques-divers/index.php">Problèmes techniques divers</a>
		  </li>
		  <li>
			<a href="faq/nos-offres/index.php">Nos offres</a>
		  </li>
		  <li>
			<a href="faq/paiements/index.php">Paiements</a>
		  </li>
		  <li>
			<a href="faq/comment-commander/index.php">Comment commander</a>
		  </li>
		  <li>
			<a href="faq/transfert-de-site/index.php" class="last">Transfert de site</a>
		  </li>
		</ul>
	  </li>
	  <li class="toggleSubMenu">
		<a href="tutoriaux-videos/index.php">Tutoriaux vidéos</a>
		<ul class="subMenu">
		  <li>
			<a href="tutoriaux-videos/creer-une-adresse-email/index.php">Créer une adresse email</a>
		  </li>
		  <li>
			<a href="tutoriaux-videos/creer-une-base-de-donnees/index.php">Créer une base de données</a>
		  </li>
		  <li>
			<a href="tutoriaux-videos/creer-un-sous-domaine/index.php">Créer un sous-domaine</a>
		  </li>
		  <li>
			<a href="tutoriaux-videos/creer-une-redirection-web/index.php">Créer une redirection web</a>
		  </li>
		  <li>
			<a href="tutoriaux-videos/modifier-votre-mot-de-passe/index.php" class="last">Modifier votre mot de passe</a>
		  </li>
		</ul>
	  </li>
	  <li class="toggleSubMenu"><a href="tutoriaux/index.php">Tutoriaux</a>
		<ul class="subMenu">
		  <li>
			<a href="tutoriaux/configurer-son-client-de-messagerie/outlook/index.php">Configurer son client de messagerie</a>
		  </li>
		  <li>
			<a href="tutoriaux/creer-une-liste-de-diffusion/index.php">Créer une liste de diffusion</a>
		  </li>
		  <li>
			<a href="tutoriaux/publier-avec-frontpage/index.php">Publier avec Frontpage</a>
		  </li>
		  <li>
			<a href="tutoriaux/utiliser-dreamweaver/index.php">Utiliser Dreamweaver</a>
		  </li>
		  <li>
			<a href="tutoriaux/utiliser-sitebuilder/index.php">Utiliser Sitebuilder</a>
		  </li>
		  <li>
			<a href="tutoriaux/utiliser-ftp-filezilla/index.php">Utiliser FTP Filezilla</a>
		  </li>
		  <li>
			<a href="tutoriaux/mettre-en-place-un-formulaire/index.php">Mettre en place un formulaire</a>
		  </li>
		  <li>
			<a href="tutoriaux/modifier-les-dns-dun-ch/index.php">Modifier les DNS d'un .ch</a>
		  </li>
		  <li><a href="tutoriaux/securiser-un-repertoire/index.php">Sécuriser un répertoire</a>
		  </li>
		  <li>
			<a href="tutoriaux/referencer-son-site/index.php" class="last">Référencer son site</a>
		  </li>
		</ul>
	  </li>
	  <li>
		<a href="logiciels-utiles/index.php">Logiciels utiles</a>
	  </li>
	  <li>
		<a href="methodes-de-paiement/index.php">Méthodes de paiement</a>
	  </li>
	  <li>
		<a href="contact/index.php">Contact</a>
	  </li>
	  <li>
		<a href="whois/index.php">Whois</a>
	  </li>
	  <li>
		<a href="htpasswd/index.php">Htpasswd</a>
	  </li>
	  <li>
		<a href="plan-du-site/index.php" class="last">Plan du site</a>
	  </li>
	</ul>
  </div>
</div>
</div>

Jquery & ajax

<!-- JQUERY -->		
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script></p>

<!-- MENU ACCORDEON -->
<script type="text/javascript"> 
<!--
	$(document).ready(function () {

		// On cache les sous-menus
		// sauf celui qui porte la classe "open_at_load" :
		$("ul.subMenu:not('.open_at_load')").hide();
		// On selectionne tous les items de liste portant la classe "toggleSubMenu"

		// et on remplace l'element span qu'ils contiennent par un lien :
		$("li.toggleSubMenu span").each( function () {
			// On stocke le contenu du span :
			var TexteSpan = $(this).text();
			$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
		});

		// On modifie l'evenement "click" sur les liens dans les items de liste
		// qui portent la classe "toggleSubMenu" :
		$("li.toggleSubMenu > a").click( function () {

			// Si le sous-menu etait deja ouvert, on le referme :
			if ($(this).next("ul.subMenu:visible").length != 0) {
			$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open current") } );
			}
			
			// Si le sous-menu est cache, on ferme les autres et on l'affiche :
			else {
				$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open current") } );
				$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open current") } );
			}
		// On empêche le navigateur de suivre le lien :
		return false;
		});

	});
// -->
</script>
<!-- FONCTIONS AJAX -->
<script type='text/javascript' src='<?php echo($url.'js/doc.js'); ?>'></script></p>

Analyse de la fonction ajax

Nous allons à présent nous attardez un peu sur le code contenu dans le fichier doc.jsJ'ai commenté un maximum le code pour que vous ayez le maximum de chance de comprendre ce que fais AJAX pour vous =)).

$(function() {
     // Initialisation de quelques variables
     var $el = $(),
     $mainContent = $("#main-content");

     // On utilise un fade in/out pour le conteneur principal lors des chargements
     $mainContent.wrapInner("<div id='fade-wrapper' />");

     // On place le spinner AJAX sur la page (caché par les CSS)
     $mainContent.append('<img src="images/ajax-loader.gif" id="ajax-loader" />');

     // Initialisation / attribution des éléments HTML déclencheur
     var $fadeWrapper = $("#fade-wrapper"),
     $allNav = $("#ajax li:not('.toggleSubMenu') a"),
     $allListItems = $("#main-nav li"),
     url = '',
     liClass = '',
     hash = window.location.hash,
     referer = 'http://astuces-webmaster.ch/ajax/menu-ajax/',
     $ajaxLoader = $("#ajax-loader"),
     $miniAjaxLoader = '<img src="/images/mini-loader-ajax.gif'; ?>" class="mini-ajax-loader" />';

     // on enlève l'id du body (utile uniquement si javascript désactivé)
     $("body").attr("id", "");

     // Si la page contient déjà une ancre dans l'URL
     if (hash) {
		hash = hash.substring(1);
		liClass = hash.substring(0,hash.length-4);
		url = hash + " #inside-content";
		$fadeWrapper.load(url);
		$("." + liClass).addClass("current");
     } else {
		// S'il n'y a pas d'ancre dans l'URL alors on dis que le premier élément du menu est actif
		$("#ajax li:first('.toggleSubMenu')").addClass("current");
     }

     // La fonction qui réagira au clic du menu
     $allNav.click(function(e) {

		 $el = $(this);

		 // On continue seulement s'il n'appelle pas la page courante
		 if (!$el.parent().hasClass("current")) {
			$el.parent().append($miniAjaxLoader);
			$("#ajax li:not('.toggleSubMenu')").removeClass("current");

			// On scroll un peu en haut histoire qu'ils voient le spinn
			$(window).scrollTop(0);

			// $el.attr("href") = $el.attr("href").substring(20,url.length);
			url = $el.attr("href") + " #inside-content";

			$fadeWrapper.animate({ opacity: 0.1 });
			$ajaxLoader.fadeIn(400, function() {
			
				$el.parent().addClass("current");
				$fadeWrapper.load(url, function() {
				
					window.location.hash = $el.attr("href").substring(34,url.length);
					$fadeWrapper.animate({ opacity: 1 });
					$ajaxLoader.fadeOut();
					$(".mini-ajax-loader").hide();
				});
			});
		}

		// On s'assure que le lien ne rechargera pas toute la page
		e.preventDefault();
	});
});

Conclusion

Cette fois on est bon ! Si vous avez bien suivi toutes les étapes votre menu devrait fonctionner, pensez à vérifier les liens dans le fichier javascript au cas ou vous modifier l'arboresence de votre menu.

Vous serez supris de voir à quel point ce menu est agréable à naviguer. Cependant, attention à une chose qu'il ne faut pas négliger selon l'emplacement du menu ainsi et surtout que son importance dans le référencement de votre site, car c'est ici que le bas blesse avec AJAX.

Considérant un autre point désagréable d'AJAX : le contenu de la page est chargé dynamiquement à un emplacement précis de votre page (requête asyhnchrone) malheureusement ce traffic qui s'effectue sans recharger toute la page ne permet pas de modifier l'url, il faut donc les réecrire à la volée en javascript, encore que ça reste un peu périlleux.

En conclustion je dirais que c'est un excellente technologie qui permet vraiment de booster l'expérience utilisateur sur votre site