Адаптивная навигация: Тренажер CSS

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

В этом блоке заданий мы сосредоточимся на создании адаптивных навигационных меню с использованием CSS. Вы будете практиковаться в применении медиа-запросов (@media) для изменения стилей и макета навигации в зависимости от размера экрана устройства. Задания охватывают скрытие/отображение элементов, изменение направления отображения (с горизонтального на вертикальное) и подготовку структуры для классического 'гамбургер' меню, часто используемого на мобильных устройствах. Все задания предполагают работу с уже готовой HTML-структурой и частичным CSS-кодом, где вам нужно будет заполнить пропущенные части.

Список тем

Скрытие навигации на маленьких экранах

Ваша задача — использовать медиа-запрос, чтобы полностью скрыть навигационное меню на экранах с максимальной шириной 600px. Это первый шаг к созданию адаптивного меню, которое будет заменено, например, кнопкой 'гамбургер' на мобильных устройствах.

CSS

.main-nav {
  background-color: #eee;
  padding: 10px;
}

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

.main-nav li {
  display: inline-block;
  margin-right: 15px;
}

.main-nav a {
  text-decoration: none;
  color: #333;
}

/* --- Начало вашего кода --- */
input1 (input2: 600px) {
  .main-nav {
    input3: none;
  }
}
/* --- Конец вашего кода --- */

                     .main-nav {
  background-color: #eee;
  padding: 10px;
}

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

.main-nav li {
  display: inline-block;
  margin-right: 15px;
}

.main-nav a {
  text-decoration: none;
  color: #333;
}

/* --- Начало вашего кода --- */
input1 (input2: 600px) {
  .main-nav {
    input3: none;
  }
}
/* --- Конец вашего кода --- */

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
<p>Контент страницы...</p>

Используйте правило `@media` с условием `max-width: 600px`. Внутри этого правила выберите селектор для основного контейнера навигации (`.main-nav`) и установите для него свойство `display` со значением `none`, чтобы скрыть его на экранах указанной ширины или меньше.

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

Результат

Сообщения

Выполнить

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

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

Вертикальное меню на мобильных

Теперь сделаем так, чтобы на маленьких экранах (до 600px) пункты меню отображались не в строку, а столбиком, один под другим. Это улучшит читаемость и удобство использования на узких экранах.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
}

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

.main-nav li {
  /* По умолчанию элементы в строку */
  display: inline-block;
  margin-right: 15px;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  display: block; /* Чтобы ссылка занимала всю ширину li */
  padding: 5px 0;
}

@media (max-width: 600px) {
  .main-nav li {
    /* --- Начало вашего кода --- */
    input1: input2;
    margin-right: 0; /* Убираем правый отступ */
    margin-bottom: 5px; /* Добавляем нижний отступ */
    /* --- Конец вашего кода --- */
  }
}

                     .main-nav {
  background-color: #f0f0f0;
  padding: 10px;
}

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

.main-nav li {
  /* По умолчанию элементы в строку */
  display: inline-block;
  margin-right: 15px;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  display: block; /* Чтобы ссылка занимала всю ширину li */
  padding: 5px 0;
}

@media (max-width: 600px) {
  .main-nav li {
    /* --- Начало вашего кода --- */
    input1: input2;
    margin-right: 0; /* Убираем правый отступ */
    margin-bottom: 5px; /* Добавляем нижний отступ */
    /* --- Конец вашего кода --- */
  }
}

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
<p>Контент страницы...</p>

Внутри медиа-запроса `@media (max-width: 600px)` найдите селектор для элементов списка (`.main-nav li`). Измените их свойство `display` на `block`. Также можно добавить небольшой отступ снизу (`margin-bottom`) для лучшего разделения пунктов.

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

Результат

Сообщения

Выполнить

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

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

Переключение макета Flexbox

Используем Flexbox для управления макетом навигации. По умолчанию пункты меню расположены в строку. На маленьких экранах (до 500px) измените направление основной оси Flexbox так, чтобы пункты выстроились в столбец.

CSS

.flex-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #e0e0e0;
  padding: 10px;
  /* --- Используем Flexbox --- */
  input1: flex;
}

.flex-nav li {
  margin: 0 10px;
}

.flex-nav a {
  text-decoration: none;
  color: #111;
}

@media (max-width: 500px) {
  .flex-nav ul {
    /* --- Начало вашего кода --- */
    input2: input3;
    /* --- Конец вашего кода --- */
  }

  .flex-nav li {
    margin: 5px 0; /* Добавим вертикальные отступы */
  }
}

                     .flex-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #e0e0e0;
  padding: 10px;
  /* --- Используем Flexbox --- */
  input1: flex;
}

.flex-nav li {
  margin: 0 10px;
}

.flex-nav a {
  text-decoration: none;
  color: #111;
}

@media (max-width: 500px) {
  .flex-nav ul {
    /* --- Начало вашего кода --- */
    input2: input3;
    /* --- Конец вашего кода --- */
  }

  .flex-nav li {
    margin: 5px 0; /* Добавим вертикальные отступы */
  }
}

HTML

<nav class="flex-nav">
  <ul>
    <li><a href="#">Элемент 1</a></li>
    <li><a href="#">Элемент 2</a></li>
    <li><a href="#">Элемент 3</a></li>
  </ul>
