Blog de la rubrique Web

Un article de Bovino    1 Commentaire

HTML5 redéfinit certains aspects et certaines balises du HTML.
Parmi les éléments qui retrouvent une nouvelle jeunesse figure la balise menu.
Bien sûr, évoquer cette balise ne présente que peu d’intérêt puisqu’elle n’est, à l’heure actuelle (et sauf erreur de ma part) reconnue par aucun navigateur…

Par aucun navigateur ? Vraiment ?

En fait, pas tout à fait : parmi les différentes utilisations de la balise menu, une est utilisable par Firefox depuis la version 8 : la personnalisation du menu contextuel lié à un élément de la page (ou de la page elle-même).

La syntaxe de la balise menu est la suivante :

<menu type="..." id="...">

où type correspond au comportement attendu pour le menu et id l’identifiant du menu.
Cette balise peut (dans le cadre du menu contextuel) contenir soit des sous-menus représentés par une nouvelle balise menu soit des éléments de menu représentés par des balises menuitem.

Bon, assez d’explications théoriques, passons à la pratique avec un exemple :

Dans cet exemple (relativement simple), nous ajoutons des liens vers developpez.com et différents forums du site.
Vous pouvez constater que le type de menu est context pour préciser qu’il s’agit de personnaliser le menu contextuel.
D’autre part, le sous-menu et les éléments des menus possèdent des attributs label indiquant le texte à afficher correspondant à chaque option.
Les éléments de menus possèdent quant à eux des attributs icon (image apposée à côté de l’élément) et onclick (action JavaScript à lancer au clic sur cet élément).

Pour autant, vous aurez beau ajouter cette portion de code dans votre page et faire des clics droits partout dans la page (sur Firefox bien entendu) pour tester, rien ne se passera !
En fait, nous avons oublié l’essentiel : déterminer à quel élément de la page le menu contextuel est associé.
Pour préciser cela, il suffit d’ajouter un attribut contextmenu à l’élément souhaité. La valeur de cet attribut doit correspondre à l’identifiant (attribut id) du menu.
Dans l’exemple suivant, nous posons cet attribut sur la balise body afin que le menu contextuel s’applique sur toute la page :

Notre exemple est maintenant fonctionnel. Vous pouvez voir un exemple en ligne.