Введение 0:06 Макс Сайт представляет третий урок из цикла адаптивного дизайна, где он покажет, как сделать адаптивное меню из большого меню на десктопе в мобильное меню. Он призывает подписаться на канал и поставить лайк.
Обзор кода 0:24 Макс показывает код, который уже был представлен в предыдущих уроках. Он объясняет, что в коде есть секции, логотип, меню и кнопка бургера, а также базовые стили. Он также упоминает общий файл, в котором подключаются все три файла, и файл с сеткой элементов.
Начало работы 0:58 Макс начинает работу над кодом, создавая меню с классами "nav" и "header". Он также объясняет, что в предыдущем уроке уже была сетка элементов.
Стилизация меню 7:37 Установка флекс-флекса для на флай и лайнас-центра для на флай дроп. Установка позиционных и отступов для элементов меню. Создание и стилизация выпадающих списков.
Работа с мобильными устройствами 15:37 Использование медиа-запросов для работы с мобильными устройствами. Создание бургер-меню для исправления проблемы на определенной ширине.
Создание меню 18:47 Создание стиля для кнопки "Бургер" с использованием элементов CSS. Создание стиля для автора и его позиционирование.
Создание вложенного меню 22:55 Создание вложенного меню с использованием Flexbox и Flex Direction. Создание стилей для ссылок и их позиционирование.
Скрытие и показ элементов 28:00 Создание стилей для элементов меню и их показ/скрытие. Создание классов для управления состоянием блоков.
Завершение стилизации 30:52 Создание классов для сдвига и показа меню. Создание классов для оверлея и его показ/скрытие.
Создание меню с помощью CSS 32:42 Создание классов для элементов меню и использование чистого CSS для их обработки. Создание функции для открытия и закрытия меню при клике на элементы.
Стилизация элементов меню 39:43 Изменение стилей ссылок и кнопок для более информативного и удобного использования. Использование псевдоэлементов для добавления стрелок к пунктам меню.
Работа с ссылками и прокрутка 42:32 Создание функции для прокрутки вверх при клике на ссылки. Создание функции для закрытия меню при клике на определенные ссылки.
Изначальное положение меню 45:55 Создание функции для сброса меню на изначальное положение при открытии. Проверка работы меню при изменении размера экрана и при респонсе.
