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

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

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

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

Для создания панели навигации в качестве базы нужен стандартный код HTML.

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

Так как в основе панели навигации должен лежать список ссылок, то элементы <ul> и <li> идеально подходят для этих целей:

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

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

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

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

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

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

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

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

li a {
  display: block;
  width: 60px;
}

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

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

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

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

/* Изменяем цвет ссылки при наведении курсора */
li a:hover {
  background-color: #555;
  color: white;
}

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

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

.active {
  background-color: #04AA6D;
  color: white;
}

Центрирование ссылок и добавление рамок

Добавьте 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; /* Разрешаем вывод полосы прокрутки, если в панели будет много контента */
}

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

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

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

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

li {
  display: inline;
}

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

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

Обтекание элементов списка

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

li {
  float: left;
}

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

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

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

ul {
  background-color: #dddddd;
}

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

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

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" для текущей ссылки, чтобы пользователь знал на какой странице он находится:

.active {
  background-color: #04AA6D;
  color: white;
}

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

Можно выровнять ссылки по правому краю. Для этого задайте обтекание справа для элементов списка (float: right;):

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

Вертикальный разделитель ссылок

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

/* Добавляем серую рамку справа от всех элементов списка */
li {
  border-right: 1px solid #bbb;
}

/* за исключением последнего (last-child) */
li:last-child {
  border-right: none;
}

Зафиксированная панель навигации

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

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

или внизу страницы:

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

Прилипающая панель навигации

Чтобы сделать прилипающую панель навигации, добавьте свойство position: sticky; для элемента <ul>.

Прилипающий элемент переключается между значениями position: relative и position: fixed, в зависимости от его положения при прокрутке страницы. Пока элемент находится в видимой области просмотра, он ведет себя как со значением position: relative. Когда его положение достигает края области просмотра, он "прилипает" на месте (как при position: fixed).

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}