Plugin jQuery : Superfish, pour un menu multi-niveau

plugin-jquery-superfishCeux 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 :

Article written by

Développeur d'applications de formation, je me suis aujourd'hui spécialisé dans le développement web.

Une réponse à “Plugin jQuery : Superfish, pour un menu multi-niveau”

  1. Plugin jQuery : UI Potato Menu, générer un menu multi-niveau | DevZone - Zone de développement web

    [...] Superfish, voici un autre plugin jQuery pour réaliser un menu [...]

Laisser un commentaire