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 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 :
<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 :
- jQuery – Sélectionner les checkbox enfants
- Image Cube – Plugin jQuery – Un effet renversant
- jQuery Cycle Plugin – Plugin jQuery – Toujours plus loin dans les effets « SlideShow »
- jQuery Approach – Plugin jQuery – Approchez vous pour voir
- (mb)Extruder – Plugin jQuery – Le contenu qui slide
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
[...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]
[...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]
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.
[...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]
[...] 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. Superfish – Plugin jQuery – Créez vos menus déroulants | LudiBlog [...]