Добавить контекстное меню на свой сайт с HTML5

Контекстное меню – это меню, которое отображается при щелчке правой кнопкой мыши на экране компьютера. Меню обычно содержит ярлыки для некоторых из наших любимых повторяющихся действий, таких как создание или сортировка папок / файлов, открытие нового окна приложения или доступ к системным настройкам для изменения параметра.

В течение многих лет «контекстное меню» находится в родных приложениях. В настоящее время контекстное меню приносит массу преимуществ для веб-приложений, например, в Файловый менеджер cPanel а также Gmail, Эти меню построены с использованием сложных сценариев JavaScript.

В будущем мы сможем создавать контекстные меню для использования на нашем веб-сайте через HTML5. Давай проверь это со мной.

Рекомендуемое чтение: создать ярлык настройки в меню правой кнопкой мыши Mac [Guide]

Построение контекстного меню
HTML5 представил два новых элемента, menu и menuitem, для создания контекстного меню. Чтобы браузер воспринимал элемент меню как «контекстное меню», мы должны установить тип меню как контекст и также присвоить ему уникальный идентификатор.

Ниже приведен пример, где мы создали контекстное меню из двух пунктов.

Также возможно добавить подменю, вложив элемент меню следующим образом:

Теперь, чтобы контекстное меню отображалось на экране при выполнении щелчка правой кнопкой мыши, мы используем новый атрибут HTML с именем contextmenu. Этот атрибут используется для выбора меню с указанным идентификатором; учитывая наш пример выше, мы можем нацелить наше контекстное меню с contextmenu = context-menu-id.

Мы можем назначить атрибут в теге body, если хотим использовать контекстное меню на всей странице. Мы также можем добавить его в элемент HTML, чтобы использовать меню исключительно внутри этого элемента.

Новое контекстное меню появится в меню операционной системы, как показано ниже.

Добавление иконки
Я уверен, что многие из вас видели какое-то контекстное меню с иконкой рядом с ним. В некоторых случаях значок может быть отличным визуальным средством, которое может помочь пользователям быстро понять и понять назначение меню. Кроме того, он также дает пользователям подсказку, какое приложение связано с новыми меню.

Мы также можем легко добавить значок в наше контекстное меню на основе HTML5, используя атрибут icon, например:

Вот что мы видим в браузере.

Сделать меню работающим
На этом этапе наше новое контекстное меню еще ничего не делает, когда мы нажимаем на него. Но очень легко заставить его работать с чистым JavaScript. В нашем примере у нас есть меню «Выбор электронной почты». Это меню позволит пользователям отправлять выделенный текст с помощью приложения электронной почты.

Чтобы воплотить эту идею, добавим функцию для захвата выделенного пользователем текста.

function getSelectedText () {
var text = “”;
if (window.getSelection) {
text = window.getSelection (). toString ();
} else if (document.selection && document.selection.type! = ‘Control’) {
text = document.selection.createRange (). text;
}
вернуть текст;
};

Затем мы создаем еще одну функцию, скажем sendEmail (), которая откроет почтовое приложение. Тема электронного письма будет предварительно заполнена заголовком документа, а содержание электронного письма будет заполнено выбранным пользователем текстом.

function sendEmail () {
var bodyText = getSelectedText ();
window.location.href = “https://www.hongkiat.com/mailto:?subject=”+ document.title + ‘& body =’ + bodyText + ”;
};

Наконец, мы добавляем его в наше меню с атрибутом onclick, чтобы он работал после нажатия.

В прошлом мы рассмотрели, как использовать HTML5 EditableContent, который позволяет нам редактировать веб-контент непосредственно из внешнего интерфейса. Мы можем использовать эту функцию, добавив ее в наше меню под названием «Редактировать содержимое».
Примечание
Я очень взволнован с этой новой функцией. Я вижу много возможностей вещей, которые мы можем построить с помощью HTML5 Contextual Menu. К сожалению, на момент написания этой статьи только Firefox реализовал эту функцию. Я надеюсь, что другие браузеры скоро догонят.

Вы можете увидеть демо ниже (это работает только на Firefox).