L’élément de menu en HTML
L’élément de menu en HTML
-
Objectifs
- ِ Connaitre l’élément de menu en HTML.
-
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 .
-
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).
-
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> |
|
