La balise Menu de HTML 5

Proche de la balise select, menu est ajouté à HTML 5 pour créer un menu contextuel ou une barre d'outils, selon le type assigné à la balise.

En fait le contenu est plus varié que pour select et les possibilités de rendu sont plus développées.

La balise menu est actuellement peut Implémentée. Vérification dans votre navigateur, on doit avoir ci-dessous une ligne de menu horizontal:

  • Fichier
  • Editer
  • Aide
  • Il est en fait possible d'obtenir le résultat voulu avec une feuille de style (voir les liens en bas), ce qui explique sans doute leretard pour implémenter cette balise.

    Voici l'image d'une barre d'outil créée avec la balise menu et des boutons ou du CSS 3 fournie par le W3C:

    Syntaxe

    Un menu peut contenir des options, une liste, des boutons, d'autres menus, des balises command, des input, des séparateurs <hr>.

    Cet élément doit avoir une balise ouvrante et une balise fermante contrairement aux éléments contenus.

    <menu type="" label="">
    </menu>
    <menu type="" label="">
      <option>
      <option>
    </menu>
    <menu type="" label="">
      <li>
      <li>
    </menu>

    Un bouton peut représenter un sous-menu, dans ce cas la syntaxe peut ressembler à ceci:

    <menu type="toolbar">
    <li>
    <menu label="Fichier">
    <button type="button" onclick="fopen()">Ouvrir</button>
    ... boutons....
    </menu>
    </li>
    <li>
    <menu label="Editer">
    <button type="button" onclick="fcopy()">Copier</button>
    ...
    </menu>
    </li>
    </menu>

    Le rendu correspond à l'image en début de page. Un menu interne dans un menu de type toolbar est présenté comme un bouton.

    Attributs de menu

    Attribut Valeur Fonction Version
    type "context"
    Liste de commandes qui apparaît dans un contexte.
    HTML 5
    type "toolbar"
    Barre d'icônes représentant des sous-menus ou des commandes.
    HTML 5
    type "list" (défaut)
    Liste de commandes.
     
    label chaîne
    Sert à identifier le menu ou le sous-menu.
    HTML 5
    ID Chaîne
    Identificateur utilisable pour associer le menu à un élément.
     

    Attribut relatif

    L'attribut relatif associe un menu à un autre élément de la page par l'ID de la balise menu. C'est donc un attribut général pour toute balise HTML.

    Attribut Valeur Fonction Version
    contextmenu ID menu
    Associe un menu contextuel à un élément.
    HTML 5

    Quand la souris passe sur cet élément, ou qu'une touche du clavier est pressée sur cet élément, un évènement "show" (affiche) est activé, le menu contextuel dont l'id est assigné à contextmenu doit automatiquement apparaître.

    Attributs des éléments contenus (commandes)

    Quel que soient leur type, élément de liste, option, bouton, les éléments d'un menu sont des commandes et ont un ensemble d'attributs utiles. On les appelle des facettes.

    Attribut Valeur Fonction Version
    type commande
    Définit le type de l'élément. Ex: radio.
     
    id chaîne
    Identificateur.
     
    label chaîne
    Texte affiché et visible par l'utilisateur.
    HTML 5
    hint chaîne
    Un message surgissant pour décrire la commande.
    HTML 5
    icon URL
    Adresse d'une image.
    HTML 5
    disabled disabled/rien
    Etat actif ou non.
     
    checked checked/rien
    Elément coché ou non.
     
    hidden true/false
    Elément caché ou non.
     
    action URL/script/<a>
    Action associée à l'élément.
     

    Action peut être un attribut de soumission de formulaire action="" ou un évènement JavaScript. Si l'élément est une simple URL dans une balise <a>, l'action est le contenu de l'attribut href.

    JavaScript

    On peut accéder à ces attributs avec ces variables JavaScript, si on donne à l'élément du menu dans le DOM le nom element:

    Voir aussi: Onglets en CSS.
    Cette démonstration utilise une liste pour créer des onglets entièrement avec une feuille de style. Le même principe peut être appliqué pour un menu horizontal.

    © 2010-2012 Xul.fr