#2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства)
Исходный код с урока - http://bit.ly/2qXFcxG
(#Часть_1) #Выпадающее #МЕНЮ на #чистом #CSS / #HTML - http://bit.ly/2oVnIzd
Этот урок продолжение первой части "#Выпадающее #МЕНЮ на чистом #CSS / #HTML". В первой части видео показывал, как можно реализовать горизонтальное меню при помощи #display:flex; а в данном уроке, мы адаптируем его под мобильные устройства.
В уроке мы опишем #медиа стили в отдельном файле, задействуем #input и #label для отслеживания щелчка, а при помощи @media запроса будем адаптировать горизонтальное меню под мобильные расширения.
Весь код реализован на чистом #CSS3 / #HTML5. Объяснять стараюсь доступным языком, что будет понятно как для начинающих #Веб-разработчиков, так тем кто в данной сфере работает.
Обсуждение видео: • #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом ...
В уроке задействуем:
• дополним верстку мета тегом (meta name="viewport")
• задействуем input с атрибутом #type="checkbox"
• используем #label с атрибутом #for="….." для отслеживания клика
• воспользуемся медиа запросом #@media all and (max-width: 800px)
• и для анимации применим #transition
Более подробное описание тут - http://bit.ly/2qXFcxG
Подписка на канал: http://bit.ly/2oR3EfT
Видео сборник: https://dwstroy.ru/~S126H
FAQ - Ответы на Ваши вопросы: http://bit.ly/2rHZvR1
*Видео метки*:
[01:47] - Что используем в данном уроке
[03:14] - Скачиваем и подготавливаем код
[04:49] - Обзор мета тега #viewport
[06:10] - CSS стили под мобильное устройство
[07:55] - Описываем #input и #label
[08:55] - Оформляем медиа стили
[12:03] - Описываем вложенные пункты
[16:24] - Вложенные подпункты
[19:35] - #Анимируем меню #transition
*Другие видео на канале DWSTV*:
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ
Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm
Ссылки из урока:
Media queries CSS - http://bit.ly/2oQ5JtZ
Архив кода на сайте - http://bit.ly/2qXFcxG
Шрифтовые иконки - http://bit.ly/2nXKJk3
Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Страничка в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28
Мы очень рады если видео по #CSS3 #адаптация #горизонтального #меню под #мобильные #устройства было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по #CSS, так и другим #WEB разработкам.
Смотрите видео #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства) онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Denis Gorelov 27 Май 2017. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 60,714 раз и оно понравилось 1.9 тысяч посетителям.
