Menu тег – Как сделать в html5 меню: горизонтальное и вертикальное

Leave a Comment / Разное / By /

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.

В настоящее время тег <menu> имеет ограниченную поддержку браузерами.

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

Атрибуты

АтрибутЗначениеОписание
labeltextОпределяет видимое наименование для меню.
typepopup
toolbar
context		Определяет, какой тип меню отображать.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <menu></title>
	</head>
	<body>
		<div contextmenu = "testmenu"> <!-- определяем, для блока контекстное меню --> 
			Кликни по мне правой кнопкой мыши.
			<menu type = "context" id = "testmenu"> <!-- создаем контекстное меню --> 
				<menuitem label = "like"></menuitem> <!-- определяем первый элемент меню --> 
				<menuitem label = "dislike"></menuitem> <!-- определяем второй элемент меню --> 
			</menu>
		</div>
	</body>
</html>

Кликни по мне правой кнопкой мыши.

Для тех у кого браузер не отображает результат:


Использование глобального атрибута contextmenu, тегов <menu> и <menuitem>.

Отличия HTML 4.01 от HTML 5

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

Значение CSS по умолчанию

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

Поддержка глобальных атрибутов

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

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

Элемент поддерживает «атрибуты событий».

HTML теги

| HTML | WebReference

Элемент <menu> (от англ. menu — меню) предназначен для отображения списка пунктов меню. Аналогично элементам <ol> и <ul> внутри контейнера <menu> список формируется с помощью <li>.

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

Синтаксис

<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>

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

Атрибуты

label
Устанавливает видимую метку для меню.
type
Задаёт тип меню.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MENU</title>
 </head>
 <body>
  <p><strong>В этом выпуске:</strong></p>
  <menu>
   <li>Русская кухня. Уха бурлацкая</li>
   <li>Украинская кухня. Вареники</li>
   <li>Молдавская кухня. Паприкаш</li>
   <li>Кавказская кухня. Суп-харчо</li>
   <li>Прибалтийская кухня. Вертиняй</li>
  </menu>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид списка, созданного с помощью menu

Рис. 1. Вид списка, созданного с помощью <menu>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>MENU</title>
 </head>
 <body>
  <menu type="toolbar">
   <li>
    <menu label="Файл">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
   </li>
   <li>
     <menu label="Правка">
      <button type="button">Копировать</button>
      <button type="button">Вырезать</button>
      <button type="button">Вставить</button>
     </menu>
    </li>
  </menu>
 </body>
</html>

Примечание

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

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <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">
  <menuitem>Действие</menuitem>
  <menuitem>Другое действие</menuitem>
  <hr>
  <menuitem>Отдельное действие</menuitem>
</menu>

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

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

Примечание:

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

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

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

Элемент
<menu> 8.0+
Элемент
<menu> 8.0+

Учебник HTML

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

HTML Списки


Тег | HTML справочник

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

Описание

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

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

Атрибуты

label:
Определяет видимую метку для меню.
type:
Определяет какой тип меню будет отображен на экране:
  • context — контекстное меню с командами, с которомы может взаимодействовать пользователь.
  • toolbar — список активных команд
  • list — неупорядоченный список элементов (каждый элемент такого списка создается с помощью тега <li>). Значение list используется по умолчанию.

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

Стиль по умолчанию


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

Пример


<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button">Вырезать</button>
      <button type="button">Скопировать</button>
     <button type="button">Вставить</button>
    </menu>
  </li>
</menu>

Результат данного примера в окне браузера:

Пример использования тега <menu>

seodon.ru | Теги HTML — Тег MENU

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <MENU> используется для создания неупорядоченных списков. Изначально он разрабатывался под списки, состоящие из одного столбца. Например, для отображения пунктов меню навигации. Элементы списка формируются при помощи тегов <LI>.

Тег <MENU> является устаревшим, вместо него лучше применять тег <UL>, который абсолютно аналогичен по своему действию.

Атрибуты

Личные атрибуты: нет.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: списки.

Модель тега: block (блочный, уровня блока).

Должен содержать: тег или теги <LI>.

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<menu>
 <li>...</li>
</menu>

Пример HTML: применение тега MENU

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега MENU</title>
 </head>
 <body>
  <menu>
   <li>Ниф-ниф.</li>
   <li>Нуф-нуф.</li>
   <li>Наф-наф.</li>
  </menu>
 </body>
</html>

Результат примера

Результат. Применение тега MENU.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ЧастичноДаЧастичноНет

В HTML 4.01 и XHTML 1.0 использовать тег <MENU> допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код.

В HTML 5 <MENU> вновь появился, и, в частности, служит для семантического выделения пунктов меню. Причем от уже может содержать не только элементы списка, но и любые блочные или строчные теги, например, <BUTTON>.

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

HTML тег menu | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 25.02.2009

Тег <menu> (с англ. меню) — тег-контейнер для элементов <li>, определяет список меню (не нумерованный).
Блочный элемент.

Тег <dir> был разработан для создания списка из нескольких столбцов. Тег <menu> — для создания списка в один столбец.

