Тег menu — список команд

menu элемент представляет собой список команд.

type атрибут перечислимого типа с указанием вида меню. Атрибут имеет три состояния. context  - ключевое слово, при котором элемент объявляет контекстное меню. toolbar  - ключевое слово, при котором элемент объявляет панель инструментов. Атрибут может быть опущен. Отсутствующее значение по умолчанию представляет список (list), элемент является просто списком команд, не контекстное меню, не панель инструментов.

Если menu элемент с type атрибутом в context состоянии, то элемент представляет команды из контекстного меню, и пользователь может взаимодействовать только с командами, если контекстное меню активируется.

Если menu элемента с type атрибутом в toolbar состоянии, то элемент представляет список активных команд, которые пользователь может сразу использовать.

Если menu элемента с type атрибутом в list состоянии, то элемент либо представляет неупорядоченный список элементов (каждый из которых представлен li элементом), каждый из которых представляет собой команды, которые пользователь может выполнять либо активировать, либо, если элемент не имеет li  элементов, поток и содержание описания доступных команд.

label атрибут дает ярлык в меню. Он используется агентами пользователей для отображения вложенных меню в пользовательском интерфейсе. Например, контекстное меню, содержащее другое меню будет использовать вложенные меню  атрибута label меню подменю.

menu элемент используется для определения контекстных меню и панели инструментов.

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

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copy</button>
   <button type="button" onclick="ecut()">Cut</button>
   <button type="button" onclick="epaste()">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

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

 

Выглядел бы следующим образом маркированный список из трех элементов, первым из которых имеет четыре кнопки, второй из которых имеет три, а третий из которых состоит из двух вложенных пунктов bullet с двумя элементами, состоящих из ссылок.

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

<form action="redirect.cgi">
 <menu type="toolbar">
  <label for="goto">Go to...</label>
  <menu label="Go">
   <select id="goto">
    <option value="" selected="selected"> Select site: </option>
    <option value="http://www.apple.com/"> Apple </option>
    <option value="http://www.mozilla.org/"> Mozilla </option>
    <option value="http://www.opera.com/"> Opera </option>
   </select>
   <span><input type="submit" value="Go"></span>
  </menu>
 </menu>
</form>