Создание контекстных меню на HTML5


Содержание материала:

Frontender Magazine

Обновление: контекстные меню отображаются даже если отключен JavaScript; так что лучше всего создавать их разметку с его помощью. Либо с помощью innerHTML в сложных случаях, либо с помощью DOM API в простых.

Один из брильянтов в пыли спецификации HTML5 это контекстные меню. Они позволяют разработчикам создавать свои собственные контекстные меню для определенных блоков с помощью элементов menu и menuitems . Так как информация о меню находится прямо на странице, то нет необходимости создавать плагины. Давайте я покажу как это делается!

Для начала напишем HTML и определим ID меню:

Теперь давайте создадим пользовательские пункты контекстного меню для этого блока:

Теперь, когда у нас есть тег menu для которого задан атрибут type=»context» и id , значение которого соответствует значению атрибута contextmenu блока, для которого меню предназначено, контекстное меню будет создано.

У элементов меню могут быть атрибуты label , icon , и onclick , которые будут определять его представление и поведение. Атрибут onclick может вызывать предопределенные функции или содержать инлайн-код. Множество элементов могут использовать одно и тоже меню, так что дублировать их не понадобится.

Это то самое место, где мне бы стоило написать обо всем более детально, но это так просто, что я не хочу быть нудным… Посмотрите пример.

Единственный браузер, который поддерживает это API на данный момент Mozilla Firefox. Я бы не сказал, что контекстное меню — критически необходимая фича, но это мило и я планирую в ближайшее время добавить её в свой блог. Это API прекрасная демонстрация принципа «ненавязчиво делает жизнь лучше и совершенно не вредит». Мой пример с публикацией в социальных сетях крайне примитивен и вторичен; есть идеи как можно использовать API контекстного меню с большей пользой? Расскажите об этом в комментариях!

Контекстное меню HTML [закрыт]

Элемент не добавляется

Закрыт по причине того, что непонятна суть вопроса участниками Alex, Dmitry Maslennikov, kizoso, gil9red, Gleb Kemarsky 26 окт ’17 в 14:20 .

Постарайтесь писать более развёрнутые вопросы. Для получения ответа поясните, в чём именно вы видите проблему, как её воспроизвести, что вы хотите получить в результате и т. д. Приведите пример, наглядно демонстрирующий проблему. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

Контекстное меню в браузере средствами HTML5

В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 — contextmenu . Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным.

Для чего может быть предназначен атрибут contextmenu ? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строки кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.

Вот как он работает:

Использовать contextmenu гораздо проще, чем может показаться на первый взгляд. Нужно добавить атрибут contextmenu :

Затем создаем меню:

Атрибут id должен соответствовать атрибуту contextmenu . Таким образом, возможно использовать разные контекстные меню для разных частей страницы.

Затем добавляем пункты меню. Сначала вставляем пункт меню с текстом и иконкой, затем добавляем ссылку для трансляции ткущей страницы в Facebook, а в финале вставляем ссылку для обновления страницы. Получается контекстное меню с тремя пунктами:

Также можно создавать подменю:

Очень интересное и полезное свойство HTML5. Но, его применение ограничивается только браузером Firefox.

Блог Vaden Pro

Не так давно в свет вышел новый стандарт разметки гипертекста html5, который открыл перед веб-мастерами огромный простор для улучшения понимания структуры сайта поисковыми роботами. Изменения коснулись и подходов к разметке навигации.

При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:

Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?

Новый подход к верстке меню в html5

С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:

На первый взгляд все прекрасно, да и на второй ошибок особо здесь нет, НО! Списки предназначены просто для перечисления чего-либо по порядку. Они не предназначены для разметки навигации. И если раньше у нас особо не было выбора как размечать навигацию, то в новых реалиях все значительно упростилось.

Для того, чтобы поисковый робот понял, что перед ним находится элемент навигации по сайту одного наличия тега nav уже более чем достаточно. А дальше мы можем все максимально упростить:

Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:

  • Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
  • Меньше тегов – короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
  • Чем лаконичнее код, тем он чище и проще к восприятию.
Топ-пост этого месяца:  Эмоджи слайдер в Instagram Stories - как добавить и использовать

Как сверстать вложенные меню в html5?

Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:

