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
<script src="public/scripts/jquery.js" type="text/javascript"></script> <script src="public/scripts/jquery.superfish.js" type="text/javascript"></script>
La structure de notre menu ressemble à ceci :
<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>
Et pour que la magie opère :
$(document).ready(function() {
$('ul#menu').superfish();
});
Les paramétrages possibles, ainsi que des exemples de mises en forme sont sur le site officiel.
Lien :
Un commentaire
[...] Superfish, voici un autre plugin jQuery pour réaliser un menu [...]
Déposez un commentaire