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

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

Есть два способа создания горизонтальной навигационной панели: использоватьInlineилиФлоатЭлементы списка.

Inline список элементов

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

Пример

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

Пример

.active {
  background-color: #4CAF50;
}

Попробуйте это на практике

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

Справа выровнять ссылки, плавая элементами списка вправо (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>, чтобы создать разделитель ссылок:

Пример

/* Добавить серую правую рамку для всех элементов списка, кроме последнего (last-child) */
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;
}

Попробуйте это на практике

сцепная навигация

добавить к <ul> position: sticky;для создания сцепной навигации.

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

Пример

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

Попробуйте это на практике

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

Более сложные примеры

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