Используя тег section мы объединяем группу ссылок в 1 логический элемент меню, дальше же действуем по принципу схожему с принципом вложенности списков: используя второй nav внутри первого мы сообщаем о принадлежности ссылок в этом теге к более низкому уровню навигации, тобишь говорим, что ссылки которые будут в нем содержаться это уже не пункты, а подпункты нашего меню.

Эта конструкция хоть и не привычна на первый взгляд, но все-же во многом проще, чем аналогичная структура выполненная списками.

Подводя итоги

Хоть подход с использованием списков во многом и устарел, но ничего плохого в нем по-прежнему нет. Упростить код или же нет зависит во многом от Вашего желания и особенностей проекта.

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

LearnBuilding HTML5 Context Menus

Matt West
writes on March 25, 2014

A lesser known feature of the HTML5 specification is context menus. These allow you to add custom items to the menu that appears when a user right-clicks on the page. Using JavaScript, you can then control the actions these items will perform when clicked.


In this blog post, you’re going to learn how to create your own context menus using the and elements.

Let’s get started.

Free trial on Treehouse: Do you want to learn more about HTML5 and front-end development? Click here to try a free trial on Treehouse.

Browser Support for HTML5 Context Menus

HTML5 context menus are currently only supported in Firefox (8+). This feature has been around for some time now, but no other browsers have implemented it. However, there is a polyfill available that will add support for context menus in other web browsers.

The menu and menuitem Elements

HTML5 context menus are constructed using two elements, and .

The element has a number of attributes that control how it will be displayed in the browser.

The type attribute is used to specify that we’re creating a context menu. This is important as the element can also be used for marking up other kinds of menus.

It’s important that you give your element an id , otherwise you won’t be able to use the menu on your page (more on this later).

The label attribute can be specified on nested elements to set the text that will be displayed in the main context menu.

Similarly the icon attribute can be used to specify the location of an icon image that will be displayed alongside the label text for nested menus.

Creating Menu Items

The element is used to create a new menu item. The label attribute should contain the text that you wish to display in the menu. You can also optionally specify an icon attribute with a path to an image to display alongside the label text.

The action a menu item will perform is defined using JavaScript. You can use the onclick attribute to add this JavaScript directly to the element.

Note: I’m not a huge fan of using the onclick attribute to define event handlers, but I wasn’t able to get this working using an unobtrusive JavaScript approach.

Assigning Context Menus

Once you’ve created your context menu, you need to assign the menu to an element on the page. Your menu will only be visible in the context menu if the user right-clicks on this particular element.

You can assign a menu by specifying the contextmenu attribute on the desired element and setting its value to the id of your element.

If you want your menu to appear regardless of where the user clicks on the page, you could assign the menu to the tag.

Nested Menus

Nested Context Menus

You can nest elements within one another to create more complex menu structures. This can be particularly handy if you want to provide a large number of controls but don’t wish to clutter up the main context menu.

Nested elements should include a label attribute containing the text that will be displayed in the parent menu. You can also specify an icon attribute with a path to an image that will be displayed alongside the label.

Context Menu Demo

HTML5 Context Menus

Putting this all together, here is a demo of an example context menu that provides options to share the current page. Here, we’re just going to use some simple JavaScript that will redirect the user to the appropriate sharing URL when the menu item is clicked.

In this case, we’re just going to use a simple

Final Thoughts

Whilst I can think of a number of legitimate uses for HTML5 context menus (in-game controls being one — pause, restart, etc.), I also worry that the power to invade the browser UI like this could be exploited. Take some time to think whether the controls you plan to provide through the context menu could not be delivered better through a different interface. We run the risk of polluting the context menu and confusing users if we don’t use this feature responsibly.

What are your thoughts about HTML5 context menus? Do you wish other browsers would hurry up and implement this feature, or are you worried that it will just be exploited? Let us know in the comments below.

Useful Links

7 Responses to “Building HTML5 Context Menus”

スーパーコピー時計専売店当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安!ブライトリングコピー,代引きなどの商品や情報が満載!全商品写真は100%実物撮影です! お客様の満足度は業界No.1です!スーパーコピー時計,時計コピー ,ブランド時計コピー販売(n級品)店舗 ブランド腕時計(ロレックス,ブライトリング,タグホイヤー,オメガ,ガガミラノなど)の最新 情報やイベントを紹介する正規販売店と腕時計コピーの専門サイトです。当店はロレックスやパテックフィリップなどの新品スーパーコピー時計の販売と。
エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.wtobrand.com/he1.html

