Plugin jQuery : Superfish, pour un menu multi-niveau

Ceux qui s’y sont frotté le savent, réaliser un menu multi-niveau n’est pas une chose aisé.

Avec juste menu/sous-menu, ça se réalise uniquement en CSS, mais au delà, il faut y rajouter une pincée de javascript

C’est là qu’intervient Superfish, un plugin jQuery qui résout parfaitement ce problème et qui va gérer l’affichage des sous-menus.

On commence par inclure notre framework javascript jquery ainsi que ce plugin

[html]
<script src="public/scripts/jquery.js" type="text/javascript"></script>
<script src="public/scripts/jquery.superfish.js" type="text/javascript"></script>
[/html]

La structure de notre menu ressemble à ceci :

[html]
<ul id="menu">
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
</ul>
[/html]

Et pour que la magie opère :

[javascript]
$(document).ready(function() {
$(‘ul#menu’).superfish();
});
[/javascript]

Les paramétrages possibles, ainsi que des exemples de mises en forme sont sur le site officiel.

Lien :

• Site Officiel