Plugin JQuery : Light Vertical JQuery Menu

Un plugin JQuery qui gère un menu vertical. Je voulais quelque chose de très simple, il n'y a donc aucun paramètres prévu sur ce plugin. Le résultat final est donc un plugin léger, simple et pratique.

Pré-requis

Ce plugin ne requiert que la librairie JQuery. Le fichier plugin.menuvertical.js, source de ce plugin pèse 2.5ko en version commentée, et 1.1ko en version compressée.

Spécifications

Ce plugin est codé de manière à ne pas géner la lecture d'information, la navigation si le javascript est désactivé.

Quand le plugin est activé, le menu est entièrement naviguable au clavier

Ce plugin fonctionne sur firefox 3 (non testé en version 4), IE 7 et 8 non testé en version 9) et Google Chrome

L'html

Dans l'entête

//On appelle JQuery
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
//On appelle le plugin menuvertical.js
<script type="text/javascript" src="js/plugin.menuvertical.js"></script>
//On lance le script sur l'élement <ul> qui à l'id #menu
<script type="text/javascript">
$(document).ready(function(){
	$('#menu').menuvertical();
});
</script>

Dans le corps

<ul id="menu">
	<li class="item" ><img src="images/recap.png" alt=""/><a href="recap.html">Récapitulatif</a></li>
	<li class="sub"><img src="images/nouveau.png" alt=""/><a href="">Fichiers</a>
		<ul>
			<li class="sousitem"><a href="">Fichier html</a></li>
			<li class="sousitem"><a href="">Liste des fichiers</a></li>
		</ul>
	</li>
	<li class="sub"><img src="images/categorie.png" alt=""/><a href="">Catégories</a>
		<ul>
			<li class="sousitem"><a href="">Ajouter une catégorie</a></li>
			<li class="sousitem"><a href="">Liste des catégories</a></li>
		</ul>
	</li>
	<li class="item"><img src="images/statistiques.png" alt=""/><a href="">Statistiques</a></li>
</ul>

L'élement sur lequel est appelé le script doit être une liste.
Les entrées du menu (<li>) qui n'ont pas d'enfant (entendez de sous menu) doivent avoir la classe item.
Les entrées du menu (<li>) qui ont un ou des enfants doivent avoir la classe sub.
Les entrées des sous menu (<li>) doivent avoir la classe sousitem.

Dans cette version, tout le contenu est sur une seule page, englobé dans des div à l'id correspondant aux différents liens. Par exemple, on a un lien qui pointe vers recap.html, et une div#recap avec le son contenu.

Les styles css

Rien de spécial ou d'extraordinaire dans la feuille de style. On retiendra quand même l'utilisation de la pseudo class :not(). Les styles vous appartiennent, ceux founit avec les exemples sont basiques. Amusez vous, et créer vos styles :)

#menu{
	width:250px;
	border:1px solid #c6d5e1;
	float:left;
	background:#fff;
}
#menu li{
	padding:10px;
	margin:5px;
	color: #15428B;
	border: 1px solid #c6d5e1;
	background:#fff;
	clear:both;
}
#menu li img{float:left;margin-right:10px;}
#menu > li.item > a, #menu > li.sub > a{
	line-height:48px;
	display:block;
}
#menu > li > ul > li{
	border: none;
	border-left: 2px solid #c6d5e1;
}
#menu li.sousitem a{
	display:block;
}

#menu li:not(.sub):hover{
	background:#C1CEDB;
}

#menu li.selected{
	background:#4B708D;
	color:white;
}

#menu li.selected a{
	background:#4B708D;
	color:white;
}

#menu li.selected:hover{
	background:#4B708D;
}

#menu li.sub > a{
	background:url(../images/fleche.png) no-repeat center right;
}

Le Javascript/JQuery

En premier lieu, on stoppe le comportement normal du lien. Ensuite, en fonction de la classe de l'item sur lequel on a cliqué, on adopte différente comportement.

1. Si on a cliqué sur un lien dont le parent li à la classe item (c'est à dire un li sans sous menu), on enlève la class selected de tous les éléments. On ferme tous les sous menu et enfin on ajoute la classe selected à l'élement cliqué.

2. Si on a cliqué sur un lien dont le parent li à la classe sub, on déplie le sous menu si ce dernier est fermé, sinon on l'ouvre.

3. Si on a cliqué sur un lien dont le parent li à la classe sousitem, on enlève la class selected de tous les éléments. On ajoute la classe selected à l'élement cliqué et on ferme les autres sous menu

var $$ = $(this);
//On cache tous les sous menus
$$.find('li > ul').hide();

$$.find('a').click(function(e){
	//On ne suit pas le lien
	e.preventDefault();

	if($(this).parent().hasClass('item')){
		
		//On enlève toutes les classes selected
		$$.find('li').removeClass('selected');
		
		//On ferme tous les menus déroulant
		$$.find('li.sub').children('ul').slideUp('slow');
		
		//On ajoute la class selected au parent de l'élement cliqué
		$(this).parent().addClass('selected');
		
	}else if($(this).parent().hasClass('sub')){
			
		if($(this).parent().children('ul').css('display') == 'none'){
			$(this).parent().children('ul').slideDown('slow');
		}else{
			$(this).parent().children('ul').slideUp('slow');
		}
	
	}else if($(this).parent().hasClass('sousitem')){
		//Si on clique sur un sous menu
		
		//On enlève toutes les classes selected
		$$.find('li').removeClass('selected');
		
		//On ajoute la class selected au parent de l'élement cliqué
		$(this).parent().addClass('selected');
		
		$$.find('li.sub').children('ul').each(function(){
			if(($(this).css('display')=='block')){
				if($(this).children('li').hasClass('selected')){
				
				}else{
					$(this).slideUp('slow');
				}
			}
		});
	}
});

Il reste maintenant à gérer le chargement des pages lors d'un clic. Au chargement de la page, on masque toutes les divs de contenu, sauf la première.

$("#contenu div:not(:first)").each(function(i){
	$(this).hide();
});

Lors d'un clic sur un lien, on met le contenu de l'attribut href dans la variable nom. On essaie de charger le fichier en AJAX. Si on ne trouve pas le fichier, on enlève l'extension (.html dans l'exemple) et on essaie d'afficher la div avec cet ID.

var nom = $(this).attr('href');
//Si il y a une page à charger
if(nom){
	$('#contenu').load(nom, function(response, status, xhr) {
		if (status == "error") {
			var msg = "Aucune page à charger";
			//$("#contenu").html(msg + xhr.status + " " + xhr.statusText);
			
			//On va regarder si une div existe
			var nomdiv = nom.substring(0,nom.lastIndexOf('.'));
			//alert(nomdiv);
			$("#contenu div").each(function(i){
				$(this).slideUp('slow');
			});
			
			$('#contenu div#'+nomdiv).slideDown('slow');
		}
	});
}