HTML contextmenu屬性用法及代碼示例

HTML 上下文菜單屬性是一個全局屬性，將用於定義元素的context-menu欄。 contextmenu 屬性的值必須與ID<menu> 元素的。

所以本質上，上下文菜單似乎取決於用戶關係，例如當用戶right-clicks在元素上時。眾所周知，HTML5 允許我們自定義此菜單。以下是一些實現示例，包括嵌套菜單。

注意： HTML 上下文菜單屬性是不支持在HTML5.

用法:

<element contextmenu="menu_id">

屬性值：它包含值menu_id 它表示要打開的 <menu> 元素的 id。

HTML contextmenu 屬性示例

例子：下麵的 HTML 代碼說明了使用上下文菜單屬性。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>HTML contextmenu attribute </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>HTML contextmenu attribute</h2>
        <div style="background:green;border:2px solid
                    #black;padding: 10px;" 
             contextmenu="geeks">
            <p>A Computer Science Portal for Geeks</p>
            <menu type="context" id="geeks">
                <menu label="Share on...">
                    <menuitem label="Twitter"
                              onclick=
"window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
                    </menuitem>
                    <menuitem label="Pinterest"
                              onclick=
"window.open('http://pinterest.com/pin/create/button/?url=' + window.location.href);">
                    </menuitem>
                </menu>
                <menuitem label="Email This Page"
                          onclick=
"window.location='mailto:?body='+window.location.href;">
                </menuitem>
            </menu>
        </div>
        <p>A Computer Science Portal for Geeks</p>
        <hr>
        <p>Right click on green div and see the menuitem
    </center>
</body>
</html>

輸出：

HTML 上下文菜單屬性

支持的瀏覽器：

HTML contextmenu 屬性不再支持任何瀏覽器。

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML contextmenu Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。