Nous allons voir ici comment réaliser un menu vertical simple en javascript.

Je vous montre le code de base, sans aucun style, à vous de faire le reste 😉

Vous aurez besoin de 2 fichiers. Le html contenant la structure du menu et le script et le fichier contenant la bibliothèque jQuery.

Ne vous inquiétez pas, je vous met tous les liens nécessaires 😉

Un petit exemple ici.

 

La partie html

Nous allons créer la structure Html du menu. 3 onglets ayant chacun un sous menu.

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml »>
<head>
<script type= »text/javascript » src= »jquery-1.4.4.min.js »></script>
//lien vers la bibliothèque jquery
</head>
<body>
<div id= »page »>

<!– menu –>
<ul id= »menu »>

<li>
<a href= »# »>pif</a><!– onglet 1–>
<ul id= »page0″><– sous menu 1–>
<li>paf</li>
<li>paf</li>
<li>paf</li>
</ul>
</li>

<li>
<a href= »# »>paf</a><!– onglet 2 –>
<ul id= »page1″><!– sous menu 2–>
<li>paf</li>
<li>paf</li>
<li>paf</li>
</ul>
</li>

<li>
<a href= »# »>pouf</a><!– onglet 3 –>
<ul id= »page2″><!– sous menu 3–>
<li>paf</li>
<li>paf</li>
<li>paf</li>
</ul>
</li>

</ul><!– fermeture ul menu –>

</div><!– fermeture div page–>

</body>
</html>
 

Téléchargez le fichier jQuery ici. (N’oubliez pas de le placer dans le même dossier que votre fichier html ! 😉 )

Lors de la réalisation de l’exercice, j’utilisais la version 1.4.4, je vous ai donné le lien vers la version 1.7.

Je vous conseil donc de renommer votre fichier jquery-1.4.4.min.js par  jquery-1.7.js (dans le <head></head> )

Le script

 

Voici le script à placer entre les balises <head></head>

 

<script>
$(document).ready(function(){
document.getElementById(‘page0’).style.display= »none »;
document.getElementById(‘page1’).style.display= »none »;
document.getElementById(‘page2’).style.display= »none »;
// ici on cache les sous menu à l’ouverture de la page. Si vous souhaitez
que ceux ci soient visibles , supprimez ou commentez ces 3 lignes 😉

$(« #menu a »).click(function(){

// on demande de détecter au clique de la souris sur le a (lien)
$(this).next().slideToggle(« slow »);

// Modifie la visibilité des élements sélectionnés en ajustant leur hauteur
$(this).parent().siblings().find(« ul »).slideUp();
// Cache tous les élements sélectionnés selon un effet spécifique
de « glissement »
return false;
});
});
</script>

 

Et voila ! Pas sorcier non?

Si vous avez des questions et/ou des remarques, n’hésitez pas !

je tiens bien à préciser qu’il s’agit d’un menu SIMPLE 🙂

Le WIB se sociabilise !

Suivez nous sur Twitter et Facebook pour des news lives en tous genres !