Frontender Magazine

Контекстные меню HTML5

Firefox Context Menu

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

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

Пример того, что у нас получится в итоге.

HTML

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

<section contextmenu="mymenu">
    <!--
        Из соображений чистоты кода 
        я помещу меню в блок, в котором оно будет использоваться
    -->
</section>

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

<menu type="context" id="mymenu">
    <menuitem label="Обновить пост" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menuitem label="Перейти к комментариям" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
    <menu label="Поделиться в ..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
</menu>

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

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

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

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

David Walsh
Автор:
David Walsh
GitHub:
darkwing
Twitter:
@davidwalshblog
Сaйт:
http://davidwalsh.name/
LinkedIn:
davidjameswalsh
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (3 комментария, если быть точным)

Автар пользователя
bizikov

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

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

Автар пользователя
agegorin

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

Особо порадовала имплементация от Mozilla с добавлением элементов, а не полной заменой меню.

Кстати, я так понимаю значение label у menuitem никак не ограничивается, то есть можно специально или случайно ввести пользователся в заблуждение, создав меню с одинаковыми ярлыками.

Автар пользователя
ermushko

Просто Щикарно, как сказал бы Картман, для админок и прочих систем управления сайтом. Как дублирование кнопок на панели задач с преимуществом, что можно впихнуть больше текста, т. к. элементы находятся вертикально, а не горизонтально. НО, возник вопрос - можно ли стайлить свойства объекта menuitem при попомщи CSS? Например иконки было бы логично засунуть в base64 и далее в CSS файл. Тогда они не мерцают при первом отображении, так как уже загружены.