Superfish – Plugin jQuery – Créez vos menus déroulants
Posted By Franck Pertegas on 10 Déc 2010 in Framework, Javascript, Programmation |
Superfish est un plugin jQuery qui va vous permettre de réaliser des menus déroulants au survole de votre souris pour vos sites internet. Très utile lorsque vous avez des menus avec sous-menu, sous-sous-menu, sous-sous-sous-menu etc… Vous voulez laisser les internautes avoir accès à toutes vos pages, mais ne voulez pas encombrer chacune de vos pages avec un menu trop complexe, et bien Superfish fait parti de ces plugins qui vous permettent de créer assez rapidement vos menus en listes déroulantes, grâce au framework javascript jQuery.
Voici un exemple d’utilisation simple :
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css" />
<script src="superfish.js"></script>
// initialise Superfish
<script>
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>
et le listing ul/li du menu :
<ul class="sf-menu">
<li class="current"><a href="#a">menu item</a>
<ul>
<li><a href="#aa">menu item</a></li>
<li class="current"><a href="#ab">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
</ul>
Retrouvez d’autres exemples et le plugin sur ce lien.
Articles qui peuvent vous intéresser :
18 janvier 2011
très bon produit, seule pb la modification du style css et très compliqué.
Dommage qu’il n’y est pas de doc a se sujet ou des exemples de menu avec des look différents.