HTML тег <menu>

Элемент <menu> (от англ. "menu" ‒ «меню») создаёт область контекстного меню, панели инструментов. Внутрь данного элемента вкладываются элементы <li> или <menuitem>.

В HTML4 элемент <menu> вышел из употребления, вместо него рекомендуется использовать <ul>. В HTML5 элемент <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для элемента <command> и создания меню.

Совет: Для настройки стилей списка меню используйте CSS.

Синтаксис

HTML
<menu>
  <li>...</li>
</menu>
HTML5
<menu>
  <menuitem>...</menuitem>
</menu>

Закрывающий тег

Обязателен.

Атрибуты

label
Имя меню, как показано пользователю. Используется внутри вложенных меню, чтобы предоставить ярлык, через который можно получить доступ к подменю. Должен указываться только в том случае, если родительский элемент <menu> находится в состоянии контекстного меню.

type
Этот атрибут указывает тип объявляемого меню и может принимать одно из двух значений:
  • context: Указывает состояние всплывающего меню, которое представляет группу команд, активированных через другой элемент. Это может быть контекстное меню для элемента с атрибутом contextmenu. Это значение является значением по умолчанию, если атрибут отсутствует, а родительский элементом является <menu>.
  • toolbar: Указывает состояние панели инструментов, которая представляет собой список активных команд для взаимодействия с пользователем. Команды могут быть представлены в виде неупорядоченного списка элементов <li> или, если у элемента нет дочерних элементов <menu>, содержимое потока, описывающее доступные команды. Это значение является значением по умолчанию, если атрибут отсутствует.

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <menu> со следующими значениями CSS по умолчанию:

menu {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент считался устаревшим, в HTML5 он был переопределён.

Пример использования:

Контекстное меню:

Пример HTML:

Попробуй сам
<div contextmenu="popup-menu">
  Щелкните правой кнопкой мыши, чтобы увидеть настроенное контекстное меню.
</div>

<menu type="context" id="popup-menu">
  <menuitem>Действие</menuitem>
  <menuitem>Другое действие</menuitem>
  <hr>
  <menuitem>Отдельное действие</menuitem>
</menu>

В данном примере в контекстное меню добавлены пункты: «Действие», «Другое действие» и «Отдельное действие» (рис. 1).

Контекстное меню в Firefox

Рис. 1. Контекстне меню в браузере Firefox

Примечание:

Firefox поддерживает только создание контекстного меню, когда значение атрибута type равно context.

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 5.1 (W3C) Рекомендация

Поддержка браузерами


Учебник HTML

HTML уроки: HTML Элементы

HTML Списки



Contema