#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 разработкам.
Watch video #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства) online without registration, duration hours minute second in high quality. This video was added by user Denis Gorelov 27 May 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 60,714 once and liked it 1.9 thousand people.