Как делать меню в html
Перейти к содержимому

Как делать меню в html

  • автор:

Как делать меню в html

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

Категории контента Flow content. If the element’s children include at least one element: Palpable content.
Допустимое содержимое If the element is in the list menu state: flow content, or alternatively, zero or more occurrences of , , and . (list menu is the default state, unless the parent element is a in the context menu state.)If the element is in the context menu state: zero or more occurrences, in any order, of (context menu state only), , , , and .
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который поддерживает основной поток.
Неявные ARIA-роли list
Допустимые ARIA-роли directory , group , listbox , menu , menubar , none , presentation , radiogroup , tablist , toolbar или tree
DOM-интерфейс HTMLMenuElement

Атрибуты

К этому элементу применимы глобальные атрибуты.

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a in the context menu state.

This attribute indicates the kind of menu being declared, and can be one of two values.* context Устарело : Indicates the popup menu state, which represents a group of commands activated through another element. This might be as a button menu referenced by a menu attribute of a element, or as context menu for an element with a contextmenu attribute. This value is the default if the attribute is missing and the parent element is also a element.

  • toolbar : Indicates the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of elements, or, if the element has no
  • element children, flow content describing available commands. This value is the default if the attribute is missing.

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

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type ‘list’ is likely to change to ‘toolbar’ according to HTML5.1.

Примеры

Context menu

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

HTML
 element with a context menu --> div contextmenu="popup-menu">Right-click to see the adjusted context menudiv> menu type="context" id="popup-menu"> menuitem>Actionmenuitem> menuitem>Another actionmenuitem> hr /> menuitem>Separated actionmenuitem> menu> 
CSS
div  width: 300px; height: 80px; background-color: lightgreen; > 
Result

Menu button

Предупреждение: Menu buttons haven’t been implemented in any known browsers yet. The type attribute on the element is now obsolete.

HTML
button type="menu" menu="popup-menu">Dropdownbutton> menu type="context" id="popup-menu"> menuitem>Actionmenuitem> menuitem>Another actionmenuitem> hr /> menuitem>Separated actionmenuitem> menu> 
Result

Toolbar

Предупреждение: Toolbar menus haven’t been implemented in any known browsers yet.

HTML
menu type="toolbar"> li> button type="menu" menu="file-menu">Filebutton> menu type="context" id="file-menu"> menuitem label="New. " onclick="newFile()"> menuitem label="Save. " onclick="saveFile()"> menu> li> li> button type="menu" menu="edit-menu">Editbutton> menu type="context" id="edit-menu"> menuitem label="Cut. " onclick="cutEdit()"> menuitem label="Copy. " onclick="copyEdit()"> menuitem label="Paste. " onclick="pasteEdit()"> menu> li> menu> 
Result

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

Specification
HTML Standard
# the-menu-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Other list-related HTML Elements: , , , , and the obsolete .

— элемент навигации

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

Категории контента Потоковый контент, секционный контент, явный контент.
Допустимое содержимое Потоковый контент.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, содержащий потоковый контент.
Допустимые ARIA-роли Нет
DOM-интерфейс HTMLElement

Атрибуты

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

Примечание

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

Примеры

nav class="menu"> ul> li>a href="#">Главнаяa>li> li>a href="#">О насa>li> li>a href="#">Контактыa>li> ul> nav> 

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

Specification
HTML Standard
# the-nav-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Другие секционные элементы: , , , , , , , , , , , , , ;
  • Разделы и структура документа HTML5.

Горизонтальное меню для сайта

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

Как сделать горизонтальное меню: разметка и примеры оформления

  • Содержание:
  • HTML-разметка и базовые стили для горизонтального меню
  • 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
  • 2. Адаптивное меню для свадебного сайта
  • 3. Адаптивное меню с фестонами
  • 4. Адаптивное меню на ленточке
  • 5. Адаптивное меню с логотипом по середине
  • 6. Адаптивное меню с логотипом слева

HTML-разметка и базовые стили для горизонтального меню

HTML разметка для горизонтальной навигации

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ >a 

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.

