День 14 | Верстаем шапку сайта

Структура header (шапки сайта)

Шапка сайта — это первое, что видит пользователь. Обычно она содержит логотип, навигационное меню и дополнительные элементы (кнопки, иконки). Сегодня мы научимся верстать красивую и функциональную шапку.

Что должно быть в header?

• Логотип сайта (обычно слева)
• Навигационное меню (ссылки на разделы сайта)
• Дополнительные элементы (кнопка "Связаться", иконка корзины, и т.д.)

HTML структура header

Создайте структуру в src/index.html:

<header class="header">
  <div class="container">
    <div class="header__content">
      <div class="header__logo">
        <a href="#">Logo</a>
      </div>
      
      <nav class="header__nav">
        <a href="#" class="nav-link active">Главная</a>
        <a href="#" class="nav-link">О нас</a>
        <a href="#" class="nav-link">Услуги</a>
        <a href="#" class="nav-link">Контакты</a>
      </nav>
      
      <button class="header__btn">Связаться</button>
    </div>
  </div>
</header>

Разберём структуру:

• <header> — семантический тег для шапки сайта
• <div class="container"> — контейнер для ограничения ширины контента (обычно 1200px)
• <div class="header__content"> — обёртка для содержимого header (используем BEM методологию)
• <nav> — семантический тег для навигации
• class="nav-link active" — класс для активной ссылки

Что такое BEM? BEM (Block Element Modifier) — это методология именования классов. Формат: block__element--modifier:

• header — блок
• header__logo — элемент блока header
• nav-link--active — модификатор (можно было бы так назвать активную ссылку)

BEM делает код более понятным и помогает избежать конфликтов стилей.

Flexbox для выравнивания

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

Разберём CSS подробно:

1. .header

.header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

• background: #fff — белый фон
• box-shadow — тень под header для визуального отделения от контента
  • 0 2px 10px — смещение по X, смещение по Y, размытие
  • rgba(0, 0, 0, 0.1) — чёрный цвет с прозрачностью 10%
• position: sticky — "липкое" позиционирование. Header остаётся видимым при скролле
• top: 0 — прилипает к верху экрана
• z-index: 100 — поднимает header поверх другого контента (чтобы тень была видна)

2. .container

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

• max-width: 1200px — максимальная ширина контента (на больших экранах контент не растягивается)
• margin: 0 auto — центрирует контейнер (auto для left и right центрирует блок)
• padding: 0 20px — отступы слева и справа (чтобы контент не прилипал к краям на мобильных)

3. .header__content (Flexbox)

.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

• display: flex — делает элемент flex-контейнером
• justify-content: space-between — распределяет элементы по главной оси:
  • Логотип прижимается к левому краю
  • Кнопка прижимается к правому краю
  • Меню находится между ними
• align-items: center — выравнивает элементы по поперечной оси (вертикально по центру)
• padding: 20px 0 — отступы сверху и снизу

4. Навигация

.header__nav {
  display: flex;
  gap: 30px;
}

• display: flex — меню тоже flex-контейнер (ссылки в ряд)
• gap: 30px — отступы между ссылками (современная альтернатива margin)

5. Ссылки навигации

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
}

• text-decoration: none — убирает подчёркивание у ссылок
• transition: color 0.3s — плавный переход цвета за 0.3 секунды
• position: relative — нужно для позиционирования псевдоэлемента ::after

Псевдоэлементы для подчеркивания

Псевдоэлемент ::after позволяет добавить визуальный элемент после содержимого. Используем его для подчёркивания активной ссылки:

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 2px;
  background: #F36049;
}

Разберём подробно:

• ::after — псевдоэлемент, который создаётся после содержимого элемента
• content: "" — обязательно! Без content псевдоэлемент не появится. Пустая строка создаёт пустой элемент
• position: absolute — абсолютное позиционирование относительно родителя (который имеет position: relative)
• bottom: -5px — на 5px ниже ссылки
• left: 0; right: 0 — растягивает элемент на всю ширину ссылки
• height: 2px — высота линии
• background: #F36049 — цвет линии

Hover эффекты

Hover эффекты делают интерфейс интерактивным. При наведении курсора элемент реагирует:

.nav-link:hover {
  color: #F36049;
}

.header__btn:hover {
  background: #e04d38;
}

Что такое :hover? Это псевдокласс, который применяется, когда пользователь наводит курсор на элемент. transition делает изменение плавным.

Практическое задание

1. Создайте HTML структуру header в index.html
2. Используйте семантические теги (<header>, <nav>)
3. Примените BEM методологию для классов
4. Используйте Flexbox для выравнивания элементов
5. Стилизуйте логотип и меню
6. Добавьте активное состояние для ссылок (класс .active)
7. Создайте подчёркивание для активной ссылки через ::after
8. Добавьте hover эффекты для ссылок и кнопки
9. Сделайте header sticky (липким при скролле)
10. Используйте переменные из _variables.scss вместо хардкода цветов

Что дальше?

Отлично! Шапка готова. В следующем уроке мы начнём верстать главный баннер (hero-секцию) — это самая заметная часть страницы, которая привлекает внимание пользователя.