Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:tp:menu_css_depliant

Menu CSS "dépliant"

HTML

Faire un document HTML lié à MooTools et contenant un menu hiérarchique.

Exemple :

  • Item 1
  • Item 2
    • Item 2,1
    • Item 2,2
    • Item 2,3
  • Item 3
    • Item 3,1
    • Item 3,2
  • Item 4

Ajouter les id et classe qui vous semble nécessaire.

CSS

Facultatif : faire une mise en forme sommaire.

JavaScript

Le but est de généraliser un code simple.

Travail préalable

On va utiliser un effet présent dans les compléments de MooTools : Fx.Slide

Vous pouvez télécharger un ou plusieurs fichiers ne contenant que les fonctions qui vous sont nécessaires :

Télécharger le (ou les) plug-in souhaité à l'adresse : http://mootools.net/more

  • Cocher Fx.Slide .
  • Pour “Download Options” : cocher “No Copmression” pour le développement.
    • Ultérieurement télécharger une version compressée des librairies pour la mise en ligne.
  • Renommer le fichier pour refléter son contenu :
    • mootools-1.2.2.2-more.jsmootools-1.2.2.2-more-fx.slide-nc.js
  • Le placer avec vos autres fichiers (même répertoire par exemple).
  • Ajouter un lien dans les entêtes de votre fichier HTML (dans balise HEAD).
    • Attention, il doit être après le chargement de MooTools et avant votre propre script.
    • <script src="mootools-1.2.2.2-more-fx.slide-nc.js" type="text/javascript" charset="utf-8"></script>

Initial

<ul>
  <li><a href="#">item 1</a></li>
  <li id="item2">
    <p>item 2</p>
    <ul id="sub2">
      <li><a href="#">item 2,1</a></li>
      <li><a href="#">item 2,2</a></li>
    </ul>
  </li>
</ul>
window.addEvent('domready', function(){
  var fx2 = new Fx.Slide('sub2');
  $('item2').addEvent('click',function() {
   fx2.toggle();
  });
});

À titre d'exercice, dupliquer le même principe pour tous les éléments du menu.

Limiter les id

Supprimer les id pour les éléments à déplier :

<ul>
  <li><a href="#">item 1</a></li>
  <li id="item2">
    <p>item 2</p>
    <ul>
      <li><a href="#">item 2,1</a></li>
      <li><a href="#">item 2,2</a></li>
    </ul>
  </li>
</ul>

Maintenant vous devez trouver un moyen de référencer l'élément ul dans l'élément d'id item2.

window.addEvent('domready', function(){
  var fx2 = new Fx.Slide(????????);
  $('item2').addEvent('click',function() {
   fx2.toggle();
  });
});

Utiliser un sélecteur CSS : $$() pour trouver l'élément ul dans l'élément d'id item2.

Attention : $$() retourne un tableau d'éléments, ajoutez [0] à la fin de l'expression pour obtenir le premier élément du tableau.

Remarque : tester les sélecteurs d'élément dans la console de FireBug !

Utiliser une référence commune

L'idée est que l'on applique un traitement à un élément : item2 :

window.addEvent('domready', function(){
  var item2 = $('item2')
  var fx2 = new Fx.Slide(item2.????????);
  item2.addEvent('click',function() {
   fx2.toggle();
  });
});

Trouver les éléments de manière implicite

Modifier le code HTML pour n'avoir qu'un id pour le menu :

<ul id="menu">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Tester dans la console de FireBug http://mootools.net/docs/core/Element/Element#Element:getChildren:

$('menu').getChildren();

Pour appliquer le même traitement à plusieurs éléments, vous pouvez inspirez du code suivant :

var items=["un","deux","trois"];
items.forEach(function(item){
    alert(item);
});

Remarque : vous pouvez tester des codes de plusieurs lignes dans la console de FireBug; le bouton en bas à droite permet de changer de mode.

Allez plus loin

  • Replier le menu par défaut : Fx.Slide:hide
  • Indiquer les sections repliées : Element:toggleClass
  • N'avoir qu'une section dépliée (demander)
  • Modifier les CSS pour avoir un menu déroulant
  • N'avoir qu'un gestionnaire d'événement (dur voir : liens_comme_actions1)
  • Avoir plusieurs niveaux (encore plus dur)
cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/tp/menu_css_depliant.txt · Dernière modification: 2009/05/23 22:00 (modification externe)