Способ 2. li

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 3. li

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed'); .menu-main < list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; >.menu-main li .menu-main li:after < content: "|"; color: #606060; display: inline-block; vertical-align:top; >.menu-main li:last-child:after .menu-main a < text-decoration: none; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; >.menu-main a, .menu-main a:visited .menu-main a.current, .menu-main a:hover .menu-main a:before, .menu-main a:after < content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; >.menu-main a:hover:before, .menu-main .current:before .menu-main a:hover:after, .menu-main .current:after @media (max-width: 550px) < .menu-main .menu-main li .menu-main li:after .menu-main a < padding: 25px 0 20px; margin: 0 30px; >>

2. Адаптивное меню для свадебного сайта

@import url('https://fonts.googleapis.com/css?family=PT+Sans'); .top-menu < position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; >.top-menu:before, .top-menu:after < content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; >.top-menu:after < border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; >.menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; >.menu-main:before, .menu-main:after < content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); >.menu-main:before .menu-main:after .menu-main li < display: inline-block; padding: 5px 0; >.menu-main a < text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: 'PT Sans', sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; >.menu-main .current, .menu-main a:hover < border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; >@media (max-width: 500px) < .menu-main li >

3. Адаптивное меню с фестонами

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; >.menu-main:after < content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; >.menu-main li .menu-main a < text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: 'PT Sans Caption', sans-serif; color: #777777; transition: .3s linear; position: relative; >.menu-main a:before, .menu-main a:after < content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; >.menu-main a:before .menu-main a:after .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after .menu-main a.current, .menu-main a:hover @media(max-width:680px) < .menu-main li >

4. Адаптивное меню на ленточке

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .top-menu < margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); >.top-menu:before, .top-menu:after < content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; >.top-menu:before < top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); >.top-menu:after < bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); >.menu-main < list-style: none; padding: 0; margin: 0; text-align: center; >.menu-main:before, .menu-main:after < content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; >.menu-main:before < left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); >.menu-main:after < right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); >.menu-main li < display: inline-block; margin-right: -4px; >.menu-main a < text-decoration: none; display: inline-block; padding: 15px 30px; font-family: 'PT Sans Caption', sans-serif; color: white; transition: .3s linear; >.menu-main a.current, .menu-main a:hover @media (max-width: 680px) < .top-menu .menu-main li < display: block; margin-right: 0; >.menu-main:before, .menu-main:after .menu-main a >

5. Адаптивное меню с логотипом по середине

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < position: relative; background: rgba(34,34,34,.2); >.menu-main < list-style: none; margin: 0; padding: 0; >.menu-main:after < content: ""; display: table; clear: both; >.left-item .right-item .navbar-logo < position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.menu-main a < text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: white; transition: .3s linear; >.menu-main a:hover @media (max-width: 830px) < .menu-main < padding-top: 90px; text-align: center; >.navbar-logo < position: absolute; left: 50%; top: 10px; transform: translateX(-50%); >.menu-main li < float: none; display: inline-block; >.menu-main a < line-height: normal; padding: 20px 15px; font-size: 16px; >> @media (max-width: 630px) < .menu-main li >

6. Адаптивное меню с логотипом слева

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; >.top-menu:after < content: ""; display: table; clear: both; >.navbar-logo .menu-main < list-style: none; margin: 0; padding: 0; float: right; >.menu-main li .menu-main a < text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; >.menu-main a:before < content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; >.menu-main a:hover:before @media (max-width: 660px) < .menu-main < float: none; padding-top: 20px; >.top-menu < text-align: center; padding: 20px 0 0 0; >.menu-main a .menu-main a:before > @media (max-width: 600px) < .menu-main li >

Навигация¶

Как вы узнали в разделе «ссылки», элемент с атрибутом href создает ссылки, по которым пользователи могут переходить, щелкая или касаясь их. В разделе о списках вы узнали, как создавать списки содержимого. В этом разделе вы узнаете, как группировать списки ссылок для создания навигации.

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

Оглавление страницы — это еще один вид локальной навигации. Страница, содержащая иерархические ссылки на все страницы сайта, называется картой сайта. Раздел навигации, ведущий к страницам верхнего уровня сайта и присутствующий на каждой странице, называется глобальной навигацией. Глобальная навигация может быть представлена несколькими способами, включая навигационные панели, выпадающие и раскрывающиеся меню. На одном и том же сайте глобальная навигация может отображаться по-разному, в зависимости от размера области просмотра.

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

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

