HTML L’attribut contextmenu

Comment creér un menu contextue pour un élément avec html.

Somaire

Définition et utilisation attribut contextmenu

HTML Les attributs globaux

L'attribut contextmenu spécifie un menu contextuel pour un élément. Le menu contextuel s'affiche lorsqu'un utilisateur clique sur l'élément.

La valeur de l'attribut contextmenu est l'id de l'élément <menu> pour l'ouvrir.


Syntaxe

<element contextmenu="menu_id">


Appui de navigateur

Internet Explorer Fire Fox Opera Google Chrome Safari

L'attribut contextmenu n'est actuellement (jusqu’à la date de la rédaction du présent document) pris en charge que par le navigateur Fire Fox 8 +.


Exemple: Spécifiez un menu contextuel pour un élément <p>. Le menu contextuel doit s'afficher lorsqu'un utilisateur fait un clic droit sur l'élément:

Sélectionner le code
 
  <!DOCTYPE html>
  <html>
  <body>
  <p contextmenu="supermenu">Ce paragraphe un menu contextuel appelé «supermenu". Faites un click droit pour le voir.</p> 
  <menu  type="context" id="supermenu">
       <menuitem label="Step 1: Write Tutorial" onclick="faireQuelqueChose()">    </menuitem>
       <menuitem label="Step 2: Edit Tutorial" onclick="faireAutreChose()">    </menuitem>
             <menu label="share">
        <menuitem label="twitter" onclick="alert('pas encors pret')"></menuitem>
        <menuitem label="facebook" onclick="alert('pas encors pret')"></menuitem>
        <menuitem label="g+" onclick="alert('pas encors pret')"></menuitem>
  </menu>
  <p><b>Note:</b> Le menu contextuel doit s'afficher lorsqu'un utilisateur fait un clic droit sur l'élément p.</p>
  </body>
  </html>
   

Voici un autre exemple donné par mozilla


Différences entre HTML 4.01 et HTML5

L'attribut contextmenu est une nouveauté en HTML5.


Valeurs d'attribut

Valeur Description
menu_id L'id de l'élément <menu> pour ouvrir
 Retour à la liste des attributs globaux   accueil HTML 5
Par gerywa 20 mars 2014
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    la propriété border-top-right-radius

    Définit la forme du coin  haut à droite de la frontière

    padding-right

    Définit la marge intérieure droit d'un élément

    border-style

    Définit le style des quatre frontières