Выпадающее МЕНЮ на чистом CSS / HTML

HTML By Builder

(2 часть) Адаптация под мобильные устройства – https://youtu.be/tRoszGUp5Sg
Исходный код – http://bit.ly/2oVnIzd

В этом уроке мы сделаем, #выпадающее #горизонтальное #меню. Оно будет имеет #шрифтовые #иконки которые при наведении на меню меняют цвет.
Посмотреть и скачать код – http://bit.ly/2oVnIzd , а тут вторая часть – https://youtu.be/tRoszGUp5Sg

Сделаем небольшую #анимацию, в ней меняем цвет кнопки и текста, добавляем тень и все это отображается при наведении.
#Выпадающие #списки меню можно реализовать многоуровневыми простым копированием #UL и это все довольно просто реализовано на чистом #CSS / #CSS3.

Обсуждение видео: https://youtu.be/K3C4NdzFHg0

В уроке задействуем:
• #display: #flex;
• используем #transition;
• позиционировать элементы при помощи #position

Подписка на канал: https://dwstroy.ru/~dwstv
Видео сборник: https://dwstroy.ru/~S126H

*Видео метки*:
[01:13] – Структура разметки в #html
[02:22] – Подключаем шрифтовые иконки
[04:10] – Описываем #стили в #CSS
[04:29] – Подключаем шрифт Cuprum
[04:29] – Анмируем при наведении #hover
[08:10] – Выпадающее меню
[11:56] – CSS генератор #background

*Другие видео на канале 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

Ссылки из урока:
Архив кода на сайте – http://bit.ly/2oVnIzd
Шрифт Cuprum – http://bit.ly/2nulfPh
Шрифтовые иконки – http://bit.ly/2nXKJk3
Генератор Градиентов – http://bit.ly/2omhCtB

Использую музыку:
Love Me Like You Do (Violin Cover by Robert Mendoza) [from FIFTY SHADES OF GREY soundtrack]

Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28

Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите “поблагодарить” жмите кнопку “нравится” и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

source