Html5 меню – Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

| 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

Верстка меню на html5 | Vaden Pro

Не так давно в свет вышел новый стандарт разметки гипертекста html5, который открыл перед веб-мастерами огромный простор для улучшения понимания структуры сайта поисковыми роботами. Изменения коснулись и подходов к разметке навигации.

При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:

<ul>
   <li><a href="#">Пункт меню 1</a></li>
   <li><a href="#">Пункт меню 2</a></li>
   <li><a href="#">Пункт меню 3</a></li>
</ul>

Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?

Новый подход к верстке меню в html5

С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:

<nav>
   <ul>
      <li><a href="#">Пункт меню 1</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 3</a></li>
   </ul>
</nav>

На первый взгляд все прекрасно, да и на второй ошибок особо здесь нет, НО! Списки предназначены просто для перечисления чего-либо по порядку. Они не предназначены для разметки навигации. И если раньше у нас особо не было выбора как размечать навигацию, то в новых реалиях все значительно упростилось.

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

<nav>
   <a href="#"> Пункт меню 1</a>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:

  • Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
  • Меньше тегов – короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
  • Чем лаконичнее код, тем он чище и проще к восприятию.

Как сверстать вложенные меню в html5?

Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:

<nav>
   <section>
      <a href="#"> Пункт меню 1</a>
      <nav>
         <a href="#"> Подпункт меню 1</a>
         <a href="#"> Подпункт меню 2</a>
         <a href="#"> Подпункт меню 3</a>	
      </nav>
   </section>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Используя тег section мы объединяем группу ссылок в 1 логический элемент меню,  дальше же действуем по принципу схожему с принципом вложенности списков: используя второй nav внутри первого мы сообщаем о принадлежности ссылок в этом теге к более низкому уровню навигации, тобишь говорим, что ссылки которые будут в нем содержаться это уже не пункты, а подпункты нашего меню.

Эта конструкция хоть и не привычна на первый взгляд, но все-же во многом проще, чем аналогичная структура выполненная списками.

Подводя итоги

Хоть подход с использованием списков во многом и устарел, но ничего плохого в нем по-прежнему нет. Упростить код или же нет зависит во многом от Вашего желания и особенностей проекта.

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

Оценок: 3 (средняя 3 из 5)

  • 2468 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Тег | 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 теги

HTML5 разметка меню — Xiper.net

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

Многие из нас привыкли верстать меню используя списки:


<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">HTML и CSS приемы</a></li>
	<li><a href="#">Обучение</a></li>
	<li><a href="#">HTML справочник</a></li>
</ul>

В HTML5 для разметки навигаций появился специальный тег &ltnav> и меню теперь многие начали верстать так:


<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">HTML и CSS приемы</a></li>
		<li><a href="#">Обучение</a></li>
		<li><a href="#">HTML справочник</a></li>
	</ul>
</nav>

Вроде все структурно и четко. Но есть одна пробелма — списки изначально не предназначены для разметки навигаций.

С этим недостатком в первую очередь сталкиваются пользователи голосовых браузеров, которые при переходе к меню слышат «Список из 4-х пунктов». А затем перечисление этих пунктов, при чем перед тем как назвать текст пункта будет звучать «bullet» — для неупорядоченных списков, и номер пункта для упорядоченных. Чтобы этого избежать лучше верстать навигацию так:


<nav>
	<a href="#">Главная</a>
	<a href="#">HTML и CSS приемы</a>
	<a href="#">Обучение</a>
	<a href="#">HTML справочник</a>
</nav>

А если следовать рекомендациям WAI-ARIA, то так:

<nav role="navigation"> <a href="#">Главная</a> <a href="#" >HTML и CSS приемы</a> <a href="#">Обучение</a> <a href="#">HTML справочник</a> </nav>

Спорить можно долго как более правильно, тем более, что role можно добавить и в обычный список. Но для себя в HTML5 разметке навигации нашел дополнительные плюсы:

  1. меньше DOM элементов, а значит страница быстрее и легче;
  2. меньше кода — лучше SEO.

Как быть с вложенным меню

Для его организации можно воспользоваться вложенным <nav> и <section> для группировки ссылок:


<nav>

	<section>
		<a href="#">Главная</a>
		<nav>
			<a href="#">HTML и CSS приемы</a>
			<a href="#">Обучение</a>
			<a href="#">HTML справочник</a>	
		</nav>
	</section>
	
	<a href="#">HTML и CSS приемы</a>
	<a href="#">Обучение</a>
	<a href="#">HTML справочник</a>

</nav>

Заметка

Применять такую разметку или по старинке на списках — нужно решать в рамках конкретной задачи: видеть дизайн, знать какие цели у проекта и кто его пользователи. Например, чтобы реализовать некоторые дизайнерские задумки придется все равно добавлять теги. В таких случая проще списки оставить.

Материалы

Создание плавающего HTML меню с использованием jQuery и CSS.

jQuery

На связи Андрей Бернацкий.

С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.

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

jQuery

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Также результат того, что мы будем делать, Вы можете посмотреть здесь.

Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.

Что мы строим

В этой статье описывается, как создать «плавающее меню» с использованием HTML, CSS и JQuery. Подчеркиваю, плавающее меню остается видимым, даже если вы прокрутите вниз веб-страницу. Они анимационные, поэтому движутся вверх и вниз при прокрутке окна браузера, вверх или вниз. Я собираюсь показать вам, как сделать плавающим меню с помощью JQuery и CSS, и мы надеемся, что появятся новые ученики JQuery:D.

Прежде, чем приступить к кодированию, взгляните на два скриншота ниже. Первый показывает веб-страницу с плавающим меню в верхнем правом углу. Конечно, вы не можете сказать, что оно плавающее пока не увидите это на самом деле вживую и не прокрутите страницу. Так что смотрите на втором скриншоте, вы видите, что меню переместилось.

jQuery
jQuery

Шаг 1

Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:

<div> <ul> <li><a href=»#»> Home </a></li> </ul> <ul> <li><a href=»#»> Table of content </a></li> <li><a href=»#»> Exam </a></li> <li><a href=»#»> Wiki </a></li> </ul> <ul> <li><a href=»#»> Technical support </a></li> </ul> </div>

<div>

        <ul>

            <li><a href=»#»> Home </a></li>

        </ul>

 

       <ul>

            <li><a href=»#»> Table of content </a></li>

            <li><a href=»#»> Exam </a></li>

            <li><a href=»#»> Wiki </a></li>

        </ul>

 

        <ul>

            <li><a href=»#»> Technical support </a></li>

        </ul>

    </div>

Это основа разметки, которую мы будем использовать. Основную часть в этом небольшом коде выполниет

Похожие статьи:

Комментарии Вконтакте:

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

Ваш адрес email не будет опубликован.