HTML: 3.2 | 4 / XHTML: 1.0 (Strict, Transmissional, Frameset) | 1.1

Синтаксис

<menu>
<li>...</li>
</menu>

Атрибуты

Основные Вспомогательные События

classопределяет имя используемого класса
compactвыводит список с уменьшенными интервалами (отступами)
dirопределяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
disabledфлаг. При установке выводит список, как неактивный.
Отсутствует в спецификации HTML 4.01!
idуникальный индетификатор
langопределяет язык отображаемого документа
onclickщелчек на элементе
ondblclickдвойной щелчек на элементе
onkeydownнажатие клавиши, когда элемент имеет фокус
onkeypressнажатие и освобождении клавиши, когда элемент имеет фокус
onkeyupосвобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedownнажатие кнопки мыши, когда элемент имеет фокус
onmousemoveдвижение указателя мыши, когда элемент имеет фокус
onmouseoutсмещение указателя мыши с элемента
onmouseoverпомещение указателя мыши на элемент
onmouseupосвобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
styleзадает встроенную таблицу стилей
typeопределяет вид нумерации
  • A — заглавные латинские буквы
  • a — строчные латинские буквы
  • I — заглавные римские цифры
  • i — строчные римские цифры
  • 1 — арабские цифры (по умолчанию)
Отсутствует в спецификации HTML 4.01!
titleвсплывающая подсказка
Пример

Список пунктов меню

<menu type="A">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
</menu>

Результат

  • Первый
  • Второй
  • Третий
  • Четвертый

    • Неактивный список

    <menu type="1" disabled="disabled">
    <li>Раз</li>
    <li>Два</li>
    <li>Три</li>
    </menu>

    Рекомендации по использованию
    • закрывающий тег обязателен (</menu>)
    • должен содержать элементы <li>
    • обязательных атрибутов нет
    • поддерживается не всеми браузерами
    • по умолчанию в некотрых браузерах может иметь отступы
    • при использовании XHTML 1.0 Strict, XHTML 1.1, HTML 4.01 Strict не пройдет валидацию
    • тег <menu> не рекомендуем использовать, вместо него следует применять тег <ul>

    Твой код:
    <html> <head> <title></title> </head> <body>
  • Раз
  • Два
  • Три
    • </body> </html> Сделай код и жми тут

    Результат:
    большой полигон

    menu — Xiper.net

    Автор: Евгений Рыжков Дата публикации: 19.01.2009

    Тег <menu> (с англ. меню) — тег-контейнер для элементов <li>, определяет список меню (не нумерованный).
    Блочный элемент.

    Тег <dir> был разработан для создания списка из нескольких столбцов. Тег <menu> — для создания списка в один столбец.

    HTML: 3.2 | 4 / XHTML: 1.0 (Strict, Transmissional, Frameset) | 1.1

    Синтаксис

    <menu>
    <li>...</li>
    </menu>

    Атрибуты

    Основные Вспомогательные События

    class определяет имя используемого класса
    compact выводит список с уменьшенными интервалами (отступами)
    dir определяет направление символов:
    • ltr — слева направо
    • rtl — справа налево
    disabled флаг. При установке выводит список, как неактивный.
    Отсутствует в спецификации HTML 4.01!
    id уникальный идентификатор
    lang определяет язык отображаемого документа
    onclick щелчок на элементе
    ondblclick двойной щелчок на элементе
    onkeydown нажатие клавиши, когда элемент имеет фокус
    onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
    onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
    onmousedown нажатие кнопки мыши, когда элемент имеет фокус
    onmousemove движение указателя мыши, когда элемент имеет фокус
    onmouseout смещение указателя мыши с элемента
    onmouseover помещение указателя мыши на элемент
    onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
    style задает встроенную таблицу стилей
    type определяет вид нумерации
    • A — заглавные латинские буквы
    • a — строчные латинские буквы
    • I — заглавные римские цифры
    • i — строчные римские цифры
    • 1 — арабские цифры (по умолчанию)
    Отсутствует в спецификации HTML 4.01!
    title всплывающая подсказка

    Пример

    Список пунктов меню

    <menu type="A">
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
    <li>Четвертый</li>
    </menu>

    Результат

  • Первый
  • Второй
  • Третий
  • Четвертый

    • Неактивный список

    <menu type="1" disabled="disabled">
    <li>Раз</li>
    <li>Два</li>
    <li>Три</li>
    </menu>

    Рекомендации по использованию

    • закрывающий тег обязателен (</menu>)
    • должен содержать элементы <li>
    • обязательных атрибутов нет
    • поддерживается не всеми браузерами
    • по умолчанию в некотрых браузерах может иметь отступы
    • при использовании XHTML 1.0 Strict, XHTML 1.1, HTML 4.01 Strict не пройдет валидацию
    • тег <menu> не рекомендуем использовать, вместо него следует применять тег <ul>

    Твой код:
    <html> <head> <title></title> </head> <body>
  • Раз
  • Два
  • Три
    • </body> </html> Сделай код и жми тут

    Результат:
    большой полигон

    По теме

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *