Создание адаптивной навигационной панели: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в создании адаптивной навигационной панели. Навигация — ключевой элемент любого сайта, и важно, чтобы она корректно отображалась и была удобна в использовании на устройствах с разной шириной экрана. Вы начнете с основ адаптивности с использованием медиа-запросов, затем перейдете к использованию Flexbox для выравнивания элементов, реализуете механизм "гамбургера" для мобильных меню с помощью CSS и стилизуете его для лучшего пользовательского опыта. Задания построены от простого к сложному, чтобы вы могли постепенно закрепить навыки создания отзывчивых интерфейсов.

Список тем

Основы адаптивности: Скрытие элементов на малых экранах

Начнем с основ адаптивности. У нас есть простая навигационная панель. Ваша задача — скрыть основной список ссылок навигации на экранах шириной 372px или меньше, используя медиа-запрос. Вместо списка должен остаться только текст 'Меню'.

CSS

/* Базовые стили */
.navbar {
  background-color: #333;
  padding: 10px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: inline-block; /* Отображаем элементы списка в строку */
  margin-right: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

.mobile-menu-placeholder {
  color: white;
  display: none; /* Скрыт по умолчанию */
}

/* Медиа-запрос для малых экранов */
input1 (max-width: 372px) {
  .nav-list {
    input2: none; /* Скрываем основной список */
  }
  .mobile-menu-placeholder {
    display: block; /* Показываем текст 'Меню' */
  }
}

                     /* Базовые стили */
.navbar {
  background-color: #333;
  padding: 10px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: inline-block; /* Отображаем элементы списка в строку */
  margin-right: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

.mobile-menu-placeholder {
  color: white;
  display: none; /* Скрыт по умолчанию */
}

/* Медиа-запрос для малых экранов */
input1 (max-width: 372px) {
  .nav-list {
    input2: none; /* Скрываем основной список */
  }
  .mobile-menu-placeholder {
    display: block; /* Показываем текст 'Меню' */
  }
}

HTML

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Главная</a></li>
    <li class="nav-item"><a href="#">О нас</a></li>
    <li class="nav-item"><a href="#">Услуги</a></li>
    <li class="nav-item"><a href="#">Контакты</a></li>
  </ul>
  <div class="mobile-menu-placeholder">Меню</div>
</nav>

Используйте медиа-запрос `@media` с условием `max-width: 372px`. Внутри медиа-запроса выберите класс списка навигации (`.nav-list`) и примените к нему свойство, которое полностью скроет элемент.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование Flexbox для горизонтального меню

Теперь сделаем навигацию более гибкой. Используйте Flexbox, чтобы расположить элементы списка (`.nav-item`) горизонтально внутри контейнера `.nav-list`. Элементы должны быть выровнены по центру вертикально.

CSS

/* Базовые стили */
.navbar {
  background-color: #444;
  padding: 10px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  input1: flex; /* Включаем Flexbox */
  input2: center; /* Выравниваем элементы по вертикали */
}

.nav-item {
  margin-right: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

/* Стили для малых экранов (из предыдущего задания) */
@media (max-width: 372px) {
  .nav-list {
    display: none;
  }
}

                     /* Базовые стили */
.navbar {
  background-color: #444;
  padding: 10px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  input1: flex; /* Включаем Flexbox */
  input2: center; /* Выравниваем элементы по вертикали */
}

.nav-item {
  margin-right: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

/* Стили для малых экранов (из предыдущего задания) */
@media (max-width: 372px) {
  .nav-list {
    display: none;
  }
}

HTML

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Главная</a></li>
    <li class="nav-item"><a href="#">О нас</a></li>
    <li class="nav-item"><a href="#">Услуги</a></li>
    <li class="nav-item"><a href="#">Контакты</a></li>
  </ul>
  <!-- На малых экранах этот список будет скрыт -->
</nav>

Примените свойство `display` со значением `flex` к контейнеру `.nav-list`. Для горизонтального расположения (что является поведением по умолчанию для `flex-direction: row`) ничего дополнительно делать не нужно. Для вертикального выравнивания по центру используйте свойство `align-items`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Подготовка к "Гамбургеру": Скрытие чекбокса и стилизация метки

Для создания интерактивного мобильного меню без JavaScript часто используют "checkbox hack". Мы добавили скрытый чекбокс и метку (`label`), которая будет служить кнопкой "гамбургера". Ваша задача: скрыть сам чекбокс и стилизовать метку (`.menu-toggle-label`), чтобы она была видна только на малых экранах (шириной 372px или меньше). Также скройте основной список навигации (`.nav-list`) на малых экранах.

CSS

/* Базовые стили */
.navbar {
  background-color: #555;
  padding: 10px;
  display: flex; /* Используем Flexbox для шапки */
  justify-content: space-between; /* Разносим лого/название и меню */
  align-items: center;
}

.logo {
  color: white;
  font-weight: bold;
}

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

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

/* Скрытие чекбокса */
input1 {
  display: none;
}

/* Стилизация и скрытие/отображение метки (гамбургера) */
.menu-toggle-label {
  color: white;
  font-size: 24px; /* Размер иконки/текста */
  cursor: pointer;
  input2: none; /* Скрываем метку по умолчанию */
}

/* Адаптивность */
@media (max-width: 372px) {
  .nav-list {
    input3: none; /* Скрываем список на малых экранах */
  }
  .menu-toggle-label {
    input4: block; /* Показываем метку на малых экранах */
  }
}

                     /* Базовые стили */
.navbar {
  background-color: #555;
  padding: 10px;
  display: flex; /* Используем Flexbox для шапки */
  justify-content: space-between; /* Разносим лого/название и меню */
  align-items: center;
}

.logo {
  color: white;
  font-weight: bold;
}

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

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

/* Скрытие чекбокса */
input1 {
  display: none;
}

/* Стилизация и скрытие/отображение метки (гамбургера) */
.menu-toggle-label {
  color: white;
  font-size: 24px; /* Размер иконки/текста */
  cursor: pointer;
  input2: none; /* Скрываем метку по умолчанию */
}

/* Адаптивность */
@media (max-width: 372px) {
  .nav-list {
    input3: none; /* Скрываем список на малых экранах */
  }
  .menu-toggle-label {
    input4: block; /* Показываем метку на малых экранах */
  }
}

HTML

<nav class="navbar">
  <div class="logo">MyApp</div>
  
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-toggle-label">☰</label>
  
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Главная</a></li>
    <li class="nav-item"><a href="#">О нас</a></li>
    <li class="nav-item"><a href="#">Услуги</a></li>
  </ul>
</nav>

Чтобы скрыть чекбокс (`#menu-toggle`), используйте `display: none;`. Метку (`.menu-toggle-label`) по умолчанию скройте (`display: none;`), а внутри медиа-запроса `@media (max-width: 372px)` сделайте её видимой (например, `display: block;` или `display: inline-block;`). Не забудьте также скрыть `.nav-list` внутри этого же медиа-запроса.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Активация мобильного меню по клику (Checkbox Hack)

Продолжаем реализацию "checkbox hack". Теперь нужно сделать так, чтобы при клике на метку (когда соответствующий чекбокс `#menu-toggle` становится отмеченным), скрытый список навигации (`.nav-list`) появлялся на малых экранах. Список должен располагаться под шапкой.

CSS

/* Базовые стили (как в предыдущем задании) */
.navbar {
  background-color: #555;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* Для позиционирования выпадающего меню */
}

.logo {
  color: white;
  font-weight: bold;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* По умолчанию для больших экранов */
}

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

#menu-toggle {
  display: none;
}

.menu-toggle-label {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none; /* Скрыто по умолчанию */
}

/* Адаптивность */
@media (max-width: 372px) {
  .menu-toggle-label {
    display: block; /* Показываем гамбургер */
  }

  .nav-list {
    display: none; /* Скрываем меню по умолчанию на мобильных */
    position: absolute;
    top: 100%; /* Располагаем под шапкой */
    left: 0;
    width: 100%;
    background-color: #333;
    flex-direction: column; /* Элементы списка друг под другом */
    padding: 10px 0;
  }

  .nav-item {
    margin: 5px 15px; /* Отступы для мобильного меню */
    text-align: center;
  }

  /* Правило для отображения меню при отмеченном чекбоксе */
  input1:checked input2 .nav-list {
    input3: flex; /* Показываем список и используем flex для column */
  }
}

                     /* Базовые стили (как в предыдущем задании) */
.navbar {
  background-color: #555;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* Для позиционирования выпадающего меню */
}

.logo {
  color: white;
  font-weight: bold;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* По умолчанию для больших экранов */
}

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

#menu-toggle {
  display: none;
}

.menu-toggle-label {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none; /* Скрыто по умолчанию */
}

/* Адаптивность */
@media (max-width: 372px) {
  .menu-toggle-label {
    display: block; /* Показываем гамбургер */
  }

  .nav-list {
    display: none; /* Скрываем меню по умолчанию на мобильных */
    position: absolute;
    top: 100%; /* Располагаем под шапкой */
    left: 0;
    width: 100%;
    background-color: #333;
    flex-direction: column; /* Элементы списка друг под другом */
    padding: 10px 0;
  }

  .nav-item {
    margin: 5px 15px; /* Отступы для мобильного меню */
    text-align: center;
  }

  /* Правило для отображения меню при отмеченном чекбоксе */
  input1:checked input2 .nav-list {
    input3: flex; /* Показываем список и используем flex для column */
  }
}

HTML

<nav class="navbar">
  <div class="logo">MyApp</div>
  
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-toggle-label">☰</label>
  
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Главная</a></li>
    <li class="nav-item"><a href="#">О нас</a></li>
    <li class="nav-item"><a href="#">Услуги</a></li>
  </ul>
</nav>

Используйте псевдокласс `:checked` для чекбокса (`#menu-toggle`) и соседний селектор (`~`) или селектор дочернего элемента (если структура HTML другая), чтобы выбрать `.nav-list`. Внутри медиа-запроса `@media (max-width: 372px)` добавьте правило, которое будет применять `display: block;` (или `display: flex;` если нужно управлять элементами внутри) к `.nav-list`, когда чекбокс отмечен.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление логотипа и выравнивание

Давайте добавим логотип в нашу навигационную панель и убедимся, что он и меню правильно выровнены как на больших, так и на малых экранах. Используйте Flexbox для выравнивания логотипа и кнопки гамбургера (на малых экранах) или списка навигации (на больших экранах). Логотип должен быть слева, а меню/гамбургер — справа.

CSS

/* Базовые стили */
.navbar {
  background-color: #666;
  padding: 10px 15px;
  input1: flex; /* Включаем Flexbox для .navbar */
  input2: space-between; /* Разносим дочерние элементы по краям */
  input3: center; /* Выравниваем по вертикали */
  position: relative;
}

.logo img {
  height: 30px; /* Фиксированная высота логотипа */
  display: block; /* Убирает лишний отступ под картинкой */
}

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

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

#menu-toggle {
  display: none;
}

.menu-toggle-label {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

/* Адаптивность */
@media (max-width: 372px) {
  .menu-toggle-label {
    display: block;
  }
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #444;
    flex-direction: column;
    padding: 10px 0;
  }
  .nav-item {
    margin: 5px 15px;
    text-align: center;
  }
  #menu-toggle:checked ~ .nav-list {
    display: flex;
  }
}

                     /* Базовые стили */
