Адаптивная навигация [Модуль 10: Адаптивный дизайн]: Тренажер CSS

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

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

Список тем

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

id: 37460_adaptive-nav-1

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

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

Результат

Сообщения

Выполнить

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

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

id: 37460_adaptive-nav-2

Теперь сделаем так, чтобы на маленьких экранах (до 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

id: 37460_adaptive-nav-3

Используем 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`, чтобы изменить направление основной оси на вертикальное.

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

Результат

Сообщения

Выполнить

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

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

id: 37460_adaptive-nav-4

Реализуем базовую структуру для 'гамбургер' меню. На больших экранах (ширина больше 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`).

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

Результат

Сообщения

Выполнить

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

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

id: 37460_adaptive-nav-5

Заменим текст 'Меню' на кнопке иконкой гамбургера, используя фоновое изображение. Кнопка должна быть видна только на экранах шириной 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`).

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

Результат

Сообщения

Выполнить

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