HTML тег <menu>

Тег <menu> используется для отображения списка пунктов меню. С его помощью создаются контекстные меню и панели инструментов.

Каждый пункт внутри контейнера <menu> формируется с помощью тегов <li> и <menuitem>.

Тег <menu> больше не используется в HTML 4.0, вместо него рекомендуется использовать тег <ul>.

Синтакс

Тег <menu> парный, имеет открывающий (<menu>) и и закрывающий (</menu>) теги.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      menuitem {
        display: block;
      }
    </style>
  </head>
  <body>
    <menu>
             <menuitem>ol - нумерованный список</menuitem>
             <menuitem>ul - ненумерованный список</menuitem>
             <menuitem>menu - список меню</menuitem>
        </menu>
   </body>
</html>

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <div style="background:#1c87c9; padding: 20px; text-align:center; color:#ffffff;" contextmenu="menuexample">
<p>Кликните правой кнопкой мыши внутри рамки, чтобы открыть контекстное меню</p>
<menu type="context" id="menuexample">
 <menuitem label="Refresh" onclick="window.location.reload();" </menuitem>
 <menu label="Share on...">
   <menuitem label="Twitter" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
   <menuitem label="Facebook" 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>
</div>
<p>Внимание: данный тег работает только в Firefox!</p>
</body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
label text Определяет видимую метку для меню.
type popup
toolbar
context
Определяет тип меню.

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

Browser support

8+



Related articles