</nav>
<p>Контент страницы...</p>

Для контейнера `ul` уже задано `display: flex`. Внутри медиа-запроса `@media (max-width: 500px)` добавьте свойство `flex-direction` со значением `column`, чтобы изменить направление основной оси на вертикальное.

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

Результат

Сообщения

Выполнить

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

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

Появление кнопки 'Гамбургер'

Реализуем базовую структуру для 'гамбургер' меню. На больших экранах (ширина больше 768px) должна отображаться обычная навигация, а кнопка 'гамбургер' - скрыта. На маленьких экранах (ширина 768px и меньше) — наоборот: навигация скрыта, а кнопка 'гамбургер' видна.

CSS

/* Стили для кнопки 'Гамбургер' */
.hamburger-btn {
  background-color: #555;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  /* --- По умолчанию кнопка скрыта --- */
  input1: none;
}

/* Стили для ссылок навигации */
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
  padding: 15px;
  /* --- По умолчанию ссылки видны (как блок) --- */
  input2: block;
}

.nav-links li {
  margin-bottom: 10px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

/* --- Медиа-запрос для мобильных устройств --- */
@media (max-width: 768px) {
  .hamburger-btn {
    /* --- Показываем кнопку --- */
    input3: block;
  }

  .nav-links {
    /* --- Скрываем ссылки --- */
    input4: none;
  }
}

                     /* Стили для кнопки 'Гамбургер' */
.hamburger-btn {
  background-color: #555;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  /* --- По умолчанию кнопка скрыта --- */
  input1: none;
}

/* Стили для ссылок навигации */
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
  padding: 15px;
  /* --- По умолчанию ссылки видны (как блок) --- */
  input2: block;
}

.nav-links li {
  margin-bottom: 10px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

/* --- Медиа-запрос для мобильных устройств --- */
@media (max-width: 768px) {
  .hamburger-btn {
    /* --- Показываем кнопку --- */
    input3: block;
  }

  .nav-links {
    /* --- Скрываем ссылки --- */
    input4: none;
  }
}

HTML

<button class="hamburger-btn">Меню</button>
<ul class="nav-links">
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Настройки</a></li>
  <li><a href="#">Выход</a></li>
</ul>
<p>Основной контент страницы...</p>

Используйте два правила: 1. По умолчанию скройте кнопку (`.hamburger-btn`) и покажите навигацию (`.nav-links`). 2. В медиа-запросе `@media (max-width: 768px)` сделайте наоборот: покажите кнопку (`display: block` или `inline-block`) и скройте навигацию (`display: none`).

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

Результат

Сообщения

Выполнить

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

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

Иконка для кнопки 'Гамбургер'

Заменим текст 'Меню' на кнопке иконкой гамбургера, используя фоновое изображение. Кнопка должна быть видна только на экранах шириной 768px или меньше. Убедитесь, что изображение не повторяется и занимает всю кнопку.

CSS

.nav-links {
  display: block; /* По умолчанию ссылки видны */
  padding: 10px;
  background-color: #eee;
}
.nav-links a {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.hamburger-icon-btn {
  display: none; /* По умолчанию кнопка скрыта */
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  width: 30px; /* Фиксированная ширина */
  height: 30px; /* Фиксированная высота */
  text-indent: -9999px; /* Скрываем текст */
  overflow: hidden; /* Скрываем текст, который может вылезти */
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* Скрываем ссылки на мобильных */
  }

  .hamburger-icon-btn {
    display: block; /* Показываем кнопку на мобильных */
    /* --- Начало вашего кода --- */
    input1: url('https://naytikurs.ru/img/7.png');
    input2: no-repeat;
    input3: center;
    input4: contain;
    /* --- Конец вашего кода --- */
  }
}

                     .nav-links {
  display: block; /* По умолчанию ссылки видны */
  padding: 10px;
  background-color: #eee;
}
.nav-links a {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.hamburger-icon-btn {
  display: none; /* По умолчанию кнопка скрыта */
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  width: 30px; /* Фиксированная ширина */
  height: 30px; /* Фиксированная высота */
  text-indent: -9999px; /* Скрываем текст */
  overflow: hidden; /* Скрываем текст, который может вылезти */
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* Скрываем ссылки на мобильных */
  }

  .hamburger-icon-btn {
    display: block; /* Показываем кнопку на мобильных */
    /* --- Начало вашего кода --- */
    input1: url('https://naytikurs.ru/img/7.png');
    input2: no-repeat;
    input3: center;
    input4: contain;
    /* --- Конец вашего кода --- */
  }
}

HTML

<button class="hamburger-icon-btn">Меню</button>
<div class="nav-links">
  <a href="#">Главная</a>
  <a href="#">Портфолио</a>
  <a href="#">Блог</a>
</div>
<p>Контент страницы...</p>

Внутри медиа-запроса `@media (max-width: 768px)` для селектора `.hamburger-icon-btn` добавьте свойства для фонового изображения: `background-image` с `url(...)`, `background-repeat` со значением `no-repeat`, `background-size` со значением `contain` или `cover`, и `background-position` со значением `center`. Также уберите текст, установив `text-indent: -9999px;` или `font-size: 0;` и `color: transparent;`. Не забудьте задать кнопке фиксированные размеры (`width` и `height`).

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

Результат

Сообщения

Выполнить

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

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