Outils pour utilisateurs

Outils du site


cours2007:poo1: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(ment fait)

Présenter est faire valider votre code du menu en HTML/CSS (rappel)

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-release-1.11.element_window_fx.js
minimal/
	minimal.html
	minimal.js

Extraire l'archive, puis faire une copie du dossier minimal :

javascript/
	mootools-release-1.11.element_window_fx.js
minimal/
  minimal.html
  minimal.js
menu_css/ (copie de minimal/ )
  menu_css.html (copie de minimal.html )
  menu_css.js (copie de menu_css.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.

<!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-release-1.11.element_window_fx.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 nommé 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 setStyles 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 un effet d'apparition (Fx.Slide) :

var menuSlide = new Fx.Slide($('menu'));

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

menuSlide.toggle();

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

L'effet le plus polyvalent est Fx.Styles qui permet d'animer plusieurs styles CSS.

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

<h3 id='titre1'>Titre</h3>
<div id='section1'>
  bla bla bla bla bla bla bla bla bla bla bla bla 
  bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
  • Dans la console de FireBug, tester un effet Fx.Slide sur l'élément d'id section1
  • Écrire le code javascript qui :
    • Qui fait apparaître la division quand on survole le titre
    • Qui fait disparaître la division quand on quitte le titre
  • Généraliser à plusieurs sections :
<h3 id='titre1'>Titre</h3>
<div id='section1'>
  bla bla bla bla bla bla bla bla bla bla bla bla 
  bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
<h3 id='titre2'>Titre</h3>
<div id='section2'>
  bla bla bla bla bla bla bla bla bla bla bla bla 
  bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
<h3 id='titre3'>Titre</h3>
<div id='section3'>
  bla bla bla bla bla bla bla bla bla bla bla bla 
  bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
...
cours2007/poo1/tp/menu_css.txt · Dernière modification: 2008/04/24 22:00 (modification externe)