Обзор элементов HTML5 “Menu” и “Menuitem”

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

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

Когда мы говорим о menu, важно не путать его с тегом <nav>, который является элементом навигации HTML. Он создает блок навигации веб-страницы с ссылками, которые позволяют перемещаться по разделам одной страницы или на другие страницы сайта.

Элемент <menu> представляет собой набор команд меню. Принцип его работы похож на стационарные или мобильные приложения. Стационарные приложения обычно используют меню для выполнения различных задач. Например, меню «Размытие» в Photoshop. Оно предназначено для выполнения задач по размытию выбранного слоя:

contextual-menu-blur

Меню «Размытие» в Photoshop

В этом заключается основное отличие между этими двумя элементами; <nav> должен содержать ссылки, которые помогают пользователям перемещаться по веб-страницам, в то время как <menu> позволяет выполнять определенные задачи.

Использование элемента <menu>

Элемент <menu> предназначен для создания контекстных меню, всплывающих меню и меню панелей инструментов. Но поддержка последних двух функций тега еще не реализованы ни в одном из браузеров, в том числе и в Firefox.

В данный момент мы сосредоточим свое внимание на создании контекстного меню.

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

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

contextual-menu-osx-ubuntu

Оригинальное контекстное меню в OS X и Ubuntu

Вариант JavaScript

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

contextual-menu-in-google-drive

Настроенное контекстное меню в Google Drive

Оригинальное решение

Элементы <menu> и <menuitem> будут добавлять новые пункты в версию оригинального контекстного меню. В приведенном ниже примере, мы добавим в тег <body> новый пункт контекстного меню под названием «Hello World«:

<body contextmenu="new-context-menu">
<menu id="new-context-menu" type="context">
    <menuitem>Hello World</menuitem>
</menu>
</body>

Основными частями приведенного выше фрагмента кода являются атрибуты — id, type и contextmenu, которые определяют тип меню как context, а также область, где должно отображаться новое меню.

В нашем случае при выполнении клика правой кнопкой мыши новое меню будет выводиться в любом месте документа, так как мы назначили его с помощью атрибута contextmenu для всего раздела body.

Можно ограничить диапазон в пределах определенного раздела страницы, присвоив значение атрибуту contextmenu в элементах <div>, <main>, <section> и т.д.:

<body>
    <div contextmenu="new-context-menu">
    <!-- контент -->
    </div>
    <menu id="new-context-menu" type="context">
        <menuitem>Hello World</menuitem>
    </menu>
</body>

Когда мы просматриваем этот код в браузере (в настоящее время, только в Firefox), мы увидим, что menuitem, который мы объявили, выводится в самом верху списка:

contextual-menu-hello-world

Новый пункт меню, «Hello World», который загружается как часть оригинального контекстного меню

Добавление подменю и иконок

Подменю представляют собой группу элементов со связанными или аналогичными действиями. Меню «Вращение изображения» в Photoshop является прекрасным примером этого. Оно включает в себя несколько пунктов подменю, которые позволяют пользователю выбрать угол поворота, а также направление вращения.

Использование элемента menu при добавлении подменю является простым и понятным. Вложите еще один элемент <menu> с атрибутом label, чтобы объявить имя меню, например:

<menu id="demo-image" type="context">
    <menu label="Повернуть изображение">
        <menuitem>Повернуть на 90 градусов </menuitem>
        <menuitem>Повернуть на 180 градусов </menuitem>
        <menuitem>Отразить по горизонтали </menuitem>
        <menuitem>Отразить по вертикали </menuitem>
    </menu>
</menu>

Когда мы запустим этот код в браузере, мы обнаружим новое меню с четырьмя пунктами подменю:

contextual-menu-sub-menu

Иконки

Также был введен новый атрибут icon для добавления иконок слева от пунктов меню. Стоит отметить, что этот атрибут применим только для элемента <menu>. Укажите путь к иконке для icon, например, так:

<menu id="demo-image" type="context">
    <menu label="Image Rotation">
        <menuitem icon="img/arrow-return-090.png">Повернуть на 900</menuitem>
        <menuitem icon="img/arrow-return-180.png">Повернуть на 1800</menuitem>
        <menuitem icon="img/arrow-stop-180.png">Отразить по горизонтали</menuitem>
        <menuitem icon="img/arrow-stop-270.png">Отразить по вертикали </menuitem>
    </menu>
</menu>

И в нашем меню появятся иконки, как вы можете видеть на рисунке ниже:

contextual-menu-sub-menu-with-icon

Каждый пункт подменю теперь иллюстрирован иконкой

Добавление функций в меню

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

Возьмем наш пример с подменю «Повернуть изображение» и добавим функцию, которая будет поворачивать изображение, по которому мы кликнули правой кнопкой мыши. Преобразования и переходы CSS3 могут выполнить вращение изображения в браузере. Вот стиль, который будет поворачивать изображение на 90 градусов:

.rotate-90 {
    transform: rotate(90deg);
}

Указав стиль, мы должны написать функцию, чтобы применить его к изображению:

function imageRotation(name) {
    document.getElementById('image').className = name;
}

Добавьте эту функцию в соответствующий <menuitem> с помощью атрибута onclick и передайте параметр с именем класса rotate-90:

<menu id="demo-image" type="context">
    <menu label="Image Rotation">
        <menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">R
Повернуть на 900</menuitem>
        <menuitem icon="img/arrow-return-180.png">Повернуть на 1800</menuitem>
        <menuitem icon="img/arrow-stop-180.png">Отразить по горизонтали</menuitem>
        <menuitem icon="img/arrow-stop-270.png">Отразить по вертикали</menuitem>
    </menu>
</menu>

Чтобы закончить наше подменю, создайте стили, которые будут вращать изображение на 180 градусов и отражать его. И добавьте каждую функцию в соответствующий пункт подменю вместе с параметром. Рабочий вариант такого меню вы можете посмотреть на этой демо-странице.

Заключение

Элемент <menu> может использоваться как в веб-приложениях, так и на обычных сайтах. К сожалению, его поддержка браузерами по-прежнему не реализована:

contextual-menu-support

Перевод статьи «Introducing the HTML5 “Menu” and “Menuitem” Elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.