Le blog de Guillaume Bizet

Tout le monde connait maintenant la fameuse bibliothèque jQuery et ses innombrables possibilités. Vous le savez sans doute mais c’est la bibliothèque intégrée par défaut à Dotclear 2 que ce soit pour la partie admin ou bien pour la partie publique si vous le souhaitez. C’est d’ailleurs le cas ici

Je voulais vous présenter ce matin un menu tout en images qui est simplement superbe et simple à mettre en oeuvre : jQuery.imageMenu. Le concepteur de ce script s’est inspiré de “phatfusion image Menu” pour mootools.
Je ne l’ai pas mis en œuvre ici, mais j’y avais pensé quand j’ai refait mon thème récemment …

Screenshot :

Cliquez pour agrandir

Sa mise en place est très simple :
Tout d’abord appelez dans le header de votre site la bibliothèque jQuery et le script du menu, par exemple :

[html]
<script type="text/javascript" src="votresite/js/jquery.js"></script>
<script type="text/javascript" src="votresite/js/jquery.imageMenu.js"></script>

ensuite construisez votre menu

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

avec sa CSS qui va bien

[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); }

et rajoutez le petit bout de javascript entre les balises head pour animer tout ca

[javascript]
$(document).ready(function()
{
        var menu = new imageMenu();
        menu.build('#menu','.menuOption',50,'.menuOptionHover');
        //param 1 = selecteur du menu
        //param 2 = sous selecteur des éléments du menu
        //param 3 = taille de la déformation en pixel
        //param 4 = (optionnel) sous selecteur d'un élément qui apparaitra sur l'élément au survol
});

Vous retrouverez toutes ces informations sur sa mise en place chez le créateur du menu

Amusez vous bien