Plugin jQuery : UI Potato Menu, générer un menu multi-niveau

Après Superfish, voici un autre plugin jQuery pour réaliser un menu multi-niveau.

Petite particularité, celui-ci utilise jQuery UI.


Facile à mettre en place, il suffit d’utiliser une structure de type liste :

[html]
<ul id="menu1">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li>
<a href="#">Menu3</a>
<ul>
<li><a href="#">Menu3a</a></li>
<li><a href="#">Menu3b</a></li>
</ul>
</li>
</ul>
[/html]

Et de lui appliquer un peu de javascript :

[html]
<link rel="stylesheet" type="text/css" media="screen" href="jquery.ui.potato.menu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.potato.menu.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$(‘#menu1′).ptMenu();
});
})(jQuery);
</script>
[/html]

Démo et téléchargement sur le site officiel.

Lien :

Article written by devzonefr

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

Laisser un commentaire