L’élément de menu en HTML

L’élément de menu en HTML

  1. Objectifs

    • ِ Connaitre l’élément de menu en HTML.
  2. Historique

    • La balise <menu> a un peu d’une histoire troublée.
    • En HTML3, il était essentiellement synonyme de <ul>.
    • Déconseillé en HTML4
    • il a été ajouté à la spécification pour HTML5 .
  3. L’élément de menu en HTML

    • L’élément HTML <menu> représente un groupe de commandes que l’utilisateur peut utiliser ou activer.
    • La balise <menu> peut être utilisée afin de créer des menus (affichés en haut d’un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).



  4. Les attributs

      • Un menu peut contenir des options, une liste, des boutons, d’autres menus, des balises command, des input, des séparateurs <hr>.
    • Label
      • Cet élément doit avoir une balise ouvrante et une balise fermante contrairement aux éléments contenus.
      • Le nom du menu qui est affiché pour l’utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c’est le nom affiché pour le sous-menu.
      • Cet attribut doit uniquement être utilisé lorsque l’élément parent est un élément <menu>.
    • Type
      • Cet attribut indique le type de menu qui est déclaré. C’est un attribut à valeur contrainte qui peut prendre l’une des valeurs suivantes :
        • context : Cette valeur indique que le menu est dans un état de popup et qu’il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l’attribut menu d’un élément <button> ou via l’attribut contextmenu d’un élément. Cette valeur est la valeur par défaut de l’attribut lorsque l’élément parent est également un élément <menu>.
        • toolbar : Cette valeur indique que le menu est une barre d’outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments <li> ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l’attribut.

    Exemple: 1

    <menu type= "toolbar">
        <li><a href= "#">Home</a></li>
        <li><a href= "#">About</a></li>
        <li><a href= "#">Contact</a></li>
    </menu>

    Exemple: 2

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title> L'élément de menu</title>
    </head>
    <body>
    <!-- Suite de liens -->
    <menu>
         <li><a href="https://apcpedagogie.com">Accueil</a></li>
         <li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/Le-html/">HTML 5</a></li>
         <li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/les-styles-css">CSS 3</a></li>
         <li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/php">PHp 5</a></li>
         <li><a href="https://apcpedagogie.com/cours/apprendre-mysql-en-toute-simplicite/">MySQL</a></li>
    </menu>
    <!-- Suite de boutons -->
    <menu>
        <button type="button" onclick="alert('Fichier')">Fichier</button>
        <button type="button" onclick="alert('Editer')">Editer</button>
        <button type="button" onclick="alert('Afficher')">Afficher</button>
    </menu>
    </body>
    </html> 





Abonnez vous à notre chaîne YouTube gratuitement