Если вы просматриваете эту страницу на web.dev, то можете заметить несколько особенностей навигации. Над заголовком находится хлебная крошка, после заголовка — оглавление «На этой странице», а также оглавление «Изучение HTML», которое в зависимости от ширины экрана либо отображается всегда, либо становится видимым при нажатии на кнопку меню. Первым элементом на странице является скрытая ссылка на #main , которая позволяет пропустить как боковую панель, так и ссылки на хлебные крошки.

Ссылка «Перейти к содержимому»¶

Первый элемент на странице является внутренней ссылкой:

a href="#main" class="skip-link button">Skip to maina> 

который при нажатии на него или при наличии фокуса и нажатии пользователем кнопки Enter прокручивает страницу и передает фокус основному содержимому: ориентиру с id main :

main id="main">main> 

Возможно, вы никогда не видели эту ссылку на сайте, даже если прочитали все предыдущие разделы. Она отображается только при наличии фокуса:

Skip to Main button.

Для повышения удобства использования и доступности важно дать пользователям возможность обходить блоки контента, которые повторяются на каждой странице. Ссылка на пропуск включается для того, чтобы пользователь, нажимающий при загрузке клавишу Tab , мог быстро перейти к основному содержанию сайта, избежав необходимости переходить по обширным ссылкам. На этой странице ссылка «пропустить» пропускает навигацию по боковым панелям разделов и хлебные крошки, переводя пользователя непосредственно к заголовку страницы.

Большинству дизайнеров не нравится, когда ссылка располагается в верхней части страницы. Можно скрыть ссылку от посторонних глаз, помня при этом, что когда ссылка окажется в фокусе, а это произойдет, когда пользователь клавиатуры перейдет по ссылке на страницу, ссылка должна быть видна всем пользователям. Скрывать содержимое в нефокусном и неактивном состоянии можно только с помощью селектора, аналогичного .visually-hidden:not(:focus):not(:active) .

Текст ссылки гласит «перейти к основному». Это доступное имя ссылки. Это технический сайт, и пользователи, вероятно, знают, что означает слово «главная». Как и весь текст ссылки, доступное имя должно четко указывать, куда ведет ссылка. Целью ссылки должно быть начало основного содержания страницы. Чтобы проверить это, при загрузке страницы перейдите по вкладке к ссылке «Skip to main». Затем нажмите Enter , чтобы убедиться, что ссылка «переходит» к основному содержанию.

Оглавление¶

Ссылка skip-to-content прокручивает основное содержание. Первым элементом является заголовок с названием данного раздела. В данном случае

Разметка навигации

. За основным заголовком следует теглайн — краткое описание содержания данного учебника. Будет ли навигация по оглавлению идти до или после заголовка в кодовой базе, зависит от ширины вашего браузера.

На узких экранах оглавление скрывается за кнопкой На широких экранах оглавление всегда видно, а ссылка на текущий раздел выделена синим цветом.

Если ширина браузера превышает 80em , то оглавление в разметке располагается перед заголовком и выглядит следующим образом (имена классов удалены для упрощения разметки):

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
nav aria-label="On this page"> div>On this pagediv> div> ul> li> a href="#skip">Skip to content linka> li> li> a href="#toc">Table of contentsa> li> li> a href="#bc">Page breadcrumbsa> li> li> a href="#ln">Local navigationa> li> li> a href="#global">Global navigationa> li> ul> div> nav> 

Элемент лучше всего использовать для разделов навигации: он автоматически сообщает программе чтения с экрана и поисковой системе, что раздел имеет роль navigation , роль ориентира.

Включение атрибута aria-label дает краткое описание назначения навигации. В данном случае, поскольку значение атрибута является избыточным для текста, видимого на странице, предпочтительнее использовать aria-labelledby для ссылки на видимый текст.

Мы можем изменить несемантический на абзац , затем добавить id , чтобы на него можно было ссылаться. Затем мы используем aria-labelledby :

1 2 3
nav aria-labelledby="tocTitle"> p id="tocTitle">On this pagep> nav> 

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

Эта навигация является оглавлением. Если вы хотите использовать aria-label , предоставьте эту информацию, а не повторяйте видимый текст:

1 2 3
nav aria-label="Table of Contents"> p>On this pagep> nav> 

При указании доступного имени элемента не следует указывать его название. Эту информацию предоставляют пользователю программы чтения с экрана. Например, при использовании элемента не следует включать слово «навигация»; эта информация включается при использовании семантических элементов.

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
nav aria-labelledby="tocTitle"> p id="tocTitle">On this pagep> ul role="list"> li> a href="#skip">Skip to content linka> li> li> a href="#toc">Table of contentsa> li> li> a href="#bc">Page breadcrumbsa> li> li> a href="#ln">Local navigationa> li> li> a href="#global">Global navigationa> li> ul> nav> 

Если ширина браузера не превышает 80em , то виджет «На этой странице» располагается ниже заголовка и теглайна. Это достигается за счет включения двух навигационных компонентов таблицы содержания и скрытия одного или другого с помощью CSS display: none; на основе медиазапроса.

Включение двух одинаковых виджетов для отображения только одного из них является антипаттерном. Дополнительные байты незначительны. Скрытие HTML-содержимого от всех пользователей с помощью CSS display: none вполне уместно. Проблема заключается в том, что на широких экранах оглавление располагается перед #main , а на узких экранах оглавление вложено в #main . При использовании клавиатуры для перехода к содержимому на широком экране оглавление пропускается. Хотя пользователи привыкли к тому, что контент реагирует на изменения и меняет свое местоположение при смене устройства или увеличении размера шрифта, они не ожидают, что порядок вкладок при этом изменится. Макеты страниц должны быть доступными, предсказуемыми и последовательными на всем сайте. В данном случае расположение оглавления не является предсказуемым.

Хлебные крошки страницы¶

Хлебные крошки обеспечивают вторичную навигацию, помогая пользователям понять, где они находятся на сайте. Обычно они показывают иерархию URL текущего документа и местоположение текущей страницы в структуре сайта. Структура сайта с точки зрения пользователя может отличаться от файловой структуры на сервере. Это нормально. Пользователю не обязательно знать, как организованы ваши файлы, но он должен уметь ориентироваться в вашем содержимом.

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

Если сайт имеет простую иерархическую структуру каталогов, как это имеет место в web.dev, то навигация по хлебным крошкам часто состоит из ссылки на home, или имя хоста, со ссылкой на индексный файл каждого каталога в имени пути URL. Включение текущей страницы является необязательным и требует некоторого дополнительного внимания.

1 2 3 4 5
const url = new URL( 'https://web.dev/learn/html/navigation' ); const sections = url.hostname + url.pathname.split('/'); // "web.dev,learn,html,navigation" 

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

Хлебные крошки, указывающие путь к текущей странице.

Каждая страница модуля Learn HTML имеет одинаковую навигационную хлебную крошку, отображающую иерархию уроков HTML в секции learn раздела web.dev . Код аналогичен приведенному ниже, но для наглядности удалены классы и детали SVG:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
nav aria-label="breadcrumbs"> ul role="list"> li> a href="/"> svg aria-label="web.dev" role="img"> use href="#webDevLogo" /> svg> a> li> li> a href="/learn/">Learna> li> li> a href="/learn/html">Learn HTML!a> li> ul> share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0" > svg aria-label="share" role="img"> use href="#shareIcon" /> svg> span>Sharespan> share-action> nav> 

Между ссылками располагаются CSS-генерируемые разделители содержимого. Разделители располагаются перед каждым элементом списка, начиная со второго .

 1 2 3 4 5 6 7 8 9 10
[aria-label^='breadcrumb' i] li + li::before  content: ''; display: block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; opacity: 0.8; > 

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

В данной версии используется неупорядоченный список и элементы списка. Упорядоченный список предпочтительнее, так как элементы упорядоченного списка перечисляются. Кроме того, это список: role=»list» было добавлено, поскольку некоторые значения свойства отображения CSS лишают семантики некоторые элементы.

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

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

Текущая страница¶

На этой странице текущая страница «Навигация» не включена в хлебную крошку. Когда текущая страница включается в хлебную крошку, текст предпочтительно не должен быть ссылкой, а aria-current=»page» должен быть включен в элемент списка текущей страницы. В тех случаях, когда он не включен, полезно указать на то, что следующий за ним заголовок является текущей страницей, с помощью пиктограммы или другого символа.