Топ-пост этого месяца:  Масслукинг что это и как настроить массовый просмотр сторис в Инстаграм

Your comment form ate my HTML – it really should escape it instead. The HTML I posted was:

menuitem label=”Tweet This Page” >

Sorry about that.
This comments system has a dislike for code.

You mentioned you weren’t able to write the JS code unobstrusively (horrible spelling, too lazy to fix �� but I had no issue simply adding an ID to the menu item and adding a click handler:

document.addEventListener(“DOMContentLoaded”, function() <
document.querySelector(“#menuItem1”).addEventListener(“click”, function() <
console.log(“m1 click”);
>, false);
>, false);

Am I missing something?

Oh that’s awesome!
Good to know it’s possible ��

From a usability point of view, who will actually know that you can right-click to access these menu items, you would need a space explaining this, which you could have populated with the required links in the first place.

As you mention, use within html5 games could work nicely, a bit like how you would interact with Flash (sorry only example I could think of)

Maybe also instead of links it could be used to place a short message, if right clicking on a copyrighted image, a kind reminder “not for personal use” etc?


Often times a web app will feel like a desktop environment, in which case a user might try to use a right-click context menu without knowing any implementation standards.

As a user, it has been nice to find such a feature when I instinctively/accidentally right-click on the web.

Создание контекстного меню с помощью JQuery с холстом HTML 5

Я пытаюсь разработать HTML 5 Canvas имеет контекстное меню. Когда вы нажимаете для каждого изображения в Canvas, оно отображает контекстное меню для каждого изображения. Там есть только один холст

Он покажет все изображение, когда я рисую. Я пробую контекстное меню библиотеки jquery, оно поддерживает только в случае, если у вас больше холста (потому что он использует class или элемент id для обнаружения HTML-элемента).

Теперь я хочу использовать только 1 холст, я был обнаружен щелчок для каждого изображения в холсте, но я не знаю, как создать контекстное меню. Можете ли вы предложить мне использовать библиотеку jquery или дать мне пример в моем случае.

Одна из идей заключается в создании собственного пользовательского контекстного меню с использованием неупорядоченного списка.

Override контекстное меню по умолчанию путем прослушивания contextmenu событий на холсте.

Когда контекстная кнопка мыши нажата внутри определенного изображения, нарисованного на вашем холсте, вы можете перестроить UL с элементами списка, индивидуализированными для изображения, которое было нажато.

Установите положение UL position:absolute , left , top чтобы разместить свое контекстное меню над положением мыши на холсте.

Вы можете скрыть UL, когда он не нужен.

Слушайте события щелчка в элементах списка UL, чтобы отвечать на выбор контекстного меню пользователя.

Создайте контекстное меню, используя JQuery с HTML 5 Canvas

Я пытаюсь разработать HTML 5 Canvas с контекстным меню. Если щелкнуть каждое изображение в Canvas, оно отобразит контекстное меню для каждого изображения. Там у меня только один холст

Он покажет все изображение, когда я рисую. Я пробую контекстное меню библиотеки jquery, оно поддерживается только в том случае, если есть больше canvas (потому что оно использует элемент class или id для обнаружения элемента HTML).

Теперь я хочу использовать только 1 холст, у меня был обнаружен клик для каждого изображения на холсте, но я не знаю, как создать контекстное меню. Можете ли вы предложить мне использовать библиотеку jquery или привести пример в моем случае.

1 ответ

Одна из идей — создать собственное контекстное меню, используя неупорядоченный список.

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

Если щелкнуть контекстную кнопку мыши внутри определенного изображения, нарисованного на холсте, вы можете перестроить UL с элементами списка, индивидуализированными для изображения, по которому щелкнули.

Установите положение UL position:absolute , left , top чтобы расположить контекстное меню над позицией мыши на холсте.

Вы можете скрыть UL, когда он не нужен.

Прослушайте события щелчка в элементах списка UL, чтобы ответить на выбор пользовательского контекстного меню.

Пример кода и демонстрация:

Создание контекстных меню на HTML5

Атрибут oncontextmenu срабатывает, когда пользователь щелкает правой кнопкой мыши по элементу, чтобы открыть контекстное меню.

Примечание: Несмотря на то, что событие oncontextmenu поддерживается во всех браузерах, contextmenu атрибут в настоящее время поддерживается только в Firefox.

Поддержка браузера

Атрибут события
oncontextmenu Да Да Да Да Да

Различия между HTML 4,01 и HTML5

Атрибут oncontextmenu является новым в HTML5.

Html5 контекстное меню. Собственное контекстное меню с использованием JavaScript

В этой статье я приведу обзор двух элементов HTML5 : и , которые входят в спецификацию интерактивных элементов. Эти два элемента являются одними из тех, которые в среде разработчиков обсуждаются в последнюю очередь, вероятно, из-за отсутствия их поддержки в основных браузерах. Firefox — единственный браузер, в котором реализована поддержка этого тега.

Элемент Menu против элемента Nav

Когда мы говорим о menu , важно не путать его с тегом
Если не представляете, куда поместить эту разметку, помещайте перед закрывающим тегом body. Прежде чем перейти к CSS, уточним пару моментов:

  1. Мы хотим, чтобы контекстное меню появлялось там, где был выполнен правый клик, то есть ему нужно абсолютное позиционирование. Поэтому не стоит его разметку помещать в контейнер с относительным позиционированием.
  2. Нам потребуются какие-нибудь переменные или атрибуты, чтобы можно было определить, к какой задаче относится выбранное действие.

А теперь стили.

Приводим наше меню в порядок — CSS

Разворачиваем наше контекстное меню — JavaScript

Позиционирование нашего контекстного меню

Цепляем события к пунктам контекстного меню

Если ваше приложение сложнее данного примера, и у вас планируется динамическое содержимое контекстного меню, придется подробнее вникнуть в происходящее далее, чтобы самому додумать недостающие детали. В нашем приложении все проще, и есть всего одно меню с постоянным набором действий. Таким образом, можно быстро проверить, какой именно элемент был выбран, и обработать этот выбор. В нашем примере просто сохраним выбранный элемент в переменную и запишем в консоль его data-id и выбранное действие. Для этого отредактируем разметку меню:

Топ-пост этого месяца:  Что такое целевой трафик и способы его добычи

Далее давайте закэшируем все нужные объекты:
var contextMenu ); var menuState = 0; var menuWidth; var menuHeight; var menuPosition; var menuPositionX; var menuPositionY; var windowWidth; var windowHeight;
Появилась переменная taskItemInContext, которой присваивается значение при правом клике по элементу списка. Она нам потребуется для логирования ID элементов. Также появились новые имена классов. Теперь пройдемся по функциональности.

