Html меню верхнее: Меню для сайта html и css горизонтальное — 11 вариантов меню

Разное 

Продвинутые настройки / Подробные инструкции / Меню навигации / Меню навигации / Taplink — Инструмент по развитию бизнеса в соц. сетях

Эта инструкция о том, как добавить меню навигации на Таплинке. Всего три простых шага — и на вашей странице появится меню.

Если вы вы пришли сюда в поисках ответа на конкретный вопрос, то вы можете перейти сразу к одному из разделов:

  • Шаг 1 — Добавляем пункты в меню.
  • Шаг 2 — Настраиваем дизайн меню.
  • Шаг 3 — Добавляем меню на Таплинк страницу.
  • Как присвоить имя блоку страницы.
  • Как удалить пункт меню.
  • Как удалить меню с Таплинка.

Меню позволяет пользователям быстро найти нужную информацию. Вот один из вариантов, как может выглядеть меню на вашем Таплинке:

Пункты меню могут направлять пользователей на:

  • Внутренние страницы вашего Таплинка, в том числе страницы магазина.
  • Конкретные блоки на этих страницах.
  • Любые внешние веб-страницы.
  • Набор номера, отправку СМС или email, сохранение контакта.

Все возможные действия можно посмотреть на скриншоте ниже:

Обратите внимание! Если вы используете готовый шаблон страницы, то добавить меню вы можете только после публикации страницы. Опубликуйте ее, если еще этого не сделали. Если же вы используете «Пустой шаблон», то добавить меню вы можете в любой момент.

  1. Перейдите к управлению страницами.
  2. Выберите вкладку Меню навигации.

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

Во вкладке «Меню навигации», вы можете добавить пункты меню:

  1. Выберите Добавить ссылку.
  2. Введите текст, который будет отображаться.
  3. Выберите действие.
  4. Укажите страницу, а также имя блока, если добавляете ссылку на конкретный блок страницы.
  5. По желанию к каждому пункту меню можете добавить миниатюру — выберите иконку или загрузите свое изображение.
  6. Нажмите Сохранить.

Чтобы добавить еще один пункт меню, снова проделайте шаги 1–5 инструкции выше. Для примера мы добавили еще две ссылки. Одна из них ведет на другой блок на этой же странице, а вторая набирает номер телефона для звонка.

Так добавленные ссылки выглядят в настройках:

Теперь, когда в меню есть все необходимые пункты, приступим к дизайну меню. Ниже мы подробно рассказываем о каждой настройке дизайна.

Для начала выберем форму и расположение меню:

  • Верхнее меню.
  • Виджет в правом верхнем углу.
  • Нижняя панель вкладок.

На скриншотах ниже вы можете посмотреть, как выглядит каждый тип меню на сайте: на первом «Верхнее меню», на втором «Виджет», на третьем «Нижняя панель вкладок».

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

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

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

Посмотрите на примеры ниже. В первом случае выбрано «Не скрывать», поэтому пункты меню отображаются. Во втором случае выбрано «Скрывать в телефоне», поэтому пункты меню свернуты в гамбургер.

Переходим к настройкам дизайна меню. Вам доступны настройки:

  • Фиксировать при прокрутке. Если функция активна, меню закреплено и всегда отображается при пролистывании страницы.
  • Логотип. Опционально. Логотип в виде текста или изображения на панели меню.
  • Шрифт. Толщина шрифта, регистр, размер и межбуквенный интервал, шрифт.
  • Стиль. Стиль активного пункта меню.
  • Цвета. Цвета разных деталей меню.
  • Выравнивание. Выравнивание пунктов меню.
  • Ширина. Ширина, которую занимают пункты меню на панели.
  • Толщина бордюра. Толщина линии над или под меню.

Настройте дизайн меню, которое открывается при нажатии на гамбургер. Вам доступны настройки:

  • Иконка. Вид гамбургера.
  • Анимация. Анимация при открытии и закрытии меню.
  • Цвета. Цвета для деталей меню.
  • Шрифт. Толщина шрифта, регистр, размер и межбуквенный интервал, шрифт.
  • Выравнивание. Выравнивание пунктов меню.
  • Отступ между ссылками. Расстояние между пунктами меню.
  • Скорость анимации. Скорость анимации при открытии и закрытии меню.

По желанию вы можете добавить к меню тень. У тени есть настройки:

  • X смещение. Смещение тени вправо или влево.
  • Y смещение. Смещение тени вверх и вниз.
  • Размытие. Размер размытия.
  • Растяжение. Пропорциональное увеличение тени по осям X и Y.
  • Цвет. Цвет тени.
  • Прозрачность. Настройка прозрачности тени.

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

Теперь пользователи не заблудятся на вашем Таплинке. Обязательно поделитесь своим Таплинком в ВК, Инстаграме и других социальных сетях, если еще этого не сделали.

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

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

  1. Нажмите на блок.
  2. Выберите вкладку Настройки.
  3. Включите функцию Присвоить имя блока.
  4. Укажите название блока.
  5. Нажмите Сохранить.

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

Удалить пункт меню можно в любой момент:

  1. Перейдите к управлению страницами.
  2. Выберите вкладку Меню навигации.
  3. Нажмите иконку удалить рядом с ненужным пунктом.
  4. Нажмите Да.

Если вы хотите убрать меню с сайта, вам нужно выключить функцию «Показывать на сайте»:

  1. Перейдите к управлению страницами.
  2. Перейдите во вкладку Меню навигации.
  3. Выключите функцию Показывать на сайте.

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

что это за методология веб-разработки, HTML-верстка по БЭМ

БЭМ — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Расшифровывается как «Блок, Элемент, Модификатор».

Методология БЭМ была разработана специалистами Яндекса и быстро получила международное признание: в отличие от других CSS-концепций, БЭМ также работает с JavaScript, одним из наиболее популярных решений для создания архитектуры веб-приложений.

В основе БЭМ — соглашение по именованию, которое делает имена CSS-классов максимально информативными для разработчиков и позволяет многократно использовать компоненты. Подход упрощает командную работу, масштабирование и поддержку проектов. 

Зачем нужен БЭМ

Соблюдение правил методологии ускоряет процесс разработки:

  • упрощает код и облегчает рефакторинг;
  • избавляет от необходимости комментировать код, поскольку назначение CSS-селекторов становится очевидным по названиям;
  • позволяет использовать одни и те же фрагменты кода многократно, в том числе на одном DOM-узле;
  • предотвращает взаимное влияние компонентов друг на друга.

Проиллюстрируем все преимущества БЭМ на примере. Предположим, что вверху страницы есть навигационное меню, в котором используются имена CSS-классов item, item active, link:

<ul class=»nav»>
<li class=»item active»><a class=»link»>Главная</a></li>
<li class=»item»><a class=»link»>Портфолио</a></li>
<li class=»item»><a class=»link»>Контакты</a></li>

</ul>

CSS-стили для элементов могут выглядеть так:

.item
{
margin: 5px 5px;
color: #fff;
background-color: #000;
font-weight: bold;
}
.active
{
background-color: #666666;
}

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

Ожидание vs. реальность: стили смешались, пункты бокового меню отображаются только при наведении курсора.

Методология верстки БЭМ решает эту проблему:

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

Для иллюстрации принципов БЭМ вернемся к предыдущему примеру. Класс nav будет обозначать название блока верхнего меню, а имена остальных элементов мы изменим так, чтобы была очевидна их принадлежность к nav:

  • item станет nav__item;
  • link — nav__link;
  • active — nav__item_active.

Фрагмент HTML-кода, описывающий верхнее меню, теперь выглядит так:

<ul class=»nav»>
<li class=»nav__item nav__item_active»><a class=»nav__link»>Главная</a></li>
<li class=»nav__item»><a class=»nav__link»>Портфолио</a></li>

<li class=»nav__item»><a class=»nav__link»>Контакты</a></li>
</ul>

CSS-стили для элементов меню примут такой вид:

.nav__item
{
margin: 5px 5px;
color: #fff;
background-color: #000;
font-weight: bold;
}
.nav__item_active
{
background-color: #666666;
}

Благодаря методологии составные блоки страницы становятся изолированными, стиль элементов одного блока не может повлиять на другой. Единственный недостаток подхода — длинные имена классов. Это увеличивает и объем кода, и время на его написание. Однако для решения проблемы в распоряжении разработчиков есть несколько эффективных инструментов:

  • утилита qzip для сжатия кода;
  • автодополнение кода в IDE или редакторе;
  • использование шаблонизаторов и CSS-препроцессоров для автоматического добавления префиксов.

Основные понятия БЭМ

Эффективность БЭМ-верстки достигается благодаря разделению кода:

  • на независимые блоки;
  • элементы (дочерние компоненты) блока;
  • модификаторы блоков и элементов.

Рассмотрим блоки, элементы и модификаторы подробнее.

Блок

Блок — логически и функционально независимый компонент страницы: меню, боковая панель, карусель, шапка сайта и так далее. Блок включает в себя шаблоны (Pug, Handlebars) и CSS-стили, скрипты JavaScript, документацию в формате XML или Markdown, другие необходимые для реализации технологии.

Шапка сайта инкапсулирует навигационное меню, логотип, поиск и авторизацию

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

Благодаря верстке по БЭМ на страницах можно размещать сколько угодно экземпляров одного и того же блока.

Методология упрощает многократное использование компонентов

Элемент

Элемент — неотделимая составная часть блока. Особенности элементов:

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

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

Это необязательные компоненты: небольшие блоки могут обходиться без вложенных элементов. Методология не устанавливает жестких правил в отношении того, когда разработчику следует использовать блок, а когда — элемент. Блоки, как правило, нужно создавать в том случае, если фрагмент кода может использоваться самостоятельно. Зависимым фрагментам кода (элементам) необходима родительская сущность — блок.

Рекомендации БЭМ-верстки касаются смысла и структуры наименования элементов:

  1. Название элемента должно характеризовать его смысл, роль — item («пункт меню»), link («ссылка»).
  2. Структура имени элемента должна соответствовать схеме имя-блока__имя-элемента — имя элемента отделяется двойным подчеркиванием.

Модификатор

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

Внешний вид верхнего и нижнего меню заметно отличается.

Модификаторы делятся на два типа:

  1. Булевые. Применяют, когда факт наличия модификатора важнее, чем его значение. Например, если элемент имеет модификатор disabled («отключен»), значение по умолчанию равно true. Структура имени при использовании булевого модификатора выглядит так: имя-блока__имя-элемента_имя-модификатора.
  2. Ключ-значение. Используют в тех случаях, когда значение модификатора важно. Например, если применяется блок с определенной темой оформления: search-form_theme_forest.
    Структура наименования модификатора элемента соответствует схеме: имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Модификаторы могут изменяться в процессе работы блока в зависимости от запросов из других блоков или как реакция на DOM-события. Например, если пользователь введет неверные данные в форму авторизации и нажмет кнопку «Войти», DOM-событие click («Нажатие») изменит свойство блока с сообщением об ошибке с невидимого на видимое.

Наличие модификаторов у элементов и блоков — опционально, количество — не ограничено.

Следует помнить, что блоку и его элементу нельзя присваивать разные значения одного и того же модификатора. По правилам БЭМ, название модификатора должно характеризовать:

  • внешний вид блока или элемента;
  • состояние компонента;
  • поведение.

Традиционно имя модификатора отделяют от имени блока или элемента одним подчеркиванием (_). В качестве альтернативы также используют двойной дефис (—).

Миксы

Миксом в терминологии БЭМ называется способ использования разных БЭМ-сущностей на одном DOM-узле таким образом, чтобы не возникало дублирования кода. С помощью миксов можно:

  • задавать одинаковое форматирование для различных элементов дизайна;
  • создавать новые компоненты интерфейса на основе имеющихся;
  • совмещать поведение и стили нескольких компонентов.

Пример БЭМ-микса — смешивание свойств ссылок на боковой панели sidebar и элемента item из блока основного меню main-menu:

<nav class=»main-menu»>
<a class=» sidebar main-menu __item» href=»»></a>
<a class=» sidebar main-menu __item» href=»»></a>
<a class=» sidebar main-menu __item» href=»»></a>
</nav>

Файловая структура

Для организации проектов методология БЭМ предусматривает компонентный подход: все блоки, элементы и модификаторы реализуются в независимых файлах-технологиях — например, footer.

css, footer.js. Это позволяет:

  • подключать компоненты опционально;
  • разрабатывать блоки проекта независимо друг от друга;
  • переносить блоки между проектами.

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

БЭМ предоставляет фронтенд-разработчикам комплексное решение для создания архитектуры проекта и организации рабочего процесса. Однако БЭМ не единственная методология — профессиональные веб-разработчики используют и другие решения для оптимизации CSS и переиспользования компонентов:

  • OOCSS;
  • SMACSS;
  • SUIT CSS;
  • Systematic CSS.

Каждая из этих концепций обладает набором собственных преимуществ и подходит для реализации определенных проектов. 

Как создать фиксированное меню

❮ Назад Далее ❯

Узнайте, как создать «фиксированное» меню с помощью CSS.

Попробуйте сами »

Как создать фиксированное верхнее меню

Шаг 1) Добавьте HTML:

Пример


Некоторый текст какой-то текст какой-то текст какой-то текст.

.


Шаг 2) Добавьте CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0 . Обратите внимание, что фиксированное меню будет накладываться на другой ваш контент. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше высоты вашего меню.

Пример

/* Панель навигации */
.navbar {
  overflow: hidden;
цвет фона: #333;
  позиция: фиксированная; /* Набор панель навигации в фиксированное положение */
  верх: 0; /* Поместите панель навигации вверху страницы */
  width: 100%; /* Полная ширина */
}

/* Ссылки внутри панели навигации */
.navbar a {
  float: left;
  дисплей: блокировать;
  цвет: #f2f2f2;
  выравнивание текста: центр;
  отступ: 14 пикселей 16 пикселей;
текстовое оформление: нет;
}

/* Изменение фона при наведении мыши */
. navbar a:hover {
  background: #ddd;
  цвет: черный;
}

/* Основной контент */
.main {
  margin-top: 30px; /* Добавляем вершину поле, чтобы избежать наложения содержимого */
}

Попробуйте сами »

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и снизу:0 :

Пример

/* Панель навигации */
.navbar {
  position: fixed; /* Установить панель навигации в фиксированное положение */
  bottom: 0; /* Поместите панель навигации внизу страницы */
  ширина: 100%; /* Полная ширина */
}

/* Основной содержимое */
.main {
 нижнее поле: 30 пикселей; /* Добавьте нижнее поле, чтобы содержимое не накладывалось */
}

Попробуйте сами »

Совет: Перейдите к нашему руководству по CSS Navbar, чтобы узнать больше о панелях навигации.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Как учебное пособие
SQL Tutorial
Python Tupormior
W3.CSS Tupormior
Учебник по начальной школе
PHP Учебник
Java Tutorial
C ++ Учебник
JQUERY TURAND

TOP STUPRICES
JQUERY

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Пример строки меню навигации | ПНГ | ВАИ

Пример строки меню навигации

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

Это наглядный пример одного из способов использования ARIA, соответствующего спецификации ARIA.

  • В некоторых случаях могут быть пробелы в поддержке. комбинации браузера и вспомогательных технологий, особенно для мобильные/сенсорные устройства. Тестирование кода, основанного на этом примере, со вспомогательными технологиями необходимо, прежде чем рассматривать возможность использования в производственных системах.
  • Проект ARIA и Assistive Technologies разрабатывает измерения поддержки вспомогательных технологий для примеров APG.
  • Надежная доступность может быть дополнительно оптимизирована путем выбора шаблонов реализации, максимально использующих семантический HTML, и принимая во внимание предупреждение о том, что Нет ARIA лучше, чем Bad ARIA.

Об этом примере

Внимание!

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

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

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

Аналогичные примеры включают:

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

Мифический Университет

Использование строки меню для навигационных ссылок

Информация в нижнем колонтитуле Мифического университета

Специальные возможности

  1. Элементы меню, запускающие навигацию, перемещают фокус на заголовок целевой страницы:
    • Важным аспектом разработки интерфейса меню навигации является перемещение фокуса клавиатуры при активации элемента, запускающего навигацию, и меню закрывается. Если активация элемента строки меню изменяет содержимое на странице, не вызывая загрузки страницы в браузере, т. е. работает как типичные одностраничные приложения, положение фокуса после загрузки содержимого значительно влияет на эффективность работы пользователей с клавиатурой и вспомогательными технологиями.
    • Этот пример ведет себя как одностраничное приложение, и активация элемента меню, который загружает новое содержимое, перемещает фокус в начало нового содержимого, которое является заголовком первого уровня с содержимым, совпадающим с именем активированного элемента меню. Сосредоточение внимания на заголовке информирует пользователей программ чтения с экрана о завершении навигации и подтверждает пункт назначения.
    • Для просмотра других страниц пользователям клавиатуры необходимо вернуться к строке меню. Чтобы оптимизировать эффективность клавиатуры, в этом примере строка меню располагается непосредственно перед областью отображения содержимого в последовательности вкладок.
  2. Чтобы сообщить, что клавиши со стрелками доступны для навигации по строке меню и ее подменю, в контейнер строки меню добавляется граница, когда фокус находится внутри строки меню.
  3. Чтобы помочь пользователям найти пункт меню, который загружает текущую отображаемую страницу, визуальные индикаторы пути к этому пункту меню добавляются к пунктам меню в пути:
    • Элемент родительской строки меню в пути имеет слишком толстую (4 пикселя) нижнюю границу.
    • Если текущий элемент меню страницы вложен в более глубокое подменю, родительский элемент подменю в пути имеет слишком толстую (4 пикселя) левую боковую границу.
    • Наконец, элемент меню, который загружает текущую отображаемую страницу, имеет стиль с очень толстой рамкой с левой стороны.
  4. Для поддержки настроек высокой контрастности операционной системы:
    • Поскольку прозрачные границы видны в некоторых системах с включенными параметрами высокой контрастности операционной системы, прозрачность нельзя использовать для создания визуального различия между элементом, на котором находится фокус, и другими элементами. Вместо использования прозрачности сфокусированный элемент имеет более толстую границу и меньше отступов. Когда элемент получает фокус, его граница изменяется с 0 на 2 пикселя, а отступы уменьшаются на 2 пикселя. Когда элемент теряет фокус, его граница изменяется с 2 до 0 пикселей, а отступ увеличивается на 2 пикселя.
    • Чтобы значки со стрелками, используемые для обозначения развернутого или свернутого состояния, имели достаточный контраст с фоном, когда настройки высокой контрастности инвертируют цвета, значение CSS currentcolor для свойств fill и stroke элемента SVG polygon равно используется для синхронизации цвета с текстовым содержимым. Если для указания заливки и штриха 9 используются определенные цвета0032, эти цвета останутся такими же в режиме высокой контрастности, что может привести к недостаточному контрасту между значком и фоном или даже сделать значок невидимым, если его цвет совпадает с фоном режима высокой контрастности.
  5. Поскольку строка меню представляет собой систему навигации сайта, она заключена в область навигации, реализованную с помощью элемента nav , который имеет метку aria-label , совпадающую с меткой в ​​строке меню.

Подставка для клавиатуры

Панель меню

Ключ Функция
Пробел
Введите
  • Если элемент является элементом родительского меню, открывает подменю и перемещает фокус на первый элемент в подменю.
  • В противном случае активирует пункт меню, который загружает новый контент и фокусируется на заголовке, который озаглавляет контент.
Стрелка вправо
  • Перемещает фокус на следующий элемент в строке меню.
  • Если фокус находится на последнем элементе, фокус перемещается на первый элемент.
Стрелка влево
  • Перемещает фокус на предыдущий элемент в строке меню.
  • Если фокус находится на первом элементе, фокус перемещается на последний элемент.
Стрелка вниз Открывает подменю и перемещает фокус на первый элемент подменю.
Стрелка вверх Открывает подменю и перемещает фокус на последний элемент подменю.
Дом Перемещает фокус на первый элемент в строке меню.
Конец Перемещает фокус на последний элемент в строке меню.
Символ
  • Перемещает фокус на следующий элемент в строке меню, имя которого начинается с введенного символа.
  • Если ни один из элементов не имеет имени, начинающегося с введенного символа, фокус не перемещается.

Подменю

Ключ Функция
Пробел
Введите
  • Если элемент является элементом родительского меню, открывает подменю и перемещает фокус на первый элемент в подменю.
  • В противном случае активирует пункт меню, который загружает новый контент и фокусируется на заголовке, который озаглавляет контент.
Побег
  • Закрывает подменю.
  • Перемещает фокус на родительский пункт меню.
Стрелка вправо
  • Если фокус находится на элементе с подменю, открывает подменю и устанавливает фокус на первый элемент.
  • Если фокус находится на элементе, который не имеет подменю:
    • Закрывает подменю.
    • Перемещает фокус на следующий элемент в строке меню.
    • Открывает подменю только что сфокусированного элемента строки меню, сохраняя фокус на этом родительском элементе строки меню.
Стрелка влево
  • Закрывает подменю и перемещает фокус на родительский элемент меню.
  • Если пункт родительского меню находится в строке меню, также:
    • перемещает фокус на предыдущий элемент в строке меню.
    • Открывает подменю только что сфокусированного элемента строки меню, сохраняя фокус на этом родительском элементе строки меню.
Стрелка вниз
  • Перемещает фокус на следующий элемент подменю.
  • Если фокус находится на последнем элементе, фокус перемещается на первый элемент.
Стрелка вверх
  • Перемещает фокус на предыдущий элемент в подменю.
  • Если фокус находится на первом элементе, фокус перемещается на последний элемент.
Дом Перемещает фокус на первый элемент подменю.
Конец Перемещает фокус на последний элемент подменю.
Символ
  • Перемещает фокус на следующий элемент, имя которого начинается с введенного символа.
  • Если ни один из элементов не имеет имени, начинающегося с введенного символа, фокус не перемещается.

Роль, свойство, состояние и атрибуты Tabindex

Достопримечательности

Роль Атрибут Элемент Применение
баннер коллектор
  • Определяет верхний раздел содержимого, который является общим для всех страниц веб-сайта.
  • ПРИМЕЧАНИЕ: 9Объявление роли баннера 0031 необходимо только потому, что это пример, вложенный в содержимое этой страницы. На реальном веб-сайте элемент заголовка будет элементом верхнего уровня, т. е. его областью действия будет тело. Если бы областью действия элемента заголовка было тело, браузеры автоматически обрабатывали бы заголовок как баннер ARIA, поэтому заголовок не нуждался бы в role="banner" .
навигация навигация Обозначает регион, в котором находится мифическая университетская навигация.
aria-label="Мифический университет" навигация Предоставляет доступное имя для ориентира навигации , описывающего цель навигации.
регион секция
  • Идентифицирует область основного содержимого страницы, изображенной в примере.
  • На реальной веб-странице этот регион будет обозначаться основным ориентиром , но, поскольку на этой странице уже есть основной ориентир, регион роли используется, чтобы избежать двух основных ориентиров на странице.
aria-labelledby=" idref " секция Предоставляет региону доступное имя из элемента h2 .
информация о содержании нижний колонтитул
  • Обозначает нижний раздел содержимого, общий для всех страниц веб-сайта.
  • ПРИМЕЧАНИЕ. Объявление роли contentinfo необходимо только потому, что нижний колонтитул является примером, вложенным в содержимое этой страницы. На реальном веб-сайте элемент нижнего колонтитула будет элементом верхнего уровня, т. е. его областью действия будет тело. Если бы областью действия элемента нижнего колонтитула было тело, браузеры автоматически обрабатывали бы нижний колонтитул как ориентир ARIA contentinfo , поэтому нижний колонтитул не нуждался бы в роль="информация о контенте" .

Панель меню

Роль Атрибут Элемент Использование
строка меню ул
  • Идентифицирует элемент как панель меню контейнер для набора из элементов меню элементов.
  • Элемент меню не может быть сфокусирован, потому что он реализует практику, описанную в разделе, посвященном Управление фокусом внутри компонентов с помощью подвижной вкладки.
ария-метка = " строка " ул
  • Определяет доступное имя для строки меню .
  • Помогает пользователям вспомогательных технологий понять назначение строки меню и отличить ее от любых других строк меню или подобных элементов на странице.
пункт меню и
  • Идентифицирует элемент как пункт меню.
  • Доступное имя вычисляется из текстового содержимого элемента a .
табиндекс="-1" и Делает клавиатуру элемента a фокусируемой, но не частью последовательности табуляции.
табундекс="0" и
  • Включает элемент в Вкладка последовательность.
  • Только один пункт меню имеет tabindex="0" .
  • При загрузке страницы первый элемент строки меню имеет tabindex="0" .
  • Фокус управляется с помощью практики для Управление фокусом внутри компонентов с помощью подвижной вкладки.
ария-текущая = "страница" и
  • Указывает, что URL-адрес ссылки совпадает с URL-адресом веб-страницы.
  • Если URL-адрес ссылки не совпадает, атрибут удаляется.
  • Элементы меню в строке меню в пути к элементу меню текущей страницы получают атрибут title с текстовым содержимым «Содержит ссылку на текущую страницу», чтобы указать пользователям программы чтения с экрана, что элемент меню содержит ссылку на текущую страницу.
ария-haspopup="true" и Указывает, что элемент меню имеет подменю.
ария-расширенная = "истина" и Указывает, что подменю открыто.
расширенная ария = "ложь" и Указывает, что подменю закрыто.
нет ли
  • Удаляет подразумеваемую роль listitem элемента li .
  • Необходимо, поскольку родительский элемент ul служит меню , поэтому элементы li не находятся в требуемом контексте списка.

Подменю

Роль Атрибут Элемент Использование
меню ул Идентифицирует элемент как контейнер меню для набора пунктов меню.
ария-метка = " строка " ул
  • Определяет доступное имя для меню .
  • Помогает пользователям вспомогательных технологий понять назначение меню и отличить его от любого другого меню или подобных элементов (например, строки меню) на странице.
пункт меню и
  • Идентифицирует элемент как пункт меню.
  • Доступное имя вычисляется из текстового содержимого элемента a .
табиндекс="-1" и Сохраняет элемент a в фокусе, но удаляет его из последовательности Tab .
ария-haspopup="true" и Указывает, что элемент меню имеет подменю.
ария-расширенная = "истина" и Указывает, что подменю открыто.
расширенная ария = "ложь" и Указывает, что подменю закрыто.
нет ли