Хорошо продуманная и функциональная панель навигации (navbar) — один из ключевых компонентов любого веб-сайта. Он служит для пользователей дорожной картой, помогая им перемещаться по различным страницам. Панель навигации обычно располагается в верхней части веб-страницы, где пользователи всегда видят ее для доступа к ключевым ссылкам. В этой статье мы рассмотрим, как создать визуально привлекательную и функциональную панель навигации CSS с использованием HTML и CSS. Мы также обсудим различные методы, позволяющие обеспечить, чтобы панель навигации оставалась вверху страницы.

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

В следующем фрагменте кода показано создание адаптивной панели навигации с логотипом, пунктами меню и кнопкой призыва к действию. Вот код HTML и CSS:

Разбираем код
Давайте подробнее рассмотрим, как создается панель навигации с использованием HTML и CSS.

HTML-структура

HTML-часть кода проста. Он состоит из элемента nav, который содержит три основных компонента:

• Логотип (изображение)
• Список **меню ** с кликабельными ссылками («Главная», «О нас», «Свяжитесь с нами», «Блог»)
• Кнопка **, служащая призывом к действию («Позвоните сейчас»)
• Структура заключена внутри элемента, который действует как контейнер для панели навигации.

Логотип создается с помощью тега . Меню представляет собой неупорядоченный список (

)

Стилизация с помощью CSS

Магия происходит в разделе CSS, где мы определяем макет и внешний вид панели навигации. Давайте обсудим некоторые ключевые элементы.

Фон и стиль тела
Тело имеет градиентный фон, который переходит от синего (#2258c3) к розовому (#fd2df3). Высота установлена ​​на 100vh (высота области просмотра), что гарантирует, что фон заполняет весь экран, и нет полей, чтобы избежать нежелательного пространства вокруг страницы.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Стиль навигации

Панель навигации имеет белый фон и закругленные углы (border-radius: 30px). Отступы и поля создают пространство внутри и снаружи панели навигации. Свойство display: flex превращает навигационную панель в flexbox, позволяя выравнивать ее дочерние элементы по горизонтали. justify-content: space-between обеспечивает равномерное расположение логотипа, меню и кнопки.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Исправление навигационной панели вверху

Одна из ключевых функций панели навигации — оставаться в верхней части страницы при прокрутке. Для этого мы используем позицию: фиксированное свойство. Это позволяет навигационной панели оставаться зафиксированной вверху (top: 0) независимо от прокрутки. Кроме того, z-index: 9999 гарантирует, что панель навигации всегда находится над другими элементами на странице.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Пункты меню и интерактивность

Пункты меню отображаются горизонтально с помощью display: flex в классе .menu. Элементам дается интервал через поля, и каждый элемент стилизован так, чтобы удалить стиль списка по умолчанию и отступы. Ссылки внутри пунктов меню не имеют текстового оформления и оформлены жирным шрифтом и темным цветом.

Эффект наведения на ссылки меняет цвет, чтобы он соответствовал синему цвету фона (#2258c3), обеспечивая визуальный сигнал о том, что ссылка является интерактивной.

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

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Стиль кнопки

Кнопка имеет синий фон (#2258c3), белый текст и закругленные углы (border-radius: 20px). При наведении курсора фон меняется на розовый (#fd2df3) в соответствии с градиентом фона.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Как держать навигационную панель всегда сверху

Чтобы зафиксировать заголовок в верхней части страницы с помощью CSS, вы используете свойство Position:fixed вместе со свойством top:0. Это гарантирует, что панель навигации останется вверху при прокрутке пользователем. Вот как это применяется в коде:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}