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 :

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>