jQuery.imageMenu

Basé sur phatfusion image Menu. pour mootools

Testé sous Opéra 9, Firefox 2, IE6+

Téléchargement

Nécéssite jQuery

2008-09-02 : mise à jour complet du code
Supression de la version incluse de jQuery (utilisation de ajax.googleapis.com)
Nouvelle méthode d'appel à la librairie $(monSelecteur).ImageMenu({... options ...});
Nouvelles options disponnibles :
- Choix du menu ouvert par défaut
- Ouverture permanente d'un menu suite à un click
- Conservation du dernier menu survolé ouvert
- Support de fonctions personnalisées associéesaux évènements 'mouseover', 'mouseout', 'click'

Tout cela suite à une idée de Christophe Deliens

2007-11-12 : jQuery updaté en version 1.2.1
Retrait de la fonction StopAll() (jQuery incluant la fonction stop() au comportement similaire)
Mise à jour du code pour éliminer l'utilisation de fonction dépréciés.

2007-07-02 : jQuery updaté en version 1.1.3
Ccode modifié pour inclure la fonction StopAll() issu de Interface. On évite ainsi 70Ko de surcharge

Exemple d'utilisation :

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.imageMenu.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $('#menu').ImageMenu({'saveOnClick':true,'keepOpen':false,'init':2,'mouseover':myMouseOver,'mouseout':myMouseOut});

    /* Options:
     * 'items': (string) selecteur ciblant les éléments du menu (defaut = 'li')
     * 'extendBy': (int) élargissement prévu pour le menu ouvert - en pixel (defaut = 50),
     * 'init' : (int) index de l'élément à ouvrir par défaut -1 si aucun (defaut = -1),
     * 'keepOpen' : (boolean) Indique si l'on laisse les menu ouvert au survol (defaut = false),
     * 'saveOnClick' : (boolean) Indique si l'on garde ouvert un menu cliqué - inutile si keepOpen est à "true" (defaut = false),
     * 'mouseover' : (function) associez une fonction à l'ouverture d'un menu (defaut = function(){}),
     * 'mouseout' : (function) associez une fonction à la fermeture d'un menu (defaut = function(){}),
     * 'click' : (function) associez une fonction lors d'un click sur un menu (defaut = function(){}),
     */

    // gestion personnalisé de la superposition d'un autre visuel
    // on ajoute ici un aspect "flou/net" sur le menu

    function myMouseOver(elems,options) {
        $('.menuOptionHover',elems).stop();
        $('.menuOptionHover',elems).animate({'opacity':1},'fast');
    }

    function myMouseOut(elems,options) {
        console.debug(elems);
        $('.menuOptionHover',elems).stop();
        $('.menuOptionHover',elems).animate({'opacity':0},'fast');
    }
});
</script>

HTML

<ul id="menu">
        <li id="menu-1" class="menuOption"><a href="#menu1"><span class="menuOptionHover">Menu 1</span></a></li>
        <li id="menu-2" class="menuOption"><a href="#menu2"><span class="menuOptionHover">Menu 2</span></a></li>
        <li id="menu-3" class="menuOption"><a href="#menu3"><span class="menuOptionHover">Menu 3</span></a></li>
        <li id="menu-4" class="menuOption"><a href="#menu4"><span class="menuOptionHover">Menu 4</span></a></li>
</ul>

CSS

#menu {
        margin:0;
        padding:2px;
        height:100px;
        width:400px;
        background:#000;
        list-style:none;
        overflow:hidden;
}
#menu li {
        float:left;
        width:98px;
        height:100px;
        border-right:2px solid #333333;
}
#menu li .menuOptionHover{
        display:block;
        width:100%;
        height:100px;
        text-indent:-8000px;
}
#menu-1 { background:url(1.blur.jpg); }
#menu-2 { background:url(2.blur.jpg); }
#menu-3 { background:url(3.blur.jpg); }
#menu-4 { background:url(4.blur.jpg); }
#menu li#menu-1 .menuOptionHover { background:url(1.jpg); }
#menu li#menu-2 .menuOptionHover { background:url(2.jpg); }
#menu li#menu-3 .menuOptionHover { background:url(3.jpg); }
#menu li#menu-4 .menuOptionHover { background:url(4.jpg); }