Вопрос: Как создать выпадающее меню на HTML и CSS?

В данном видеоуроке мы создадим красивое, горизонтальное меню для сайта с использованием популярных технологий html5 и css3..
—
Скачать скрипт: https://goo.gl/neQn0o.
Emmet: https://emmet.io/.
Emmet CheatSheet: https://docs.emmet.io/cheat-sheet/.
—
Наш официальный сайт http://RootHelp.ru.
—
[Я] В Контакте http://vk.com/krayter.
[Мы] В Контакте http://vk.com/iroothelp.
[Мы] В Твиттере http://twitter.com/roothelp_ru.
—
На развитие проекта http://yasobe.ru/na/roothelp.
—
Смотрите, изучайте, обращайтесь!

#выпадающее #меню стоит начать с разметки. Причём, не важно, верстаем мы #горизонтальное или #вертикальное меню с выпадающим списком, в #HTML всё будет идентично..
Пока что мы стилизуем горизонтальное меню с выпадающим подменю снизу. Потом переделаем его в вертикальное меню, а подменю будет отображаться сбоку..
Выпадающие списки меню делаются многоуровневыми, копируя UL. Это просто реализовать на чистом #CSS..
Ссылка на статью из видео: https://medium.com/web-standards/a11y-poll-2019-dd42928f10ba.
0:00 Разметка меню с выпадающим списком.
1:19 Стилизация меню с выпадающим списком.
2:56 Область клика пункта меню.
3:20 Состояния пункта меню.
4:57 Стилизация подменю.
7:08 Отображение выпадающего меню.
10:09 Правильное отображение выпадающего меню.
12:52 Вертикальное меню с выпадающим списком

Создаем с помощью разметки HTML и CSS выпадающее меню для сайта..
_
��Наш сайт https://www.webdesguru.com/.
��Группа в вк https://vk.com/webdesign_guru.
�� Чат для https://t.me/Webdesignguruchat.
�� Курсы веб дизайна https://vk.com/market-129017017.
�� Ищешь работу? Посмотри что у меня есть для тебя https://goo.gl/b6wUJp.
�� Telegram группа https://telegram.me/webdesign_guru.
�� Понравился материал? Давай помоги нам https://goo.gl/jfUkMM.
�� Тебе надо фотографии по бешеным скидкам? Тебе сюда https://shopdiz.pro/r/im7sNLRE

Выпадающее меню и выпадающие элементы очень часто используются в верстке. В этом выпуске покажу технику обычного выпадающего меню на CSS а также реализацию под тачскрины мобильных экранов и планшетов на JS.
�� Адаптивное меню «бургер»: https://www.youtube.com/watch?v=chJQofBSx94&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=4.
�� Геометрические фигуры на CSS: https://www.youtube.com/watch?v=Irj55RYH254&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=8.
�� Поставил лайк? Держи архив с результатом: http://fls.guru/howtodoit/howtodoit_10.zip.
�� Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle.
�� Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle).
�� Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat).
�� Facebook: https://www.facebook.com/freelancerlifestyle.
�� Instagram: https://www.instagram.com/freelancer.lifestyle.
�� Меня зовут Женя Андриканич, я IT специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle.
�� Живи, а работай в свободное время! ©

С этими праздниками, нормально до видео не добраться:) Сегодня мы будем делать меню с выпадающими списками на чистом CSS3. Без использования javascript..
Как обычно, все будет красиво, плавно, с анимацией смотрите и наслаждайтесь!
=
Ссылки из видео:
1. Пример: http://master-css.com/demo/css3menu/.
2. Архив: http://master-css.com/zip/startlight.rar.
*** Заработай на своем YouTube канале ***.
http://master-css.com/go/21.
Музыка предоставлена сайтом http://audiomicro.com, как партнеру VSP Group. Спасибо!
Наш сайт: http://master-css.com.
Наш ВК: https://vk.com/m_css.
Мой Twitter: https://twitter.com/SWAT727.
Google+ https://plus.google.com/+Master-css/

(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://www.youtube.com/watch?v=VZRVou4cyic.
Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/.
Канал в VK автора уроков: https://vk.com/dwstv.
Канал группы в VK: https://dwstroy.ru/MJM28.
Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите «поблагодарить» жмите кнопку «нравится» и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

Как сделать выпадающее меню | HTML & CSS