Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:tp:menu_css

Menu CSS animé

Objectif : Animer un menu en utilisant du code JavaScript

Le but est d'adapter le code vu en TD à votre propre menu. Cela sera fait par étapes successives et non en reprenant directement le code.

Travail préalable

Faire un simple menu avec mise en forme CSS :

<ul id="menu">
    <li><a href="http://google.fr/">Google</a></li>
    <li><a href="...">test 2</a></li>
    ...
</ul>
#menu {
  ...
}
 
#menu li {
  ...
}
 
#menu li a {
  ...
}

Mise en place

Démarrer comme les TP précédant, vous devez avoir une page HTML chargeant la libraire MooTools et votre propre code JavaScript

Rappel :
Si ce n'est déja fait, vous pouvez télécharger les fichiers.

javascript/
	mootools-1.2.1-core-nc.js
minimal/
	minimal.html
	minimal.js

Extraire l'archive, puis faire une copie du dossier minimal (dans le même dossier !):

javascript/
	mootools-1.2.1-core-nc.js
minimal/
  minimal.html
  minimal.js
menu_css/ (copie de minimal/ )
  menu_css.html (renomer de minimal.html )
  menu_css.js (renomer de minimal.js )
  menu_css.css

Supprimer tous le contenu de menu_css.js. Dans un premier temps tout les essais sont à faire dans la console de FireBug.

Modifier le fichier HTML pour incorporer votre code HTML et CSS. Vérifier et modifier les liens vers les fichiers JavaScript si nécessaire :

  • Ici, changer le lien de minimal.js à menu_css.js
  • Ajouter un lien vers le fichier CSS :
    • <link rel="stylesheet" type="text/css" href=" ... " />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>menu css</title>
    <!-- Charge la libraire mootools (+element +window)-->
    <script src="../javascript/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
    <!-- Votre propre script -->
    <script src="menu_css.js" type="text/javascript" charset="utf-8"></script>
 
    <!-- AJOUTER LIEN VERS CSS -->
 
</head>
 
<body>
    <!-- LE CODE HTML DU MENU -->
 
 
</body>
</html>

Assurez-vous que MooTools est bien chargé :

Si ce n'est pas le cas, intitule de passer à la suite !

Démarche

Tester chaque fonction dans FireBug.

Suivre les étapes suivantes :

Obtenir les éléments

Quel sélecteur CSS permet de modifier les styles que vous voulez changer ?

Exemple :

  #menu li a {
     display:block;
     margin: 0;
     font-size:20px;
     background-color:#5E994C;
  }

Ici, c'est ”#menu li a”

Tester le code suivant dans FireBug : (à adapter à votre cas)

$$('#menu li a');

Vérifier que vous obtenez bien les éléments désirés.

Vous pouvez trouver la documentation de la fonction $$ sur le site de la librairie MooTools.

Modifier les éléments

La fonction $$ retourne un tableau d'élément HTML de type Elements

Elements permets d'utiliser les méthodes de Element, cela permet d'appliquer la même transformation à tous les éléments.

Tester la méthode http://mootools.net/docs/core/Element/Element.Style#Element:setStyle pour changer les styles.

Vous pouvez vérifier que le DOM à changer :

Mais pas le code source (Ctrl+U) !

Animer !

Dans la librairie MooTools, on créé des objets qui représentent les effets d'animation.

Exemple :

var menuEffet = new Fx.Morph($('menu'),{
  duration:6000,
  link:"cancel",
  transition: Fx.Transitions.Bounce.easeInOut
});

On peut ainsi faire apparaître et disparaître le menu :

menuEffet.start({
  'line-height':30,
  'background-color':"#D00"
});

Vous pouvez trouver d'autres effets en lisant la documentation. Avec FireBug c'est très simple de les tester.

D'autre effet sont à télécharger séparément :

Animer suite à un événement

On va prendre comme événement le survol : mouseenter / mouseleave.

Mais on peut utiliser tous événements : Event compatibility tables

Pour un seul élément (identifié par l'id menu), adapter le code suivant :

window.addEvent('domready', function(){
  var element = $('menu');
  var fx = // votre effet appliqué à l'élément
  element.addEvent('mouseenter',function() {
    fx. // lancer l'effet
  });
  element.addEvent('mouseleave',function() {
    fx. // lancer l'effet inverse
  });
});

Pour plusieurs éléments (obtenu par un sélecteur CSS #menu li a), adapter le code suivant :

window.addEvent('domready', function(){
  $$('#menu li a').each(function(element) {
    var fx = // votre effet appliqué à un élément
    element.addEvent('mouseenter',function() {
      fx. // lancer l'effet
    });
    element.addEvent('mouseleave',function() {
      fx. // lancer l'effet inverse
    });
  });
});

Aller plus loin

Essayer les effets de MooTools -more- :

Télécharger le fichier et ajouter le lien vers votre page. Puis tester l'effet désiré.

Alternative :

cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/tp/menu_css.txt · Dernière modification: 2009/05/18 22:00 (modification externe)