Обзор элементов HTML5 “Menu” и “Menuitem”
В этой статье я приведу обзор двух элементов HTML5: <menu> и <menuitem>, которые входят в спецификацию интерактивных элементов. Эти два элемента являются одними из тех, которые в среде разработчиков обсуждаются в последнюю очередь, вероятно, из-за отсутствия их поддержки в основных браузерах. Firefox - единственный браузер, в котором реализована поддержка этого тега.
Элемент Menu против элемента Nav
Когда мы говорим о menu, важно не путать его с тегом <nav>, который является элементом навигации HTML. Он создает блок навигации веб-страницы с ссылками, которые позволяют перемещаться по разделам одной страницы или на другие страницы сайта.
Элемент <menu> представляет собой набор команд меню. Принцип его работы похож на стационарные или мобильные приложения. Стационарные приложения обычно используют меню для выполнения различных задач. Например, меню «Размытие» в Photoshop. Оно предназначено для выполнения задач по размытию выбранного слоя:
В этом заключается основное отличие между этими двумя элементами; <nav> должен содержать ссылки, которые помогают пользователям перемещаться по веб-страницам, в то время как <menu> позволяет выполнять определенные задачи.
Использование элемента <menu>
Элемент <menu> предназначен для создания контекстных меню, всплывающих меню и меню панелей инструментов. Но поддержка последних двух функций тега еще не реализованы ни в одном из браузеров, в том числе и в Firefox.
В данный момент мы сосредоточим свое внимание на создании контекстного меню.
Контекстное меню
Контекстное меню выводится, когда мы в приложении кликаем правой кнопкой мыши. Варианты отображения зависят от того, в каком месте пользователь кликнул мышью:
Вариант JavaScript
Можно добавлять контекстные меню на веб-страницах и через JavaScript или JQuery-плагин. Проблема заключается в том, что эти методы используют огромное количество разметки, а сам скрипт удаляет оригинальное контекстное меню браузера. Это может привести к появлению реализации, не соответствующей ожиданиям пользователя:
Оригинальное решение
Элементы <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, который мы объявили, выводится в самом верху списка:
Добавление подменю и иконок
Подменю представляют собой группу элементов со связанными или аналогичными действиями. Меню «Вращение изображения» в Photoshop является прекрасным примером этого. Оно включает в себя несколько пунктов подменю, которые позволяют пользователю выбрать угол поворота, а также направление вращения.
Использование элемента menu при добавлении подменю является простым и понятным. Вложите еще один элемент <menu> с атрибутом label, чтобы объявить имя меню, например:
<menu id="demo-image" type="context">
<menu label="Повернуть изображение">
<menuitem>Повернуть на 90 градусов </menuitem>
<menuitem>Повернуть на 180 градусов </menuitem>
<menuitem>Отразить по горизонтали </menuitem>
<menuitem>Отразить по вертикали </menuitem>
</menu>
</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>И в нашем меню появятся иконки, как вы можете видеть на рисунке ниже:
Добавление функций в меню
Мы создали то, что выглядит как контекстное меню, но оно еще не работает, как функциональное меню. Мы можем исправить это с помощью 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> может использоваться как в веб-приложениях, так и на обычных сайтах. К сожалению, его поддержка браузерами по-прежнему не реализована:
