Outils pour utilisateurs

Outils du site


cours2007:poo1: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.

Initial

<ul>
  <li><a href="#">item 1</a></li>
  <li id="item2">
    <a href="#">item 2</a>
    <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">
    <a href="#">item 2</a>
    <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 : $E() pour trouver l'élément ul dans l'élément d'id item2.

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 :

  • Garder une référence à cet élément dans une variable :
    • var item2 = $('item2');
  • Trouver les autres éléments à partir de cette base : Element.getElement()
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 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.Style.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)
cours2007/poo1/tp/menu_css_depliant.txt · Dernière modification: 2008/08/30 22:00 (modification externe)