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

14. Создание меню

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

list — произвольный набор команд (значение по умолчанию).
toolbar — панель инструментов.
context — контекстное меню.

Команда — это любая ссылка, кнопка или другой элемент, который может быть нажат, переключен или выбран. Любое меню может включать в себя команды, разделители и другие меню. Браузер просматривает содержимое элемента <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>

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

Тип командыОписание
commandКоманда-ссылка (значение по умолчанию). Реализуется элементом <a> с установленным атрибутом href, кнопкой <button> или элементом <input /> с одним из следующих значений атрибута type: submit, reset, image или button.
radioПереключатель. Реализуется с помощью <input type="radio" />, а также элементами <option> списка <select>, в котором не установлен булев атрибут multiple="multiple".
checkboxФлажок «вкл/выкл». Реализуется с помощью <input type="checkbox" />, а также элементами <option> списка <select>, которому присвоен булев атрибут multiple="multiple".

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>

5 комментариев

Любопытно и даже область применения весьма обширная. Жаль из-за ослика ....

Shift @ 13 октября 2011

Ослик скоро вымрет... Нужно осваивать эту тему.

Павел @ 15 мая 2012

Я рискнул взять на нормальный проект. Только не контекст ... Ссыкотно с этими драфтами

ZenCoder @ 31 мая 2013

Любопытно что всё это не работает на данный момент ни в одном браузере, ибо в HTML5 данный тег ни в одном браузере не реализован. тоесть получается всё это теория на будущее и на данный момент практической ценности не имеет. поправьте если ошибаюсь

гость @ 29 сентября 2014

Simple Green Menu

гость @ 19 марта 2015

Оставить комментарий