Разное

Html menu: | HTML | WebReference

23.01.2023

| 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.

Рис. 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.

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5.1Рекомендация

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

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

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

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

Браузеры

Браузеры

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

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

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

См. также

  • <menuitem>

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

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

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

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

Меню | HTML

Вернёмся к примеру из прошлых уроков:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <div> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
</header>

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

Для создания полноценного меню используется парный тег <nav>, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.

Заменим <div></div> на изученный тег <nav>:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

Элемент nav, как и header не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:

  1. Нет необходимости оборачивать каждое меню в элемент nav. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег
    <nav>    , хотя это не запрещено
  2. Хорошим примером дополнительного использования nav — навигация по текущей странице
  3. nav может содержать не только ссылки, но так же и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег <nav>

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег <nav> и маркированный список

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег <nav>

  • Навигация может быть в любой области страницы, а не только в шапке сайте

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

&двоеточие; Элемент меню — HTML: Язык гипертекстовой разметки

HTML-элемент

описан в спецификации HTML как семантическая альтернатива
    , но обрабатывается браузерами (и отображается через дерево специальных возможностей) как ничем не отличающийся от < ул> . Он представляет собой неупорядоченный список элементов (которые представлены
  • элементами).

    Этот элемент включает только глобальные атрибуты.

    Элементы

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

        Примечание: В ранних версиях спецификации HTML элемент

        имел дополнительный вариант использования в качестве контекстного меню. Эта функциональность считается устаревшей и не входит в спецификацию.

        Панель инструментов

        В этом примере <меню> используется для создания панели инструментов для приложения редактирования.

        HTML 
         <меню>
  
        • 
  
        • 
  
      •  
        •

        Обратите внимание, что это функционально ничем не отличается от:

         
          
  
          • 
  
          • 
  
          •
        CSS 
         меню,
ул {
  дисплей: гибкий;
  стиль списка: нет;
  заполнение: 0;
  ширина: 400 пикселей;
}
ли {
  гибкий рост: 1;
}
кнопка {
  ширина: 100%;
}
        Результат
        Категории контента

        Потоковое содержание. Если дочерние элементы элемента включают хотя бы один

      • элемент: Ощутимое содержание.

        • Разрешенный контент

        Ноль или более вхождений

      • , <скрипт> и <шаблон> .

        • Отсутствие тега Нет, начальный и конечный теги обязательны.
        Разрешенные родители Любой элемент, принимающий потоковое содержание.
        Неявная роль ARIA список
        Разрешенные роли ARIA каталог , группа , список , меню , меню , нет , презентация , радиогруппа , таблист , панель инструментов или дерево
        Интерфейс DOM HTMLMenuElement
        Specification
        HTML Standard
        # the-menu-element

        BCD tables only load in the browser

        with JavaScript enabled. Включите JavaScript для просмотра данных.
        • Другие элементы HTML, связанные со списками:
            ,
              и
            • .

            Последнее изменение: , участниками MDN

            Тег HTML

            Элемент HTML

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

            Элемент

            — это просто семантическая альтернатива элементу
              для выражения неупорядоченного списка команд (обычно известного как «панель инструментов»).

              <меню> 9Элемент 0005 указан в спецификации WHATWG HTML Living, но не в спецификации W3C HTML5.2.

              Синтаксис

              Тег

              записывается как , а его содержимое вставляется между начальным и конечным тегами. Атрибут типа можно использовать для указания типа объявляемого меню.

              Элемент

              может содержать ноль или более элементов
            • , которые потенциально могут содержать другие <меню> элементов.

              Вот так:

              <меню>

            • ...
            • ...
            • ...

              • Пример

              Вот пример использования тега

              для создания панели инструментов.

              <меню>

              • <стиль> li { стиль списка: нет; } меню { ширина: 10em; } кнопка { цвет границы: белый; заполнение: .2em; ширина: 10см; }

              Как уже упоминалось, он просто создает семантическую альтернативу элементу

                , поэтому любые стили для панели инструментов должны выполняться с помощью CSS, и вы можете использовать язык сценариев, такой как JavaScript или JQuery, для выполнения применимого действия для каждого меню. вещь.

                Атрибуты

                Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.

                Элемент

                принимает следующие атрибуты.

                Атрибут Описание
                Нет

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

                Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом

                , а также со всеми другими тегами HTML.

                • ключ доступа
                • автокапитализация
                • класс
                • контентредактируемый
                • данные-*
                • директор
                • перетаскиваемый
                • скрытый
                • идентификатор
                • режим ввода
                • это
                • идентификатор товара
                • элементпроп
                • Артикул
                • предметная область
                • тип изделия
                • язык
                • часть
                • слот
                • проверка правописания
                • стиль
                • tabindex
                • Название
                • перевод

                Полное описание этих атрибутов см.

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

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