Краткий курс HTML 5
14. Создание меню
Элемент <menu>
не нов для HTML, но в пятой версии языка изменилось его лексическое назначение. Теперь он представляет собой список команд, который в зависимости от установленного значения атрибута type
может выполнять три различных функции — контекстное меню, панель инструментов (toolbar) и произвольное меню с командами:
list | — произвольный набор команд (значение по умолчанию). |
toolbar | — панель инструментов. |
context | — контекстное меню. |
Команда — это любая ссылка, кнопка или другой элемент, который может быть нажат, переключен или выбран. Любое меню может включать в себя команды, разделители и другие меню. Браузер просматривает содержимое элемента <menu>
и обрабатывает его следующим образом:
- Если встречается команда, то она добавляется в меню с учетом ее атрибутов.
- Элемент
<hr />
, а также<option>
с пустым атрибутомvalue
, установленным булевым атрибутомdisabled="disabled"
и одним или несколькими знаками «-» в содержимом считаются разделителями и отображаются соответствующим образом. - Если встречается
<li>
или<label>
, то браузер итеративно просматривает элементы внутри них, следуя этим же правилам. - Встретив элемент
<select>
или другой<menu>
без атрибутаlabel
, браузер добавляет разделитель и продолжает итеративный просмотр в их содержимом. - Элементы
<menu>
и<optgroup>
с установленными атрибутамиlabel
сообщают браузеру о необходимости добавить дочернее меню с указанным вlabel
заголовком. Формирование этого подменю подчиняется этим же правилам. - Любые другие элементы игнорируются браузером.
Разделители в начале и в конце меню игнорируются, а несколько идущих подряд разделителей объединяются в один.
<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
гость @ 29 сентября 2014
гость @ 19 марта 2015