Выпадающее МЕНЮ на чистом CSS / HTML
(2 часть) Адаптация под мобильные устройства - • #2 ЧАСТЬ - Выпадающее ...
Исходный код - bit.ly/2oVnIzd
В этом уроке мы сделаем, #выпадающее #горизонтальное #меню. Оно будет имеет #шрифтовые #иконки которые при наведении на меню меняют цвет.
Посмотреть и скачать код - bit.ly/2oVnIzd , а тут вторая часть - • #2 ЧАСТЬ - Выпадающее ...
Сделаем небольшую #анимацию, в ней меняем цвет кнопки и текста, добавляем тень и все это отображается при наведении.
#Выпадающие #списки меню можно реализовать многоуровневыми простым копированием #UL и это все довольно просто реализовано на чистом #CSS / #CSS3.
Обсуждение видео: • Выпадающее МЕНЮ на чис...
В уроке задействуем:
• #display: #flex;
• используем #transition;
• позиционировать элементы при помощи #position
Подписка на канал: dwstroy.ru/~dwstv
Видео сборник: dwstroy.ru/~S126H
*Видео метки*:
[01:13] - Структура разметки в #html
[02:22] - Подключаем шрифтовые иконки
[04:10] - Описываем #стили в #CSS
[04:29] - Подключаем шрифт Cuprum
[04:29] - Анмируем при наведении #hover
[08:10] - Выпадающее меню
[11:56] - CSS генератор #background
*Другие видео на канале DWSTV*:
Сайт с нуля - dwstroy.ru/~7KNnM
Уроки по #CSS - dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - dwstroy.ru/~dEG4q
Управление системой Битрикс - dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - dwstroy.ru/~t0UVZ
Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm
Ссылки из урока:
Архив кода на сайте - bit.ly/2oVnIzd
Шрифт Cuprum - bit.ly/2nulfPh
Шрифтовые иконки - bit.ly/2nXKJk3
Генератор Градиентов - bit.ly/2omhCtB
Использую музыку:
Love Me Like You Do (Violin Cover by Robert Mendoza) [from FIFTY SHADES OF GREY soundtrack]
• Love Me Like You Do (V...
Добавляйтесь к нам в друзья:
Сайт видео-уроков: dwstroy.ru/video/
Канал в VK автора уроков: vk.com/dwstv
Канал группы в VK: dwstroy.ru/~MJM28
Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
Полезные ссылки к уроку: ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p ► Уроки по FlexBox - bit.ly/2CYN8lo ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt
Простите , у меня не выстраивается меню в ряд .Думал дело в display: flex; , но все равно ничего не выходит подскажите пожалуйста .
Спасибо . Я выяснил в чем дело . У меня редактор дает баги . Пишу код- на странице ерунда , потом стираю его переписываю (или копирую и вставляю снова ) и все работает .
скинь код
В выпадающем меню на пер пой кнопке левая граница толще чем на остальных (вернее она там двойная). Как исправить? pp.userapi.com/c850520/v850520621/5538b/ucuStvsuMWk.jpg
Крч // border у всех элементов поставил одного цвета, а в // .dws-menu > ul li:first-child добавил строку // margin-left: -1px; в // .dws-menu li > ul li ul сделал // right: -153px; вместо 150. Вроде бы мелкие недочеты, но глаза мозолят. Теперь надо в выпадающем списке правую полосу поправить. Она в два раза толще левой. Еще градиент у меня при зуме иногда растаскивает кнопки. Поменял на один цвет. Не нашел как всё это исправить.
Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!
Спасибо, прошло уже 4 года, а видео до сих пор актуально. Удачи.
не совсем, сайт с иконами изменился и всё совсем не так как на видео
ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!
Отличный урок, спасибо большое) *Ждем вторую часть*
Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)
Здравствуйте Денис, хочу сказать что у вас очень интересные уроки, буду ждать (НОВЫХ) СПАСИБО :-)
Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.
Уровень знаний и подача материала впечатляет. Спасибо!
Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно! Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!
Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!
Спасибо за комментарий, рад то уроки помогают.
Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!
сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто
Великолепный урок! Спасибо большое автору!
Идеально - кратко, понятно и по сути, качество записи на отлично!
Красавчик! Все четко, без воды! Уважаю!
Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.
люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!
Спасибо за уроки, смотрю твои видео и просто наслаждаюсь
Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!
Супер. По поводу адаптации +++. Буду ждать с нетерпением.
Так все быстро сказал, что я даже не успел запомнить))) Спасибо большое !! Все супер.
Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее
Очень понравился урок. Все очень доступно и четко. Спасибо!
Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!
Спасибо!
Всё чётко, ясно и по полочкам, лайк и подписка, продолжай делать гайды)
Очень интересные и познавательные уроки, молодец!
Спасибо еще раз за твой труд,буду с нетерпением ждать новые,смотреть и лайкать старые уроки.
😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl Assssssxxxxxxxc xmcv1waasscc b %
Отличный канал. побольше подписчиков тебе. ибо твой материал достоин внимания :)
Канал растет на "глазах"!
Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается
Невероятно крутые уроки, спасибо тебе!
*Я посмотрел DWS TV многих комментарии лайкает,комментирует.Молодец общается с зрителями.Желаю тебе успехов в дальнейшем!*
просто идеально, благодарю))) автору респекс.
Супер!!! впервые я понял ВСЕ! От и до. Респект!
Как всегда туториалы высший пилотаж) спасибо.
Спапсибо за урок Денис! респект тебе. очень много в интеренете материалов, но ты обясняешь отлично! спасибо еще раз!
Очень крутой урок! Автор молодчага👌
Было великолепно, спасибо большое!!!
Спасибо за урок. Реально Awesome!!!
Спасибо. Отличный урок. Все предельно просто и понятно
Спасибо! Очень доступно и полезно.
Класс видео! Очень полезно, и понятно) Так сказать "Без лишних слов"))) Спасибо!!!
Меню отличное, спасибо за урок!
Огромное вам спасибо! Все понятно!!!!
Спасибо за интересный и очень познавательный урок.. С меня лайк и подписка!
Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !
Спасибо большое за урок. Вы молодец!!!!!
Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!
Мужик люблю тебя только у тебя нашел выход из проблемы, которая ломала меня 2 недели
Здорово буду теперь учиться сам делать такие)
спасибо за замечательный выпуск)
Очень круто, спасибо
Очень понравился background кнопок в конце ролика, надо будет попробовать :)
Очень отличный видео ! Спасибо
Обалдеть, а че так можно было да? =) пипец, красавчик, давай еще =)
Спасибо большое! Все понятно и легко!
Отлично видео, спс, ждем адаптива)
Спасибо большое, что выкладываете исходный код...
Крутецкое меню! Еще бы крутые анимации на кнопки.
Я вам очень благодарен! Снимайте еще ;)
Спасибо! Возможно скоро начну.
Спасибо огромное! Было очень ясно и полезно!
спасибо за урок ,очень понравилось !
Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!
Видео о том как быстро автор умеет работать с CSS. Молодец!
Ооооочень круто! Спасибо!
спасибо большое за данное видео. Давно хотел научиться делать подобное меню
спасибо. полезно, эффективно и красиво =)
Спасибо за годный урок теперь я умею делать меню!
Респект 👍 Очень хорошо и толково. Благодарю!
Спасибо большое, отличный урок
Красава, респект тебе, еле успевал. ))
Слушай, ну просто топ!😀
Вообще круто! Спасибо огромное!
Круто! Благодарю)
Спасибо. Хороший урок!
Супер!Очень полезный урок.
Если бы ты сделал парочку макетов сайтов у себя на видеоуроках, разбил бы их на штук так 20 и за эти 20 уроков ты бы например запилил 2, 3 сайта разной сложности. От простого и легкого, к более сложному. Вот это было бы интересно, хотя так наверное каждый бы урок занимал по минут 20, но, лично для меня, это было бы интересно)
Интересное предложение, спасибо. Появится лишнее время возможно реализуем.
@@denisgorelov3236 Ждем)
Cпасибо за урок. Отдельный поклон за иконки :3
Спасибо, рад что материал был полезен.
Отличный урок Денис. css сейчас много интересного позваляет делать (без того же js). Такие уроки нужны. Ждемс продолжения
очень круто, спасибо. попробую также ))
Благодарю, очень помог!
Спасибо за видео! Вы просто меня им спасли!!!
отличный ролик, приятная музыка, смотрел в 2х кратном ускорении, дикция норм, инфа полезная, всего пару дней как начал лепить первый сайт, комент ради комента говорят за это бонусы дают блогерам
Денис спасибо за хороший урок. Объяснил все четко и понятно, главное не спеша. Ждем еще такие уроки от вас. Еще хотел видеть от тебя в таком же темпе урок о PHP. Спасибо!
Полезное видео! Наконец-то создал меню для сайта)
Все довольно хорошо, даже идеально.
Спасибо большое за урок.
Спасибо Денис! Ты лучший
Охренеть, а что так можно было?! Бомба.
Выражаю огромную благодарность за это видео. Хоть я и новичок, но на это13-ти минутное видео я потратил 2,5 часа и у меня получилось.
Лучший канал !! ЛАЙК!
просто шикарно , легко и нечего сложного , спасибо тебе от моего сайта
Урок топ! Ты лутший!
Меню пригодилось. Спасибо.
Дэнчик спасибо большое за твой труд !
Не за что!
Лайк и подписка. Автор молодец, очень подробное и доходчивое объяснение для начинающих.
Пасибо, предельно ясно и просто.
Молодец все доступно объяснил спасибо за урок
Огромное спасибо!