Создание адаптивной навигационной панели [Модуль 13: Практические проекты]: Тренажер CSS

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

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

Список тем

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

id: 37525_css-adaptive-nav-1

Начнем с основ адаптивности. У нас есть простая навигационная панель. Ваша задача — скрыть основной список ссылок навигации на экранах шириной 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 для горизонтального меню

id: 37525_css-adaptive-nav-2

Теперь сделаем навигацию более гибкой. Используйте 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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37525_css-adaptive-nav-3

Для создания интерактивного мобильного меню без 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)

id: 37525_css-adaptive-nav-4

Продолжаем реализацию "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`, когда чекбокс отмечен.

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

Результат

Сообщения

Выполнить

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

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

id: 37525_css-adaptive-nav-5

Давайте добавим логотип в нашу навигационную панель и убедимся, что он и меню правильно выровнены как на больших, так и на малых экранах. Используйте 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` поможет выровнять их по вертикали.

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

Результат

Сообщения

Выполнить

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