contextmenu

L'attribut universel contextmenu correspond à l'identifiant d'un élément <menu> qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

Exemples

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="Partager">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Je découvre ContextMenu avec MDN');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_globaux/contextmenu');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

JavaScript

function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}

function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}

function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

Résultat

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de 'contextmenu' dans cette spécification.
Standard évolutif Pas de modification depuis le dernier état de HTML5.1
HTML5.1
La définition de 'contextmenu' dans cette spécification.
Version de travail Dérivation de WHATWG HTML Living Standard, définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 9 (9) Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support 20 (20) Pas de support Pas de support ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,