[Article] Personnalisez le menu contextuel avec Firefox
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 :
Code:
<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 :
Code:
1
2
3
4
5
6
7
8
9
| <menu type="context" id="developpez">
<menuitem label="Aller sur developpez.com" onclick="location.href='http://www.developpez.com'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menu label="Forums developpez.com">
<menuitem label="(X)HTML" onclick="location.href='http://www.developpez.net/forums/f39/webmasters-developpement-web/html-dhtml-xhtml/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="CSS" onclick="location.href='http://www.developpez.net/forums/f463/webmasters-developpement-web/css/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="JavaScript" onclick="location.href='http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="AJAX" onclick="location.href='http://www.developpez.net/forums/f458/webmasters-developpement-web/ajax/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
</menu>
</menu> |
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 sur votre site 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 :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Menu contextuel</title>
<style>
html, body{
height: 100%
}
h1{
text-align: center;
}
</style>
</head>
<body contextmenu="developpez">
<h1>Exemple de menu contextuel personnalisé</h1>
<div>Faites un clic droit dans la page pour voir les options ajoutées au menu contextuel.</div>
<menu type="context" id="developpez">
<menuitem label="Aller sur developpez.com" onclick="location.href='http://www.developpez.com'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menu label="Forums developpez.com">
<menuitem label="(X)HTML" onclick="location.href='http://www.developpez.net/forums/f39/webmasters-developpement-web/html-dhtml-xhtml/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="CSS" onclick="location.href='http://www.developpez.net/forums/f463/webmasters-developpement-web/css/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="JavaScript" onclick="location.href='http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="AJAX" onclick="location.href='http://www.developpez.net/forums/f458/webmasters-developpement-web/ajax/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
</menu>
</menu>
</body>
</html> |
Notre code est maintenant fonctionnel. Vous pouvez voir un exemple en ligne.
Billet original publié sur les blogs de developpez.com...
Merci à ClaudeLELOUP pour la relecture de ce billet ! :)
