ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Панель навигации (навбар)


Демо: панель навигации

Вертикальный навбар

Горизонтальный навбар



Навигационные панели (навбары)

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

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


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

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

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

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

Пример

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</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;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
Попробуйте сами »

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

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

Пример

.active {
  background-color: #4CAF50;
  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;
}
Попробуйте сами »

Фиксированный вертикальный навбар на всю высоту

Создайте "sticky" ("липкий") боковой навбар на всю высоту страницы:

Пример

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  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; - используйте float, чтобы элементы блока скользили рядом друг с другом
  • display: block; - Отображение ссылок как элементов блока делает всю область ссылок кликабельной (не только текст), и это позволяет нам указать отступы (а также, если хотите, высоту, ширину, поля и т.д.)
  • padding: 8px; - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые отступы, чтобы они выглядели хорошо
  • background-color: #dddddd; - Добавление серого цвета фона для каждого элемента

Совет: добавьте background-color к <ul> вместо каждого элемента <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 {
  background-color: #4CAF50;
}
Попробуйте сами »

Ссылки выравниваются справа

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

Пример

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">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%;
}
Попробуйте сами »

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

Серый горизонтальный навбар

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

Пример

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}
Попробуйте сами »

Липкий навбар

Добавьте position: sticky; к <ul> чтобы создать "липкий" навбар.

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

Пример

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
Попробуйте сами »

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


Больше примеров

Адптивная верхняя панель навигации

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

Адптивная верхняя панель навигации
Попробуйте сами »

Адаптивная боковая панель навигации

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

Адаптивная боковая панель навигации
Попробуйте сами »

Выпадающий навбар

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

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

Больше примеров того, как создавать различные панели навигации вы можете узнать в разделе Как сделать? на нашем сайте.