При изменении дизайна можно использовать альтернативный вариант хлебной крошки:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14
nav aria-label="breadcrumbs"> ol role="list"> li> a href="/">Homea> li> li> a href="/learn/">Learna> li> li> a href="/learn/html">Learn HTML!a> li> li aria-current="page">Navigationli> ol> nav> 

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

Локальная навигация¶

На этой странице есть еще один навигационный компонент. Если вы находитесь на широком экране, то слева расположена боковая панель с логотипом «Learn HTML», строкой поиска и ссылками на каждый из 20 разделов «Learn HTML». Каждая ссылка содержит номер главы, название раздела и галочку справа от разделов, которые вы уже посещали — возможно, этот раздел, если вы переходили от него и вернулись. Ссылки на все разделы в Learn HTML, а также на поиск и локальный заголовок являются навигацией по сайту.

Если вы посещаете этот сайт на планшетном или мобильном устройстве или имеете более узкий экран, то при загрузке этой страницы боковая панель будет скрыта. Сделать ее видимой можно с помощью гамбургер-меню в верхней панели навигации (да, заголовок — это пользовательский элемент с установленной ролью=»navigation» ).

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

В локальной навигации рядом с названием этой главы стоит галочка.

Ссылка на данный документ, раздел 010, имеет несколько иной вид, чем другие ссылки в локальной навигации, чтобы указать зрячим пользователям, что это текущая страница. Это визуальное отличие создается с помощью CSS. Текущая страница также идентифицируется с помощью атрибута aria-current=»page» . Это информирует вспомогательные технологии о том, что это ссылка на текущую страницу. HTML для этого элемента списка в рамках локальной навигации выглядит следующим образом:

 1 2 3 4 5 6 7 8 9 10 11 12 13
li> a aria-current="page" href="/learn/html/navigation/" data-complete="true" > span>010span> span>Navigationspan> svg aria-label="Check" role="img"> use href="#checkmark" /> svg> a> li> 

Если вы посещаете эту страницу не в первый раз, то галочка не будет видна. Если вы посещали эту страницу в прошлом, то для data-complete пользовательского атрибута установлено значение true , и флажок будет отображаться. Флажок включен в каждую ссылку, но CSS скрывает его от пользователей, не посещавших эту страницу ранее, с помощью display: none , основываясь на отсутствии атрибута data-complete=»true» и его значения:

1 2 3
.course .stack-nav a:not([data-complete='true']) svg  display: none; > 

Когда display имеет значение, отличное от none , role сообщает вспомогательным технологиям, что инлайн SVG является изображением, а aria-label действует как атрибут alt в .

Глобальная навигация¶

Глобальная навигация — это раздел навигации, ведущий к страницам верхнего уровня сайта, который одинаков на всех страницах сайта. Глобальная навигация сайта может также состоять из вкладок, открывающих вложенные списки ссылок на все подразделы сайта, или других меню. Она может включать в себя заголовки разделов, кнопки и виджеты поиска. Эти дополнительные возможности не являются обязательным условием. Требуется, чтобы навигация отображалась на каждой странице и была одинаковой на всех страницах; разумеется, с указанием aria-current=»page» для всех ссылок на текущую страницу.

Глобальная навигация обеспечивает последовательное перемещение в любой точке приложения или сайта. У Google нет глобальной навигации в верхней части страницы. У Yahoo! она есть. Хотя все основные свойства Yahoo! имеют различные стили, содержание большинства разделов одинаково.

A well-contrasted navigation header, with a white picker on a black background.

A poorly-contrasted navigation header, with a black picker on a grey background.

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

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

Нижний колонтитул этой страницы содержит три дополнительных элемента : навигация по нижнему колонтитулу, разработчики Google и условия и политика, причем каждый из них является ссылкой. Навигация в нижнем колонтитуле включает в себя информацию о том, как внести вклад в web.dev на Github, другие образовательные материалы, предоставляемые Google за пределами web.dev, и внешние ссылки «как подключиться».

Эти три навигации в являются элементами с меткой aria-label , предоставляющей доступное имя для этих знаковых ролей. Все рассмотренные нами навигации представляют собой ссылки, вложенные в списки внутри навигации. Мы рассмотрели все, что необходимо знать для создания собственных навигаций. Далее мы рассмотрим разметку таблиц данных.

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

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