Навигация на сайте. Тег
Тег создаёт навигацию между страницами или разделами сайта. Он помогает пользователю найти нужную информацию и является важным элементом с точки зрения доступности.
Тег предназначен только для навигации — не используйте его для рекламы или изображений. А если навигационное меню содержит поле поиска, то это поле обязательно размещается вне тега .
Чем заменить тег
Заменять не рекомендуется, потому что этот тег помогает поисковым системам и технологиям доступа (например, экранным читалкам) понять расположение навигационных элементов сайта.
Если вы решите использовать другой тег, можно использовать, но он не несет семантического значения и не помогает с SEO и доступностью так, как .
Полезные ссылки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Создание простого адаптивного меню навигации с помощью CSS
Давно прошли те времена, когда для создания веб-макетов и меню навигации использовали HTML-таблицы . В современном инструментарии веб-разработчиков теперь применяется HTML nav . С его помощью можно создавать адаптирующиеся к различным размерам экрана макеты.
Мы все знаем, что простое и удобное меню навигации является одной из важнейших составляющих любого сайта. В этой статье я продемонстрирую часто используемый вариант создания простых меню навигации на CSS3 и HTML5 .
Простое HTML-меню навигации с использованием CSS
Мы используем обычные HTML-списки , чтобы вывести простой и удобный список ссылок. Концепция заключается в том, чтобы упорядочить меню по горизонтали, задать для элементов меню фон, а затем добавить к ссылкам эффект наведения ( медленно изменяющийся цвет фона ).
Демо-версия содержит меню в 6 различных цветовых тонах, но в руководстве я рассмотрю один вариант внешнего вида меню.
-
) и оберните их в HTML 5 nav . Смотрите приведенный ниже код:
Пояснение
.nav выступает в роли основного контейнера для меню навигации, этот класс назначен элементу навигации HTML5 (nav) . .nav__list назначен маркированному списку ( ul ), он действует как список ссылок. .nav__list__item — это класс, назначенный для элементов списка ( li ).
Я использовал классы практически для всех элементов кроме гиперссылок. Назначение классов позволяет избежать специфичности CSS.
Когда я работаю с CSS , я предпочитаю задавать имена классов согласно методологии BEM .
Еще одна особенность, которая заметна в коде — это теги комментариев HTML . Постараемся избежать перемещения элементов списка влево или вправо, поэтому для простоты я буду использовать свойство display: inline-block . Таким образом, теги комментариев удаляют крошечное пространство между элементами, связанное с display: inline-block .
Если вы предпочитаете делать элементы списка блочными и смещать их влево, необходимо использовать хак clearfix , чтобы разобраться со смещением HTML nav .
Теперь поместите следующий код внутри тегов стиля в разделе head или в отдельном внешнем файле CSS :
/** * Макет */ .nav__list < margin: 0; padding: 0; >.nav__list a < padding: .75em 1.5em; transition: all .25s ease-in-out; >.nav__list__item < border-style: solid; border-width: 0 0 1px; >.nav__list__item, .nav__list__item a < display: block; >/** * Представление для стационарных устройств */ @media screen and (min-width: 1024px) < .nav__list >.nav__list__item < border-width: 0 1px 0 0; >.nav__list > .nav__list__item, .nav__list > .nav__list__item a < display: inline-block; >> /** * Внешний вид */ .nav < background-color: #f5f5f5; >.nav .nav__list__item < border-color: #e5e5e5; >.nav a < color: #555; text-decoration: none; >.nav a:hover, .nav a:active, .nav a:focus
Прежде чем перейти к объяснению приведенного выше кода, посмотрите наше меню навигации на основе nav class HTML в действии:
Пояснение
Я написал CSS , следуя mobile-first подходу к разработке адаптивного дизайна. Сначала мы обнуляем значения padding и margin для списка ссылок.
Затем задаем стиль и размер для гиперссылок. Я добавил некоторые дополнения к ссылкам, чтобы они выглядели прямоугольными.
Затем делаем элементы списка () и гиперссылки блочными элементами ( display: block ). Благодаря этому они будут отображаться свернутыми на планшетах и смартфонах.
Я также использую для ссылок переход, чтобы задать эффект медленного перехода цвета фона. Чтобы меню не отображалось свернутым на стационарных устройствах, я использовал медиа-запросы CSS3 , а также сделал элементы списка и гиперссылки на больших экранах элементами inline-block . Это заставит их располагаться горизонтально один за другим.
Затем для улучшения внешнего вида я добавил для элементов списка цвет границы. Установил значение свойства text-decoration — none , чтобы удалить подчеркивание гиперссылок по умолчанию.
Чтобы создать эффект наведения я задал для соответствующего состояния гиперссылок более темный цвет, чем цвет фона.
Это все! Вы можете поэкспериментировать с CSS-свойствами , чтобы сделать свое меню на основе HTML 5 nav более привлекательным.
#4 — Создание навигации по сайту
Для комфортного перехода по разделам сайта необходимо создать удобную навигацию. В ходе урока мы добавим секцию с навигацией на страницы сайта.
Видеоурок
Весь код будет доступен после подписки на проект!Онлайн редактор кода
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
CSS Панель навигации
Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.
С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
-
и
элементы имеет смысл:
пример
Теперь давайте уберем пули и поля и отступы из списка:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
>
- list-style-type: none; — Удаляет пули. Панель навигации не нужен список маркеров
- Установить margin: 0; и padding: 0; для удаления настроек браузера по умолчанию
Код в приведенном выше примере стандартный код используется в обоих вертикальных и горизонтальных панелей навигации.
Вертикальная панель навигации
Чтобы построить вертикальную панель навигации, вы можете стиль элементов внутри списка, в дополнение к указанному выше коду:
пример
li a <
display: block;
width: 60px;
>
- display: block; — Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите)
- width: 60px; — блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
>
li a display: block;
>
Вертикальная панель навигации Примеры
Создание базовой вертикальной панели навигации с серым цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
>
li a display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
>
/* Change the link color on hover */
li a:hover background-color: #555;
color: white;
>
Активный / Текущая навигация Ссылка
Добавить «активный» класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:
пример
.active <
background-color: #4CAF50;
color: white;
>
Центр Ссылки & Добавить границы
-
добавить рамку вокруг навигационной панели. Если вы также хотите границы внутри навигационной панели, добавить border-bottom для всех
элементов, за исключением последнего:
пример
li text-align: center;
border-bottom: 1px solid #555;
>
li:last-child border-bottom: none;
>
Полноразмерные Фиксировать вертикально Navbar
Создание полной высоты, «sticky» боковой навигации:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
>
Примечание: Этот пример может не работать должным образом на мобильных устройствах.
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающихэлементов списка.
Встроенные элементы списка
пример
li <
display: inline;
>
- display: inline; — По умолчанию
- элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающий элементов списка
пример
a display: block;
padding: 8px;
background-color: #dddddd;
>
- float: left; — использование с плавающей точкой , чтобы получить блок элементов , чтобы скользить рядом друг с другом
- display: block; — Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
- padding: 8px; — Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть
- background-color: #dddddd; — добавить серый цвет фона для каждого элемента
пример
ul <
background-color: #dddddd;
>
Горизонтальная панель навигации Примеры
Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
>
li a display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Change the link color to #111 (black) on hover */
li a:hover background-color: #111;
>
Активный / Текущая навигация Ссылка
Добавить «active» класс к текущей ссылке , чтобы пользователь мог знать , на какой странице он / она находится на:
пример
.active <
background-color: #4CAF50;
>
Щелкните правой кнопкой Align ссылки
Right выравнивать ссылки плавучим пункты списка вправо ( с float:right; ):
пример
Пограничные делители
пример
/* Add a gray right border to all list items, except the last item (last-child) */
li border-right: 1px solid #bbb;
>
li:last-child border-right: none;
>
Фиксированная панель навигации
Сделайте панель навигации во время пребывания в верхней или нижней части страницы, даже когда пользователь прокручивает страницу:
Фиксированный Вверх
ul <
position: fixed;
top: 0;
width: 100%;
>
Фиксированный Bottom
ul <
position: fixed;
bottom: 0;
width: 100%;
>
Примечание: Эти примеры могут не работать должным образом на мобильных устройствах.
Серый Горизонтальный Navbar
Пример серой горизонтальной панели навигации с тонкой серой границей:
пример
ul <
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
>
Еще примеры
Отзывчивый Topnav
Как использовать CSS3 медиа запросов для создания гибкой верхней панели навигации.
Отзывчивый Sidenav
Как использовать CSS3 медиа запросов для создания гибкой боковой навигации.
Выпадающее Navbar
Как добавить выпадающее меню в панели навигации.