Краткий курс HTML 5

Элемент <menu> не нов для HTML, но в пятой версии языка изменилось его лексическое назначение. Теперь он представляет собой список команд, который в зависимости от установленного значения атрибута type может выполнять три различных функции — контекстное меню, панель инструментов (toolbar) и произвольное меню с командами:

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

1. Если встречается команда, то она добавляется в меню с учетом ее атрибутов.
2. Элемент <hr />, а также <option> с пустым атрибутом value, установленным булевым атрибутом disabled="disabled" и одним или несколькими знаками «-» в содержимом считаются разделителями и отображаются соответствующим образом.
3. Если встречается <li> или <label>, то браузер итеративно просматривает элементы внутри них, следуя этим же правилам.
4. Встретив элемент <select> или другой <menu> без атрибута label, браузер добавляет разделитель и продолжает итеративный просмотр в их содержимом.
5. Элементы <menu> и <optgroup> с установленными атрибутами label сообщают браузеру о необходимости добавить дочернее меню с указанным в label заголовком. Формирование этого подменю подчиняется этим же правилам.
6. Любые другие элементы игнорируются браузером.

Разделители в начале и в конце меню игнорируются, а несколько идущих подряд разделителей объединяются в один.

<menu type="list">
   <li><input type="radio" name="num" value="1" /></li>
   <li><input type="radio" name="num" value="2" checked="checked" /></li>
   <li><hr /></li>
   <li><input type="checkbox" name="on" value="true" /></li>
</menu>

Давайте рассмотрим подробнее способы добавления команд. В зависимости от действия при нажатии, команды делятся на три типа, описанные в следующей таблице:

HTML 5 предлагает также универсальный элемент <command />, позволяющий создавать любые типы команд, устанавливая его атрибут type в одно из значений: command, radio или checkbox. Он обладает собственными атрибутами, повторяющими почти все возможности других элементов для создания команд.

Заголовок команды <command /> определяется в значении атрибута label. Можно также привязать к команде изображение, указав его абсолютный путь в атрибуте icon.

<menu type="toolbar">
   <command type="command" label="Сохранить" onclick="save();" />
   <button type="button" onclick="cancel();">Отменить</button>
   <command type="checkbox" label="Автосохранение" />
</menu>

Чтобы объединить несколько переключателей <command /> в группу, применяется атрибут radiogroup (обязательный для переключателей). Достаточно указать одинаковое значение для всех элементов одной группы. В случае с применением элементов <input type="radio" /> для этого применяется «родной» атрибут name, а несколько <option> объединяются автоматически вхождением в один <select>.

Чтобы указать выбранный по умолчанию вариант переключателя или установить флажок, присвойте элементу <command /> булев атрибут checked="checked". В случае же с элементами <input /> и <option> за это отвечают их атрибуты checked и selected соответственно.

В отличие от ссылки <a>, элементу <command /> нельзя присвоить атрибут href. Действие для этого элемента типа command задается только с помощью скриптования события onclick, обсуждение которого выходит за рамки этого курса.

Независимо от выбранного способа добавления команды, вы можете присвоить ей комбинацию клавиш для быстрого доступа, указав атрибут accesskey, о котором шла речь в главе «Элементы ввода». Можно также указать accesskey не в самой команде, а в связанном с ней элементе <label>, или даже в <legend>, находящемся в одном <fieldset> с требуемой командой.

Создание контекстного меню

HTML 5 позволяет создавать контекстные меню для любых видимых элементов. Для этого необходимо вставить в документ конструкцию <menu> со списком необходимых пунктов <li> и присвоить ей уникальный идентификатор. Если этот id указать в значении атрибута contextmenu необходимого нам элемента, то клик по нему правой кнопкой мыши вызовет соответствующее контекстное меню (при условии, что в браузере поддерживается и активирована эта функция).

<p contextmenu="myMenu">Кликни правой кнопкой, чтобы открыть контекстное меню.</p>
<menu type="context" id="myMenu">
   <li><a href="link1.html">Пункт 1</a></li>
   <li><a href="link2.html">Пункт 2</a></li>
</menu>