.navbar {
  background-color: #666;
  padding: 10px 15px;
  input1: flex; /* Включаем Flexbox для .navbar */
  input2: space-between; /* Разносим дочерние элементы по краям */
  input3: center; /* Выравниваем по вертикали */
  position: relative;
}

.logo img {
  height: 30px; /* Фиксированная высота логотипа */
  display: block; /* Убирает лишний отступ под картинкой */
}

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

.nav-item {
  margin-left: 15px;
}

.nav-item a {
  color: white;
  text-decoration: none;
}

#menu-toggle {
  display: none;
}

.menu-toggle-label {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

/* Адаптивность */
@media (max-width: 372px) {
  .menu-toggle-label {
    display: block;
  }
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #444;
    flex-direction: column;
    padding: 10px 0;
  }
  .nav-item {
    margin: 5px 15px;
    text-align: center;
  }
  #menu-toggle:checked ~ .nav-list {
    display: flex;
  }
}

HTML

<nav class="navbar">
  <div class="logo">
    <a href="#">
      <img src="https://naytikurs.ru/img/1.png" alt="Логотип">
    </a>
  </div>
  
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-toggle-label">☰</label>
  
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Главная</a></li>
    <li class="nav-item"><a href="#">О нас</a></li>
    <li class="nav-item"><a href="#">Услуги</a></li>
  </ul>
</nav>

Убедитесь, что у родительского контейнера `.navbar` установлено `display: flex;`. Используйте свойство `justify-content` со значением `space-between`, чтобы разнести логотип и меню по краям. Свойство `align-items` со значением `center` поможет выровнять их по вертикали.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку