Последние учебники веб-разработки
 

HTML <menu> Tag


пример

Контекстное меню с различными <menuitem> элементы:

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
Попробуй сам "

Определение и использование

<menu> тэг определяет список / меню команд.

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


Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает элемент.

Элемент
<menu> Не поддерживается Не поддерживается 8.0
(Только контекстное меню)
Не поддерживается Не поддерживается

Примечание: <menu> Тег поддерживается только в Firefox, и она работает только для контекстного меню.


Советы и примечания

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


Отличия между HTML 4.01 и HTML5

<menu> элемент был устаревшим в HTML 4.01.

<menu> элемент переопределяется в HTML5.


Атрибуты

= Новое в HTML5.

Атрибут Стоимость Описание
label text Задает видимый ярлык для меню
type list
toolbar
context
Определяет, какой тип меню для отображения

Глобальные атрибуты

<menu> Тег также поддерживает Глобальные атрибуты в HTML .


Атрибуты событий

<menu> Тег также поддерживает Атрибуты событий в HTML .


Похожие страницы

HTML DOM ссылка: Меню объекта


Настройки по умолчанию CSS

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

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