How-to's, general knowledge & tutorials

Voici un tutoriel mootools pour vous initier aux possibilités de ce fabuleux outil.

Ici on va créer un menu sur lequel on ajoute quelques lignes de javascript qui vont nous permettre d'appeler mootools...Pour cela il nous faut travailler avec plusieurs fichiers.

Index.php

Pour faire fonctionner notre scipt, il faut l'appeler à partir du fichier de base du template. Juste avant la balise , insérer le code suivant :

<!-- MORPHING MENU-->
<link rel="stylesheet" href="/templates//css/morphingmenu.css" type="text/css" />
<script type="text/javascript" src="/templates//js/morphingmenu.js"></script>
<!-- FIN MORPHING MENU -->

Morphingmenu.css

a.mainlevel_horizdemo {
 color: #101010;
 background: transparent;
 padding-left:30px;
}
 
ul#mainlevel_horizdemo li {
 background:#303030;
}
 

Morphingmenu.js

Et maintenant on attaque le gros du morceau. J'ai récupéré le code sur le site de mootools.net pour ne pas avoir à tout inventer !

On ne va pas tout regarder ensemble, mais juste la partie qui nous intéresse. Pour agir sur le menu créé auparavant, on doit

- définir sur quel élément on doit agir

- faire en sorte qu'on le fasse sur tous les objets identiques de la page, et non pas seulement sur le premier

- créer l'événement

window.addEvent('domready', function(){
 var list = $$('#mainlevel_horizdemo li');
 list.each(function(element) {
 
 var fx = new Fx.Styles(element, {duration:0, wait:false});
 var fx2 = new Fx.Styles(element, {duration:1000, wait:false});
 
 element.addEvent('mouseenter', function(){
 
 fx.start({
 
 
 'margin-left': 30,
 'background-color': '#555',
 'color': '#ff8'
 });
 fx2.stop();
 });
 
 element.addEvent('mouseleave', function(){
 fx2.start({
 
 
 'margin-left': 0,
 'background-color': '#303030',
 'color': '#888'
 });
 });
 
 });
 });

Explications :

var list = $$('#mainlevel_horizdemo li'); 

définit l'élément sur lequel on va pointer et l'enregistrer dans la variable list

list.each(function(element) {}

nous permet de créer une boucle pour agir sur tous les éléments identiques de la page stockés dans la variable list

element.addEvent('mouseenter', function(){
fx.start({'margin-left': 30,
'background-color': '#555',
'color': '#ff8'});

crée l'événement Fx.Styles qui aura pour but d'arriver aux styles définis

Paramètres du menu

Source : http://demos111.mootools.net/Fx.Styles