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

Обновление: контекстные меню отображаются даже если отключен 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 контекстного меню с большей пользой? Расскажите об этом в комментариях!