En parcourant l’excellent smashingmagazine j’ai trouvé cet article (en espagnol mais on comprend le tuto quand même) sur la création d’un menu circulaire en CSS.
C’est vraiment sympa. Dès que j’aurai le temps, je proposerais une traduction.
En attendant voici le lien : metal.ize
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 :
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 :
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 à tous,
j’ai maintenant ajouté mon menu issu de mootools dans le header de mon thème.
J’expliquerais bientôt comment faire.
@+
Salut à tous,
j’ai enfin trouvé sur le blog de Nico la traduction du thème Ext js ainsi que l’explication du no-fonctionnement sur WordPress 2.3.3
Un grand merci à nico pour ce travail.
Suite à mon précédant billet, j’ai trouvé ce lien pour permettre d’avoir un accordéon dans la barre latérale, mais celui-ci n’utilise pas le framework Mootools mais jQuery.
Salut à tous, je compte rédiger d’ici peu des tutos décrivant l’intégration d’effets mootools dans nos chères pages WordPress.
J’ai déjà réussi à mettre un menu image dans le “header” (merci pour l’intégration du script à niss) sur un site local de test et je décrirais bientôt le pas à pas
Pour les gens intéressés par le web design et le WEB 2.0 , Mootools n’est pas un mot étranger. En effet ce framework Ajax est de plus en plus répandu sur la toile et présent sur de nombreux sites comme niss par exemple.
Un site nommé Phatfusion présente des utilisations magnifiques de mootools pour agrémenter votre site. Le plus beau pour moi reste le menu image inspiré par le site du photographe Aaron Birch. C’est le plug-in utilisé par niss sur sa sidebar, il explique d’ailleurs sur ce post (dans les commentaires) comment il l’a intégré à WordPress.
Si vous avez des questions, n’hésitez pas.
Salut à tous, voici un listing des sites où l’on peut trouver des thèmes pour WordPress :
Voici les différents sites de templates CSS que j’ai répertorié :
Tout d’abord merci de vous être arrêter sur ce site. Ce site a pour objectif de vous faire partager mes différentes trouvailles au cours de mes pérégrinations sur la toile et de vous faire partager mes centres d’intérêt à savoir :
Je tiens à préciser que je suis encore loin d’être expert dans les domaine pré-cités mais si mes maigres connaissances peuvent vous aider, j’en serai ravi.
Merci.
