Исходный код с урока -
(#Часть_1) #Выпадающее #МЕНЮ на #чистом #CSS / #HTML -
Этот урок продолжение первой части "#Выпадающее #МЕНЮ на чистом #CSS / #HTML". В первой части видео показывал, как можно реализовать горизонтальное меню при помощи #display:flex; а в данном уроке, мы адаптируем его под мобильные устройства. В уроке мы опишем #медиа стили в отдельном файле, задействуем #input и #label для отслеживания щелчка, а при помощи @media запроса будем адаптировать горизонтальное меню под мобильные расширения. Весь код реализован на чистом #CSS3 / #HTML5. Объяснять стараюсь доступным языком, что будет понятно как для начинающих #Веб-разработчиков, так тем кто в данной сфере работает. Обсуждение видео: • #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS /... В уроке задействуем: • дополним верстку мета тегом (meta name="viewport") • задействуем input с атрибутом #type="checkbox" • используем #label с атрибутом #for="….." для отслеживания клика • воспользуемся медиа запросом #@media all and (max-width: 800px) • и для анимации применим #transition Более подробное описание тут -
Подписка на канал:
Видео сборник:
FAQ - Ответы на Ваши вопросы:
*Видео метки*: [01:47] - Что используем в данном уроке [03:14] - Скачиваем и подготавливаем код [04:49] - Обзор мета тега #viewport [06:10] - CSS стили под мобильное устройство [07:55] - Описываем #input и #label [08:55] - Оформляем медиа стили [12:03] - Описываем вложенные пункты [16:24] - Вложенные подпункты [19:35] - #Анимируем меню #transition *Другие видео на канале DWSTV*: Сайт с нуля -
Уроки по #CSS -
1С Битрикс работа с сайтом -
Управление системой Битрикс -
Настройки сайта 1С Битрикс -
Во время урока я использую: Документацию по #CSS3 Редактор #PhpStorm Ссылки из урока: Media queries CSS -
Архив кода на сайте -
Шрифтовые иконки -
Добавляйтесь к нам в друзья: Сайт видео-уроков:
Страничка в VK автора уроков:
https://vk.com/dwstv Канал группы в VK:
Мы очень рады если видео по #CSS3 #адаптация #горизонтального #меню под #мобильные #устройства было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по #CSS, так и другим #WEB разработкам.
