Intégration d’un menu image AJAX dans le header.
18 03 2008Le 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 :
- Le framework Mootools
- le script imageMenu (recueilli sur phatfusion et inspiré par Aaron Birch)
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 :
<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 :
<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 :
<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 :
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 !!!!
Salut!
super tutorial, j’ai beaucoup cherché un plugin pour ca mais il semble que ce soit la seul solution à ce que je veux obtenir…
malheureusement je ne comprend pas mon erreur car l’affichage ne marche pas et j’obtient une simple liste (c’est au dessus de mon cadre browse catégorie, est-ce du au fait que j’insert le code dans ma page index.php au lieu du header.
pourrais tu me donner un petit coup de main?
http://decade.free.Fr
Merci davance