Атрибут contextmenu
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает контекстное меню для элемента.
Синтаксис
contextmenu="идентификатор"Значения
В качестве значения указывается идентификатор меню, созданного с помощью тега <menu>.
Значение по умолчанию
Нет.
Применяется к тегам
<a>, <abbr>, <address>, <area>, <b>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <map>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>
Пример 1
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contextmenu</title>
</head>
<body>
<p><img src="images/figure.jpg" alt="" contextmenu="edit"></p>
<menu type="context" id="edit">
<li>Вырезать</li>
<li>Копировать</li>
<li>Вставить</li>
<li>Редактировать</li>
<li>Выравнивание</li>
</menu>
</body>
</html>Пример 2
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contextmenu</title>
<style>
.rotateleft {
transform: rotate(-90deg);
}
.rotateright {
transform: rotate(90deg);
}
</style>
<script>
function rotateLeft() {
document.querySelector("img").classList.toggle("rotateleft");
}
function rotateRight() {
document.querySelector("img").classList.toggle("rotateright");
}
</script>
</head>
<body>
<img src="images/figure.jpg" alt="" contextmenu="edit">
<menu type="context" id="edit">
<menuitem icon="images/object-rotate-right.png"
onclick="rotateRight()">Повернуть на 90º ПЧС</menuitem>
<menuitem icon="images/object-rotate-left.png"
onclick="rotateLeft()">Повернуть на 90º ПрЧС</menuitem>
</menu>
</body>
</html>Браузеры
Firefox для создания меню поддерживает нестандартный тег <menuitem>.
