Навигация html: HTML5 | Создание панели навигации

15.06.2018 alexxlab

Содержание

HTML5 | Создание панели навигации

Создание панели навигации

Последнее обновление: 27.04.2016

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

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

Вертикальное меню

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			ul.nav a {
				display: block;
				width: 7em;
				padding:10px;
				background-color: #f4f4f4;
				border-top: 1px dashed #333;
				border-right: 1px dashed #333;
				border-left: 5px solid #333;
				text-decoration: none;
				color: #333;
			}
			ul.nav li:last-child a {
				border-bottom: 1px dashed #333;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

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

display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который заключена ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				float: left;
			}
			ul.nav a {
				display: block;
				width: 5em;
				padding:10px;
				margin: 0 5px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				display: inline; 
			}
			ul.nav a {
				display: inline-block;
				width: 5em;
				padding:10px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	6.0+	10.6+	5.0+	4.0+	2.1+	3.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

<nav>ссылки</nav>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h2>Чебурашка и крокодил Гена</h2>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h3>Добро пожаловать!</h3>
  </article>
 </body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Навигация по сайту

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

Как сделать вертикальное меню:

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

<h4>Header</h4>

</header>

<main>

<nav>

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

<div>

<h2>Content</h2>

</div>

</main>

Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

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

Теперь добавим в тег <nav> список <ul>, что бы сделать меню.

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

header {

border: black 2px solid;

}

main nav {

display: inline-block;

width: 200px;

border: black 2px solid;

margin-right: 10px;

padding: 10px 20px;

float: left;

}

main nav ul {

padding: 0;

}

main nav ul li {

list-style-type: none;

}

main .content {

display: inline-block;

width: 500px;

border: black 2px solid;

float: left;

}

Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.

Примечание:

В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

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

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

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

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

Как сделать навигационное меню — учебник CSS

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.

Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:


<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Изначально, без стилей наша навигация выглядит, как обычный список:

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

margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:


.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Сброс стилей маркированного списка для навигации

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

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

Вертикальное меню

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

Блочные ссылки

Прежде всего нужно сделать все теги <a> блочными элементами:


.menu a { display: block; }

Существует несколько причин для этого:

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

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

Ширина меню

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


.menu { width: 300px; }

Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.

Разделение пунктов

Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:


.menu a {
    border-top: 1px solid blue;
}
.menu {
    border-bottom: 1px solid blue;
}

Высота пунктов и вертикальное выравнивание

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


.menu a {
  height: 30px;
  line-height: 30px;
}

GIF

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

Горизонтальное меню

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

Способ первый

Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:


.menu li {
  display: inline;
}

При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:


.menu a {
  text-decoration: none;
  font-family: sans-serif;
  color: #5757a0;
  display: inline-block;
  padding: 10px 20px;
  background-color: lavender;
  border-bottom: 5px solid #5757a0;
}

Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:


<ul>
 <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li>
 ...
</ul>

Способ убрать промежуток между строчными пунктами списка

Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:


.menu li {
  margin-right: -5px;
}

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

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

Способ второй

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


.menu li {
  float: left;
}

Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, <h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:


.menu {
  overflow: hidden;
}

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

GIF

Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

СSS Панель навигации

Демонстрация: панелей навигации

Горизонтальная

Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели

Панель авигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации — это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:

Пример

<ul>
<li><a href=»index.php»>Главная</a></li>
<li><a href=»news.php»>Новости</a></li>
<li><a href=»contact.php»>Контакты</a></li>
<li><a href=»about.php»>О Нас</a></li>
</ul>

Редактор кода »

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример объяснение:

list-style-type: none; — Убирает маркеры. В панели навигации не нужны маркеры для списка
Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

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

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a> в списке, к дополнению коду выше:

Объяснение примера:

display: block; — Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
width: 60px; — Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}

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 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Центральные ссылки и добавить границы

Добавить выравнивание text-align:center в <li> или <a>ссылки по центру.

Добавить свойство border в <ul>. Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели, нужно добавить border-bottom во все элементы <li>, за исключением последнего:

Пример

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Редактор кода »

Фиксированная вертикальная навигация

Создать в полную в высоту, «фиксированную» боковую панель навигации:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Полная высота */
    position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
    overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}

Редактор кода »

Примечание: Этот пример может работать неправильно на мобильных устройствах.

Горизонтальная панель навигации

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

Встроенные элементы списка

Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в «стандартные» в коде выше:

Объяснение примера:

display: inline; — По умолчанию, элементы <li> — это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

Плавающие элементы списка

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

Пример

li {
    float: left;
}
a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Редактор кода »

Объяснение примера:

float: left; — Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
display: block; — Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
padding: 8px; — Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
background-color: #dddddd; — Добавить серый фон цвета к каждому элементу

Совет: Добавить background-color: #dddddd; в <ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:

Примеры горизонтальной панели навигации

Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
background-color: #111;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Выравнивание списка по правому краю

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:

Пример

<ul>
<li><a href=»#home»>Главная</a></li>
<li><a href=»#news»>Новости</a></li>
<li><a href=»#contact»>Контакты</a></li>
<li><a class=»active» href=»#about»>О Нас</a></li>
</ul>

Редактор кода »

Разделители границ списка

Добавить свойство border-right в <li> для создания разделителей ссылок:

Пример

/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Редактор кода »

Фиксированные горизонтальные панели навигации

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Фиксированная навигация сверху

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Редактор кода »

Фиксированная навигация снизу

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Редактор кода »

Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.

Серая горизонтальная панель навигации

Пример серой горизонтальной панели навигации, с тонкой серой границей:

Липкая панель навигации

Использовать position: sticky; в <li>, чтобы создать липкую навигацию.

Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране — тогда он «прилипает» на месте (например, position:fixed).

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для липкое позиционирование работы.

Еще примеры

Отзывчивая верхняя навигация

Как использовать медиа запросы CSS для создания адаптивной верхней навигации.

Редактор кода »

Отзывчивая боковая навигация

Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.

Редактор кода »

Выпадающий список навигации

Как добавить выпадающее меню в панели навигации.

Редактор кода »

Элемент секции навигации — Веб-технологии для разработчиков

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Атрибуты

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

Примечание

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

Примеры

В данном примере, блок <nav> содержит ненумерованный список (<ul>) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.

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

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

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

Таблица совместимости на этой странице создается структурированно. Если вы желаете внести свой вклад в эти данные, пожалуйста, проверьте https://github.com/mdn/browser-compat-data и отправьте нам pull request Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`nav`	Chrome Полная поддержка 5	Edge Полная поддержка 12	Firefox Полная поддержка 4	IE Полная поддержка 9	Opera Полная поддержка 11.1	Safari Полная поддержка 5	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 11.1	Safari iOS Полная поддержка 4.2	Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка: Полная поддержка

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

Другие секционные элементы: <body>, <article>, <section>, <aside>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hgroup>, <header>, <footer>, <address>;
Использование разделов и создание структуры HTML документа.

Создаем фиксированное навигационное меню | HTML/xHTML

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

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

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

В этой статье я покажу вам простой CSS-прием для внедрения в сайт горизонтального «липкого» навигационного меню.

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

Ниже я привожу несколько ссылок.

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

Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:

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

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

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

Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом (поиск, авторизация, перемещение по структуре). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса:

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

Ниже демонстрационный пример того, как это выглядит на практике:

ПРОСМОТРЕТЬ ДЕМО
СКАЧАТЬ ИСХОДНИКИ С GITHUB

Перейти к GitHub Repository

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

<nav>   <!-- Содержимое навигационной панели --> </nav>

Элемент nav отлично подходит в данном случае. Он предоставляет сторонним сервисам (таким, как например роботы поисковых систем) возможность без проблем понимать информационную структуру вашего сайта. Элемент nav по умолчанию является блочным, так что не нужно писать лишнюю строчку CSS-кода.

Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div. Также можно использовать inline-элемент, такой как span, но прописать ему в CSS-коде свойство display: block.

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

.fixed-nav-bar {   position: fixed;   top: 0;   left: 0;   z-index: 9999;   width: 100%;   height: 50px;   background-color: #00a087; }

Ранее, мы присвоили нашему HTML-элементу класс fixed-nav-bar, поэтому сейчас просто применим к данному селектору нужные стили.

Значения трех последних свойств (width, height и background-color) меняйте на подходящие для вашего сайта.

Давайте теперь рассмотрим подробнее эти четыре волшебных CSS-свойства, ответственных за магию:

Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:

top: 0; left: 0; right: 0;

Устанавливая свойства top, left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.

Подсказка: если нужно разместить панель в «подвале» области просмотра то, нужно просто заменить top: 0 на bottom: 0:

Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML-разметки поверх фиксированной панели навигации (если конечно не появится элемента со значением z-index больше, чем 9999).

На этом, пожалуй, все.

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

Исследуйте исходный код, если вам станет интересно, как работает эта часть (если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться).

Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML-разметки и всего несколько CSS-свойств, которые мы с вами рассмотрели.

Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS, и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav (который относится к HTML5) на div.

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

Данная публикация представляет собой перевод статьи «How to Create a Fixed Navigation Bar» , подготовленной дружной командой проекта Интернет-технологии.ру

W3.CSS Navigation

W3.CSS Классы панели навигации

W3.CSS предоставляет следующие классы для панелей навигации:

класс	определяет
w3-bar	Горизонтальный контейнер для элементов HTML
w3-bar-block	Вертикальный контейнер для элементов HTML
w3-bar-item	Контейнерные стержневые элементы
w3-sidebar	Вертикальная боковая панель для элементов HTML
w3-mobile	Делает любой элемент бара мобильным первым отзывчивым
w3-dropdown-hover	Hoverable выпадающий элемент
w3-click-drop	Кликабельный выпадающий элемент (вместо зависания)

Базовая навигация

Класс w3-bar — это контейнер для горизонтального отображения HTML-элементов.

Класс w3-bar-item определяет элементы контейнера.

Это идеальный инструмент для создания панелей навигации:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Адаптивная навигация

Класс w3-mobile делает любые элементы бара отзывчивыми (горизонтальный на больших экранах и вертикальный на маленьких).

Средние и большие экраны:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Цветные навигационные панели

Используйте w3-color класс, чтобы добавить цвет к навигации бар:

Пример

Попробуй сам »

Граничные навигационные панели

Используйте класс w3-border или w3-card , чтобы добавить границы вокруг панели навигации или отобразить его в виде карты:

Пример

Попробуй сам »

Активная / Текущая ссылка

Добавьте ссылку w3-color к ссылке, чтобы выделить ее:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Hoverable Links

При наведении курсора на кнопку цвет фона изменится на серый.

Если вам нужен другой цвет фона при наведении, используйте любой из w3-hover- цвет классов:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Если вы хотите изменить цвет текста, отключите эффект наведения по умолчанию с помощью w3-hover-none класс и добавьте w3-hover-text класс.

Пример

По умолчанию
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Потратьте некоторое время, чтобы поиграть с различными эффектами наведения:

Пример

Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

ссылки с выравниванием по правому краю

Используйте w3-right class для элемента списка, чтобы выровнять по праву определенную ссылку:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

Размер навигационной панели

Используйте w3-size класс для изменения размера шрифта ссылок внутри панели навигации:

Пример

Попробуй сам »

Используйте класс w3-padding , чтобы изменить отступ каждой ссылки внутри панели навигации:

Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

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

Настройте ширину ссылок с помощью свойства CSS width

( Примечание : используйте w3-mobile для преобразования ссылок до 100% ширины на маленьких экранах):

Пример

Домой
Ссылка 1
Ссылка 2

Попробуй сам »

Панель навигации с иконками

Пример

Попробуй сам »
Классы fa fa в приведенном выше примере отображают значки Font Awesome.
Подробнее о том, как отображать значки, см. В главе W3.CSS Icons.
Текст навигационной панели
Если вы хотите, чтобы текст вместо кнопок внутри панели навигации, используйте класс w3-bar-item , чтобы получить те же отступы, что и для кнопок.
Пример

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3
Текст

Попробуй сам »
Navbar с входами и кнопками
Пример

Главная страница
Ссылка 1
Ссылка 2

Go

Попробуй сам »
Панель навигации с раскрывающимся списком
Наведите указатель мыши на ссылку «Раскрывающийся список»:
Пример

Домой
Ссылка 1