Accueil    HTML    Balise MENU
 



balise menu  Balise MENU : Liste de menus

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <menu> a été initialement mise en place pour l'affichage d'un menu englobant une liste d'éléments sur une colonne, les valeurs inclues dans celui-ci pouvant être des éléments de type liste <li> ou des valeurs classiques.
Cet élément a été déprécié avec la version html 4.01.

Avec le html5 cette balise est réintroduite avec une sémantique en relation avec son nom : elle représente un menu regroupant des commandes comme par exemple une boîte à outil, une barre d'actions ou encore un menu contextuel. Les commandes sont des actions pouvant être déclenchées par l'utilisateur et sont déclarées avec la balise <command>.



Propriétés pour la balise menu :




Propriétés Définition Valeurs
label Nom associé au menu et affiché texte
type Détermine quel sera le rôle de l'élément menu context
list
toolbar


Exemple d'utilisation de la balise menu :




Déplacement d'un élément <div> avec des commandes définies dans un menu de type "toolbox" :

<menu label="Déplacement" type="toolbar" style="margin-left:20px; border:dashed 1px silver;">
   <command type="command" label="Déplacer vers le haut" onclick="MoveTop();">Déplacer vers le haut</command>
   <command type="command" label="Déplacer vers le bas" onclick="MoveBottom();">Déplacer vers le bas</command>
   <command type="command" label="Déplacer vers la droite" onclick="MoveRight();">Déplacer vers la droite</command>
   <command type="command" label="Déplacer vers la gauche" onclick="MoveLeft();">Déplacer vers la gauche</command>
   <command type="command" label="Recentrer" onclick="MoveCenter();">Recentrer</command>
</menu>


<div style="margin-left:20px; border:dashed 1px silver;">
   <label>Déplacement (menu alternatif)</label>
   <input type="button" onclick="MoveTop();" value="↑ Haut" />   
   <input type="button" onclick="MoveBottom();" value="↓ Bottom" />
   <input type="button" onclick="MoveLeft();" value="← Gauche" />
   <input type="button" onclick="MoveRight();" value="Droite →" />
   <input type="button" onclick="MoveCenter();" value="Recentrer" />
</div>


<div style="position:relative; margin-left:20px; border:solid 1px black; width:300px; height:200px;">
   <div style="position:absolute; top:80px; left:130px; width:40px; height:40px; border:solid 1px black; background-color:lightsteelblue;">
   </div>
</div>


Déplacement d'un élément <div> avec des commandes définies dans un menu de type "toolbox" :
Déplacer vers le haut Déplacer vers le bas Déplacer vers la droite Déplacer vers la gauche Recentrer