animation, effet, jquery, Menu, Navigation, plugin

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 :

• Site Officiel