Effets de menu avec Mootools
• ajax, tutoriel, web •Prototype, JQuery, script.aculo.us ... Les frameworks JavaScript sont nombreux et se valent tous plus ou moins. J'ai choisis Mootools pour sa rapidité, sa legereté et sa souplesse. Nous allons voir dans ce billet comment nous pouvons obtenir très facilement un effet simple mais efficace sur un menu.
Démo et code source !
Démo Code sourceEtape 1
Commencez par vous rendre sur le site de Mootools pour téléchargez la dernière version du framework, un fichier mootools.js que vous placerez dans votre environnement de travail. Il est préférable de prendre une version non compressée quand on développe pour pouvoir lire le code. Crée un fichier .html comme ceci :
Effets de menu avec Mootools
- Nous avons besoin d'un fichier de style CSS appelé style.css
- D'un fichier demo.js qui contiendra le code pour l'animation du menu
- Du fichier mootools.js récupéré sur le site web
Les éléments du menu seront placés dans une liste.
Etape 2
Rajoutons maintenant un peu de style à notre page, dans le style.css mettez :body
{
margin: 0;
padding: 0;
background: #ffffff;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}
ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px -35px;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 15px;
margin: 0;
margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #ccc;
background: #2c3572;
border: 1px solid #1004ff;
font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
color: #000;
background: #b0c9e7;
border: 1px solid #1004ff;
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
Etape 3
On va maintenant créer nos animations, dans le demo.js mettez ceci, les explications sont données en commentaires :
window.addEvent('domready', function(){
/* On récupère l'élement dont l'id est 'sliding-navigation'*/
/* et pour tous les liens "" on fait : */
$('sliding-navigation').getElements('a').addEvents({ // on rajoute un événement
mouseenter: function(){ //quand la souris est au dessus
this.set('morph', { // on change la méthode morph
duration: 1500, // on lui donne une durée de 1.5s
transition: Fx.Transitions.Elastic.easeOut // et un effet "elastique"
}).morph({ // puis on applique la méthode morph sur le menu
'padding-left': '30' // on augmente le padding-left de 30px
// donc décalage sur la droite de 30px
});
},
mouseleave: function(){
// quand la souris quitte le menu
this.morph({
'padding-left': '15' // on remet la valeur du padding-left initiale
});
}
});
});
Etape 4
On va maintenant donner à notre page un look plus sexy. J'ai crée l'image suivante
Donc notre fichier html devient comme ceci :
Effets de menu avec Mootools
Effets de menu avec Mootools
Par Jérôme Mahuet
Et il faut rajouter ceci au CSS :
h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}
h2 span
{
display: none;
}
p
{
color: #b0c988;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}
#navigation-block {
position:relative;
top:200px;
left:200px;
}
#hide {
position:absolute;
top:33px;
left:-190px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#8193a9;
font-weight: normal;
}