Le menu image avec le framework mootools apporte un design incomparable à votre site.
Nous allons voir ici comment intégrer ce menu en lieu et place de l’image affichée sur le thème Freshy de jide.fr
Tout d’abord il faut définir les fichiers dont on a besoin :
Insérer ces fichiers décompressés à la racine de votre thème dans un répertoire wp-content/themes/mon-theme/js par exemple. Nous y ferons référence plus tard dans le tutorial.
Nous allons faire un menu à 5 images.
Editer le fichier header.php du thème
Ajouter les lignes suivantes entre les balises :
<link href=“<?php bloginfo(’template_url’); ?>/imageMenu.css" rel="stylesheet" type="text/css" />
<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/_common/js/mootools.js">
</script>
<script type=“text/javascript” src=“<?php bloginfo(’stylesheet_directory’); ?>/js/imageMenu.js"></script>
Nous sommes d’accord que nous avons placé mootools.js dans /wp-content/themes/freshy/_common/js,
imageMenu.js dans /wp-content/themes/freshy/js et
imageMenu.css dans /wp-content/themes/freshy/
Je ne sais pas pourquoi mais si on met les 2 fichiers .js dans le même repertoire ça bugge.Toujours dans header.php, remplacer(ou rajouter en dessous comme on veut)
par :
<p id=“imageMenu” style=“margin: 0pt auto”> </p>
<ul>
<li class=“menu1″>Menu 1</li>
<li class=“menu2″>Menu 2</li>
<li class=“menu3″>Menu 3</li>
<li class=“Menu4″>Menu 4</li>
<li class=“Menu5″>Menu 5</li>
<!– Ajouter les lignes en fonctions du nombre d’images voulues –></ul>
<!– pour l’exemple j’utilise 5 options de menu –>
<script type=“text/javascript”>
window.addEvent(\\\\\’domready\\\\\’, function(){ var myMenu = new ImageMenu($$(\\\\\’#imageMenu a\\\\\’)); }); </script>
Regardons maintenant le fichier imageMenu.css :
/**************************************************************
Image Menu
v 2.2
modifié par GeekWorld@idoo.com
**************************************************************/
#imageMenu {
position: relative;
padding-bottom:6px;
background-color: white; /*Couleur de fond*/
width: 770px; /*Largeur du menu à l’écran*/
height: 95px; /*Hauteur du menu à l’écran*/
overflow: hidden;
}
#imageMenu ul {
background:none;
list-style: none;
display: block;
width: 1000px; /*N’as pas d’importance mais doit être plus grand que #imageMenu*/
height: 95px; /*Même valeur que #imageMenu*/
}
#imageMenu ul li {
background:none;
padding:0;
float: left;
}
#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
/*border-right: 2px solid #fff;*/
cursor:pointer;
display:block;
overflow:hidden;
width:152px; /* = (Width de #image menu - 10)/Nb d’images du menu –>(770-10)/5 = 152 */
height: 95px; /*Même valeur que #imageMenu*/
}
#imageMenu ul li.menu1 a {
background: url(images/6.png) repeat scroll 0%; /*Lien vers votre image*/
/*border-right: 5px solid #fff;*/ /*On peut mettre un bordure, dans ce cas on change aussi la valeur border dans imageMenu.js */
}
#imageMenu ul li.menu2 a {
background: url(images/7.png) repeat scroll 0%; /*Lien vers votre image*/
/*border-right: 5px solid #fff;*/ /*On peut mettre un bordure, dans ce cas on change aussi la valeur border dans imageMenu.js */
}
#imageMenu ul li.menu3 a {
background: url(images/8.png) repeat scroll 0%; /*Lien vers votre image*/
/*border-right: 5px solid #fff;*/ /*On peut mettre un bordure, dans ce cas on change aussi la valeur border dans imageMenu.js */
}
#imageMenu ul li.menu4 a {
background: url(images/9.png) repeat scroll 0%; /*Lien vers votre image*/
/*border-right: 5px solid #fff;*/ /*On peut mettre un bordure, dans ce cas on change aussi la valeur border dans imageMenu.js */
}
#imageMenu ul li.menu5 a {
background: url(images/10.png) repeat scroll 0%; /*Lien vers votre image*/
/*Pas de bordure pour la dernière image */
}
.clear {
clear: both;
}
/*************************************************************/
Il ne nous reste plus qu’à définir ce vers quoi notre menu va nous envoyer; moi j’ai choisis d’afficher des articles par tags, voici un extrait de mon header.php :
<p id=
“imageMenu” style=
“margin: 0pt auto”> </p>
<ul>
<li class=“menu1″><a href=“http://geekworld.idoo.com/?tag=css”>Menu 1</a></li>
<li class=“menu2″><a href=“http://geekworld.idoo.com/?tag=ajax”>Menu 2</a></li>
<li class=“menu3″><a href=“http://geekworld.idoo.com/?tag=web-design”>Menu 3</a></li>
<li class=“menu4″><a href=“http://geekworld.idoo.com/?tag=wordpress”>Menu 4</a></li>
<li class=“menu5″><a href=“http://geekworld.idoo.com/?tag=theme”>Menu 5</a></li>
</ul>
<script type=“text/javascript”>
window.addEvent(\\\\\\\\\\\\\\\\‘domready\\\\\\\\\\\\\\\\‘, function(){ var myMenu = new ImageMenu($$(\\\\\\\\\\\\\\\\‘#imageMenu a\\\\\\\\\\\\\\\\‘)); }); </script>
Et voici le détail du code à connaitre dans imageMenu.js :
getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 200,
transition: Fx.Transitions.bounceOut,
duration: 650,
open: null,
border: 0
};
},
openwidth : défini la taille de votre image ouverte en pixels
transition : définit le type de transition de mouvement voir Fx.Transitions
border : mettre la même valeur que la bordure du fichier imageMenu.css
Et voilà vous pouvez admirer votre superbe menu !!!!
