jMenu — Navigation horizontale avec jQuery UI

jMenu est un système de menu horizontal en jQuery et jQuery UI qui autorise un nombre illimité de sous-menus. jMenu possède plus d’une douzaine d’options : largeur des sous-menus, position (top et left) du premier niveau par rapport au niveau supérieur, délai d’ouverture et de fermeture des sous-menus, type d’effets applicables à l’ouverture ou à la fermeture des niveaux, etc. 

Marquage HTML et classes CSS attendus pour jMenu :

<ul id="jMenu">
    <li><a class="fNiv">Niveau 1</a> <!-- Don't forget the 'fNiv' class, only on the first level link !! -->
        <ul>
            <li class="arrow"></li> <!-- Only for illustration : arrow_down.png -->
            <li><a>Niveau 2</a></li>
            <li><a>Niveau 2</a></li>
            <li><a>Niveau 2</a>
                <ul>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                </ul>
            </li>
            <li><a>Niveau 2</a></li>
        </ul>
    </li>
</ul>

Appel au script jMenu :

$(document).ready(function(){
    $("#jMenu").jMenu();
});
  • La démonstration interactive vous permettra de tester toutes les options en direct-live et de copier-coller le script qui en résulte.
  • jQuery UI sert uniquement à ajouter des effets pendant l’ouverture et la fermeture des sous-menus.
  • Via @BlouLapinou