Функция инициализации остается такой же. Первое изменение затрагивает contextListener, ведь мы хотим сохранять в taskItemInContext элемент, на который кликнул пользователь, а функция clickInsideElement как раз его и возвращает:
function contextListener() < document.addEventListener("contextmenu", function(e) < taskItemInContext = clickIns >Мы сбрасываем ее в null, если правый клик произошел не по элементу списка. Ну и возьмемся за clickListener. Как я упоминал ранее, для простоты мы просто будем выводить информацию в консоль. Сейчас при отлавливании события click производится несколько проверок и меню закрывается. Внесем коррективы и начнем обрабатывать клик внутри контекстного меню, выполняя некоторое действие и лишь после этого закрывая меню:
function clickListener() < document.addEventListener("click", function(e) < var clickeElIsLink = clickIns >Вы могли заметить, что вызывается функция menuItemListener. Ее мы определим чуть позже. Функции keyupListener, resizeListener и positionMenu оставляем без изменений. Функции toggleMenuOn и toggleMenuOff отредактируем незначительно, изменив имена переменных для лучшей читаемости кода:
function toggleMenuOn() < if (menuState !== 1) < menuState = 1; menu. >Наконец реализуем menuItemListener:
function menuItemListener(link) < console.log("Task ID - " + taskItemInContext.getAttribute("data-id") + ", Task action - " + link.getAttribute("data-action")); toggleMenuOff(); >
На этом разработка функциональности заканчивается.

Некоторые замечания


Большой вопрос

Совместимость с браузерами

Заключение и демо

Кодовая база этого руководства

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

Многие годы термин «контекстное меню» относится в первую очередь к нативным приложениям. Однако теперь у нас есть возможность извлечь из него преимущества и в веб-приложениях. В качестве примера можно привести менеджер файлов в Gmil. Это меню реализовано при помощи кода javascript:

В будущем у нас будет возможность создавать контекстные меню для сайтов, основанных на HTML5. Предлагаем вам познакомиться с этим подходом.

Разработка контекстного меню

HTML5 представил нам 2 новых элемента: menu и menuitem, и они позволяют вам создавать контекстные меню. Для того чтобы браузер расценивал элемент menu как «контекстное меню», нам нужно установить тип меню как context, а также задать ему уникальный ID.

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

Edit Content
Email Selection

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

Edit Content
Email Selection

Facebook
Twitter

Теперь, для того, чтобы контекстное меню появилось на экране при клике правой кнопкой мыши, мы используем новый HTML-атрибут под названием contextmenu. Этот атрибут используется для того, чтобы определять меню с указанным >

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

Теперь новое контекстное меню появится внутри меню Operating System, как видно на примере ниже.

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

Мы также можем добавить иконку в наше контекстное меню на HTML5 при помощи атрибута icon:

Edit Content
Email Selection

Facebook
Twitter

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

Заставляем меню работать

На данном этапе наше новое контекстное меню не будет работать при нажатии. Однако мы можем очень просто привести его в чувства посредством небольшого кода javascript. В нашем примере меню называется Email Selection. Это меню позволяет пользователям отправлять выделенный текст по электронной почте.

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

Function getSelectedText() <
var text = «»;
if(window.getSelection) <
text = window.getSelection().toString();
> else if (document.selection && document.selection.type != «Control») <
text = document.selection.createRange().text;
>
return text;
>;
Затем мы создаем еще одну функцию, предположим sendEmail(), которая открывает email-клиент. Темой письма будет введенный текст из заголовка документа, а тело письма будет заполнено выделенным текстом.

Function sendEmail() <
var bodyText = getSelectedText();
window.location.href = «mailto:?subject=»+ document.title +»&body=»+ bodyText +»»;
>;
Наконец, мы добавляем эту функцию в наше меню посредством атрибута onclick.

Email Selection
Ранее мы уже рассказывали вам о том, как использовать HTML5 EditableContent, который позволяет нам редактировать веб-контент прямо на странице. Мы можем использовать данную функцию, добавив ее в наше меню под названием “Edit Content”.

Лично мы очень обрадовались этой новой функции. Мы видим в ней множество возможностей. К сожалению, на момент написания данного материала, только Firefox поддерживал это свойство. Надеемся, что и другие браузеры скоро к нему подключатся.

Ниже можно просмотреть демо (работает только в Firefox).

Собственное контекстное меню довольно редко применяется в интерфейсе веб-страницы. Ведь пользователю совершенно не очевидно, что на каком-то элементе надо щёлкнуть не левой, а правой кнопкой мыши и выбрать пункт из списка. К тому же не все посетители сайтов любят использовать правую кнопку мыши, а на смартфонах её вообще нет, только имитация. Несмотря на эти особенности в HTML5 есть возможность создавать собственные контекстные меню, реализовано это пока только в Firefox, и то весьма своеобразно.

Для начала давайте посмотрим, как вообще создаются разные меню. Для этого используется комбинация тегов и (пример 1).

CSS и HTML5: Респонсив навигационное меню. Создание контекстного меню

Внутри контейнера список формируется с помощью
.

В HTML4 элемент вышел из употребления, вместо него рекомендуется использовать

    . В HTML5 элемент вновь включен, но уже в другом качестве. Теперь он выступает контейнером для элемента и создания меню.

Синтаксис

  • пункт меню
  • пункт меню

    Закрывающий тег

    Пример

    В этом выпуске:

  • Русская кухня. Уха бурлацкая
  • Украинская кухня. Вареники
  • Молдавская кухня. Паприкаш
  • Кавказская кухня. Суп-харчо
  • Прибалтийская кухня. Вертиняй

  • Добавить комментарий