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

author Денис Горелов   1 год. назад
75,028 views

2,604 Like   39 Dislike

Как легко сделать горизонтальное меню HTML CSS (За 5 минут)

Воу воу, это первое видео на канале посвященному web разработке для нубасов, или тех кто вообще не втыкает, но очень хочет. В этом видео рассказывается как сделать простейшее горизонтальное меню. Это мой первый опыт записи и монтажа, так что дальше будет лучше =)

5 ошибок всех начинающих программистов ...

Ты вряд ли станешь хорошим программистом, если допустишь хоть одну ошибку из списка. Их делают все новички, но мало кто знает насколько они фатальны. 🍀 Получить инвайт: https://webdevsummit.info Наш паблик ВК: https://www.vk.com/howdyho_net Мы в ТГ: https://t.me/howdyho Сотрудничество https://vk.com/topic-84392011_33285530 💗 Музыка предоставлена YouTube Audio Library.

How to Create Transparent Drop Down Navigation Menu with CSS and HTML

Hey guys, I'm now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :) Download this video's files here: https://www.patreon.com/posts/inserting-data-20819049 This download (Patreon unlock) includes: (index.html source code, nature.jpg background, style.css source code) + ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! ) ````````````````````````````````````````````````````````````````````````````````````````````` CleverTechie.com is hosted with SiteGround and recommended by Clever Techie as #1 web hosting company: https://www.siteground.com/go/clevertechie ( 60% off ) #1 Hosting Company https://www.bluehost.com/track/clevertechie1 ( 63% off ) #2 Hosting Company https://www.hostgator.com/web-hosting #3 Hosting Company HostGator ( 60% off ) coupon: CLEVERTECHIE If you guys decide to sign up with SiteGround or any of the 3 hosts, I would really appreciate if you supported Clever Techie and signed up with my affiliate links that you see here. You get a massive 60% discount, there are no extra costs for you, and you will motivate me to create more videos as well. I could also end up working on Clever Techie full time with enough of your support, if that happens, then I'll be making about 3 new videos every single week! Clever Techie's number one pick for web hosting is SiteGround's (GrowBig) plan for 12 months. The cost is $71.40 + $15.95 domain registration (with 60% off clever techie affiliate link discount). I really appreciate your support everyone, every subscription counts as motivational fuel for creating more videos :) `````````````````````````````````````````````````````````````````````````````````````````````` ( Website ) https://clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams. ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube ( Google Plus ) https://goo.gl/J71p6f - clever techie video tutorials. ( Facebook ) https://www.facebook.com/CleverTechie/ ( Twitter ) https://twitter.com/theclevertechie

Формы CSS / Как создать форму в CSS3

Исходный код - http://bit.ly/2pvLBjL В рамках данного видео покажу как сделать красивую #форму входа на сайт при помощи #css . Задействуем #анимацию элементов при наведении (transition), подключим #шрифтовые иконки css, узнаете как задавать прозрачность элементам при помощи (rgba), о всем этом смотрите в видео уроке "Форма CSS". Подписка на канал - https://dwstroy.ru/~dwstv Обсуждение видео: https://youtu.be/INb7QmuKmTc #Видео сборник- https://dwstroy.ru/~S126H *Видео метки*: [00:25] - Описываем каркас в html [01:10] - Стилизация формы CSS3 [04:25] - Прозрачный фон (rgba) [05:07] - Добавляем шрифтовые иконки *Другие видео на канале 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 Ссылки из урока: Архив каркаса и шрифтов - https://dwstroy.ru/~WNpGP Сервис цветов - https://www.w3schools.com Шрифтовые иконки - http://fontawesome.io Использую музыку: Elektronomia - Limitless [NCS Release] Tobu - Life [NCS Release] https://www.youtube.com/user/NoCopyrightSounds http://soundcloud.com/nocopyrightsounds Добавляйтесь к нам в друзья: Сайт видео-уроков: https://dwstroy.ru/video/ Канал в VK автора уроков: https://vk.com/dwstv Канал группы в VK: https://dwstroy.ru/~MJM28 Мы очень рады если видео по CSS было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки по #1С битрикс.

Выполняем реальный заказ на фрилансе LIVE!

Берём и выполняем самый настоящий заказ на фрилансе без подготовки LIVE. Мы обсудим множество важных моментов и вопросов, в том числе походу того, как будем выполнять заказ. Для новичков программистов и не только, - урок окажется крайне полезным. = 🔋 Freelancehunt: http://bit.ly/Freelancehunt_GO = 👊🏼 Наш 🆅🅺: https://www.vk.com/howdyho_net 👊🏼 Наш 🆃🅶 чат: https://t.me/howdyho 👊🏼 Наше YT сообщество: https://www.youtube.com/c/HowdyHo_Net/community 🤞🏼 Понравился урок? Подпишись 👑 Вруби уведомления 🔔 Поставь лайк 👍🏼 Оставь комментарий 💬 🆇 Ссылки из видео 🆇 𝟭: http://bit.ly/Freelancehunt_GO 𝟮: http://diypedia.club 🎮 Подумываешь прикупить себе игру? ;) Лучшие цены 💰 на игры Steam 🎮 и рандомы 🎲 только здесь - http://bit.ly/SteamAlmostFreeGames 🎬 Реклама у нас: https://vk.com/topic-84392011_33285530 💵 Реквизиты для донатства (WebMoney) 💵 R250434217196 Z252920168434 U415267612522 💗 Музыкальный трек предоставлен YouTube Audio Library. Композиция "Dubstep Light" принадлежит исполнителю Audionautix. Лицензия: Creative Commons Attribution (https://creativecommons.org/licenses/by/4.0/). Исполнитель: http://audionautix.com/

(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 разработкам.

Comments for video: