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

author DWS TV - Уроки по WEB разработкам   1 год. назад
66,851 views

2,347 Like   36 Dislike

#2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства)

Исходный код с урока - http://bit.ly/2qXFcxG (#Часть_1) #Выпадающее #МЕНЮ на #чистом #CSS / #HTML - http://bit.ly/2oVnIzd Этот урок продолжение первой части "#Выпадающее #МЕНЮ на чистом #CSS / #HTML". В первой части видео показывал, как можно реализовать горизонтальное меню при помощи #display:flex; а в данном уроке, мы адаптируем его под мобильные устройства. В уроке мы опишем #медиа стили в отдельном файле, задействуем #input и #label для отслеживания щелчка, а при помощи @media запроса будем адаптировать горизонтальное меню под мобильные расширения. Весь код реализован на чистом #CSS3 / #HTML5. Объяснять стараюсь доступным языком, что будет понятно как для начинающих #Веб-разработчиков, так тем кто в данной сфере работает. Обсуждение видео: https://youtu.be/tRoszGUp5Sg В уроке задействуем: • дополним верстку мета тегом (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 разработкам.

Создание меню для сайта на 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 --------------------------------------------------------------------------------------------------------- Смотрите, изучайте, обращайтесь!

Tutorial 1 - Navigation Bar - HTML / CSS

This is a very simple navigation bar tutorial built with HTML and CSS. If you liked this tutorial, give it a thumbs up, and subscribe for more tutorials coming soon!

Верстка сайта с нуля. Начало, шапка сайта.

Наконец то на канале верстка адаптивного сайта с нуля. В этом видео я покажу процесс создания сайта для новичков. Мы начнем проект с самого начала, с создания index.html и последующей адаптивной версткой. В этом курсе верстки мы сделаем полноценный сайт с несколькими страницами за 10 уроков. В нем будут различные компоненты от применения flexbox с css grid до встраивания видео и слайдеров на сайт. Вообще html верстка это занятие не сложное но творческое и весьма время затратное. Курсы верстки я разделил на уровни. В данном курсе первого уровня будут самые простые моменты верстки. Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте https://billing.mchost.ru/order.php?hosting=1&plan_id=685 ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб. Активационный платеж не расходуется, оставаясь на балансе и является всего лишь барьером против злоупотреблений со стороны спамеров, мошенников и т.п. Группа вк: https://vk.com/developblog Пост с логотипом в группе: https://vk.com/developblog?w=wall-110872645_500

CSS Flexbox Tutorial #7 - Creating a Menu with Flexbox

Yo ninjas, in this CSS Flexbox tutorial I'll show you how we can create a navigation / menu bar using flexbox - reeeeaaaally easily! Instead of floating all of the items to the left or right, then fixing the parent element collapse etc, all we need to do is apply 1 flex property and boom - we have ourselves a nice menu :). ----- COURSE LINKS: + Source files on GitHub - https://github.com/iamshaunjp/css-flexbox-playlist + Brackets editor - https://brackets.io/ --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ============ CSS for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk

(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: