Superfish – Plugin jQuery – Créez vos menus déroulants

10 décembre 2010
Par

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.

superfish-menu-deroulant

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 :

Tags: , , , , , ,

5 Responses to Superfish – Plugin jQuery – Créez vos menus déroulants

  1. TinyMCE – Un nouveau site officiel | LudiBlog on 26 décembre 2010 at 16 h 48 min

    [...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]

  2. [...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]

  3. Topheur on 18 janvier 2011 at 11 h 33 min

    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.

  4. Sortie de jQuery 1.5 | LudiBlog on 17 février 2011 at 15 h 50 min

    [...] Superfish – Plugin jQuery – Créez vos menus déroulants [...]

  5. jQuery by trancegenik - Pearltrees on 8 janvier 2012 at 20 h 34 min

    [...] 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 [...]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*


*

Rubriques