Тёмный

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

Denis Gorelov
Подписаться 31 тыс.
Просмотров 315 тыс.
50% 1

(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 автора уроков: dwstv
Канал группы в VK: dwstroy.ru/~MJM28
Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

Опубликовано:

 

8 апр 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 669   
@denisgorelov3236
@denisgorelov3236 6 лет назад
Полезные ссылки к уроку: ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p ► Уроки по FlexBox - bit.ly/2CYN8lo ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt
@user-dc5sy1ug1h
@user-dc5sy1ug1h 5 лет назад
Простите , у меня не выстраивается меню в ряд .Думал дело в display: flex; , но все равно ничего не выходит подскажите пожалуйста .
@user-dc5sy1ug1h
@user-dc5sy1ug1h 5 лет назад
Спасибо . Я выяснил в чем дело . У меня редактор дает баги . Пишу код- на странице ерунда , потом стираю его переписываю (или копирую и вставляю снова ) и все работает .
@davidsahakyan8790
@davidsahakyan8790 5 лет назад
скинь код
@timanderson324
@timanderson324 5 лет назад
В выпадающем меню на пер пой кнопке левая граница толще чем на остальных (вернее она там двойная). Как исправить? pp.userapi.com/c850520/v850520621/5538b/ucuStvsuMWk.jpg
@timanderson324
@timanderson324 5 лет назад
Крч // border у всех элементов поставил одного цвета, а в // .dws-menu > ul li:first-child добавил строку // margin-left: -1px; в // .dws-menu li > ul li ul сделал // right: -153px; вместо 150. Вроде бы мелкие недочеты, но глаза мозолят. Теперь надо в выпадающем списке правую полосу поправить. Она в два раза толще левой. Еще градиент у меня при зуме иногда растаскивает кнопки. Поменял на один цвет. Не нашел как всё это исправить.
@billyukrop1496
@billyukrop1496 7 лет назад
ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!
@clever_distr
@clever_distr 4 года назад
Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно! Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!
@mishalitvin6359
@mishalitvin6359 7 лет назад
Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!
@user-tp1sb6eo2b
@user-tp1sb6eo2b 5 лет назад
Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.
@user-dv8sl7xh7d
@user-dv8sl7xh7d 6 лет назад
Здравствуйте Денис, хочу сказать что у вас очень интересные уроки, буду ждать (НОВЫХ) СПАСИБО :-)
@oleksiirudenko1446
@oleksiirudenko1446 5 лет назад
сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто
@oleksandrharkusha9404
@oleksandrharkusha9404 6 лет назад
Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!
@denisgorelov3236
@denisgorelov3236 6 лет назад
Спасибо за комментарий, рад то уроки помогают.
@filevav
@filevav 7 лет назад
Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)
@user-cb2ui4cj8j
@user-cb2ui4cj8j 5 лет назад
Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!
@KindCat21
@KindCat21 4 года назад
Уровень знаний и подача материала впечатляет. Спасибо!
@dreamer2978
@dreamer2978 6 лет назад
Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее
@alexandrryzhenkov6917
@alexandrryzhenkov6917 5 лет назад
Так все быстро сказал, что я даже не успел запомнить))) Спасибо большое !! Все супер.
@uszakow
@uszakow 3 года назад
Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!
@user-hs5hh2hl5j
@user-hs5hh2hl5j 7 лет назад
Отличный урок, спасибо большое) *Ждем вторую часть*
@kinggiv1
@kinggiv1 Год назад
люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!
@mishasv1490
@mishasv1490 5 лет назад
Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!
@denisgorelov3236
@denisgorelov3236 5 лет назад
Спасибо!
@user-zv6uq2cd1u
@user-zv6uq2cd1u 4 года назад
Великолепный урок! Спасибо большое автору!
@TheAlexmaxakt
@TheAlexmaxakt 5 лет назад
Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!
@ravabat5841
@ravabat5841 5 лет назад
Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.
@doskerprovokator7210
@doskerprovokator7210 5 лет назад
Идеально - кратко, понятно и по сути, качество записи на отлично!
@Muzaffar1987ful
@Muzaffar1987ful Год назад
Спапсибо за урок Денис! респект тебе. очень много в интеренете материалов, но ты обясняешь отлично! спасибо еще раз!
@it6706
@it6706 7 лет назад
*Я посмотрел DWS TV многих комментарии лайкает,комментирует.Молодец общается с зрителями.Желаю тебе успехов в дальнейшем!*
@olgamazurenko8142
@olgamazurenko8142 5 лет назад
Очень понравился урок. Все очень доступно и четко. Спасибо!
@AlexsashkaSysoev
@AlexsashkaSysoev 7 лет назад
Спасибо еще раз за твой труд,буду с нетерпением ждать новые,смотреть и лайкать старые уроки.
@denisputria2376
@denisputria2376 4 года назад
😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl Assssssxxxxxxxc xmcv1waasscc b %
@bagafree
@bagafree 4 года назад
Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается
@Romzec1
@Romzec1 6 лет назад
Очень интересные и познавательные уроки, молодец!
@bektendosmambetov938
@bektendosmambetov938 4 года назад
Спасибо за уроки, смотрю твои видео и просто наслаждаюсь
@web-eea
@web-eea 5 лет назад
Красавчик! Все четко, без воды! Уважаю!
@user-os4yb9tg6w
@user-os4yb9tg6w 7 лет назад
Отличный канал. побольше подписчиков тебе. ибо твой материал достоин внимания :)
@bekzhanzulkashev5816
@bekzhanzulkashev5816 5 лет назад
Выражаю огромную благодарность за это видео. Хоть я и новичок, но на это13-ти минутное видео я потратил 2,5 часа и у меня получилось.
@user-if9ft4we4x
@user-if9ft4we4x 5 лет назад
Класс видео! Очень полезно, и понятно) Так сказать "Без лишних слов"))) Спасибо!!!
@sergeigregul1546
@sergeigregul1546 6 лет назад
Всё чётко, ясно и по полочкам, лайк и подписка, продолжай делать гайды)
@_Fantom_.
@_Fantom_. 4 года назад
Спасибо за интересный и очень познавательный урок.. С меня лайк и подписка!
@alexey6680
@alexey6680 7 лет назад
Супер. По поводу адаптации +++. Буду ждать с нетерпением.
@Obraveliss
@Obraveliss 3 года назад
Мужик люблю тебя только у тебя нашел выход из проблемы, которая ломала меня 2 недели
@span4ev
@span4ev 6 лет назад
Как всегда туториалы высший пилотаж) спасибо.
@zhakelee6432
@zhakelee6432 7 лет назад
Денис спасибо за хороший урок. Объяснил все четко и понятно, главное не спеша. Ждем еще такие уроки от вас. Еще хотел видеть от тебя в таком же темпе урок о PHP. Спасибо!
@user-gk2tl9xz6p
@user-gk2tl9xz6p 4 года назад
Супер!!! впервые я понял ВСЕ! От и до. Респект!
@user-rf4tu5bd4y
@user-rf4tu5bd4y 3 года назад
Видео о том как быстро автор умеет работать с CSS. Молодец!
@user-os4yk6hf4r
@user-os4yk6hf4r 4 года назад
Очень понравился background кнопок в конце ролика, надо будет попробовать :)
@bobretsoff
@bobretsoff 6 лет назад
Обалдеть, а че так можно было да? =) пипец, красавчик, давай еще =)
@BULBARASHGREEN
@BULBARASHGREEN 6 лет назад
Спасибо. Отличный урок. Все предельно просто и понятно
@user-ty6fq9os9k
@user-ty6fq9os9k 3 года назад
Спасибо, прошло уже 4 года, а видео до сих пор актуально. Удачи.
@i3anan4ik86
@i3anan4ik86 2 года назад
не совсем, сайт с иконами изменился и всё совсем не так как на видео
@oce10t96
@oce10t96 6 лет назад
Невероятно крутые уроки, спасибо тебе!
@ivanivanov7494
@ivanivanov7494 3 года назад
Спасибо за урок. Реально Awesome!!!
@user-yb9uf8uz8k
@user-yb9uf8uz8k 4 года назад
Меню отличное, спасибо за урок!
@avtomono52
@avtomono52 6 лет назад
просто идеально, благодарю))) автору респекс.
@user-im3jb5de6b
@user-im3jb5de6b 5 лет назад
Спасибо большое за урок. Вы молодец!!!!!
@user-bv5oy6kh1w
@user-bv5oy6kh1w 4 года назад
отличный ролик, приятная музыка, смотрел в 2х кратном ускорении, дикция норм, инфа полезная, всего пару дней как начал лепить первый сайт, комент ради комента говорят за это бонусы дают блогерам
@maxxbf
@maxxbf 6 лет назад
Отличный урок Денис. css сейчас много интересного позваляет делать (без того же js). Такие уроки нужны. Ждемс продолжения
@makskyciny5622
@makskyciny5622 2 года назад
Очень крутой урок! Автор молодчага👌
@Free_474
@Free_474 4 года назад
Супер, спасибо!! Сделайте, пожалуйста, видео про горизонтальную прокрутку элементов с кнопками
@user-ho4xs6ty4z
@user-ho4xs6ty4z 4 года назад
Спасибо большое, что выкладываете исходный код...
@FantazyEliott
@FantazyEliott 7 лет назад
Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !
@khromenkov.V
@khromenkov.V 3 года назад
Респект 👍 Очень хорошо и толково. Благодарю!
@funclub6927
@funclub6927 5 лет назад
Всё действительно быстро, и для понимающих людей полезно, мне как новичку немного трудновато так быстро следить за действиями, но думаю розебрусь
@user-jp3ip2mx7f
@user-jp3ip2mx7f 2 года назад
День второй) Возьмите это и его туда а здесь вот так и этак)) Чёёёёёё. До этого видео я представления не имел о всём что говорит автор) Очень много гуглю, первое меню в моей жизни даётся тяжело. Познания в данной сфере на данный момент -100% )) Но мы не здаёмся, обязательно всё получиться) Всем удачи,не бросайте на пол пути)
@yourrise9280
@yourrise9280 5 лет назад
Было великолепно, спасибо большое!!!
@alexeikulikov2844
@alexeikulikov2844 3 года назад
Лайк и подписка. Автор молодец, очень подробное и доходчивое объяснение для начинающих.
@widi2834
@widi2834 6 лет назад
Спасибо за годный урок теперь я умею делать меню!
@ozmosis13777
@ozmosis13777 7 лет назад
спасибо за замечательный выпуск)
@OxoTHuK13
@OxoTHuK13 5 лет назад
Денис, спасибо за замечательные уроки! Нашел Ваш канал по рекомендации от Хауди Хо и не пожалел. Небольшая поправочка: "Awesome" произносится как "Осом" (ударение на первый слог). )))
@user-wk9ue9sy8e
@user-wk9ue9sy8e 7 лет назад
Канал растет на "глазах"!
@user-nj1ei4is2h
@user-nj1ei4is2h 6 лет назад
Cпасибо за урок. Отдельный поклон за иконки :3
@denisgorelov3236
@denisgorelov3236 6 лет назад
Спасибо, рад что материал был полезен.
@vicont9089
@vicont9089 Год назад
Спасибо! Очень доступно и полезно.
@user-ls2tl2qn7l
@user-ls2tl2qn7l 5 лет назад
Здорово буду теперь учиться сам делать такие)
@_d_e_a_d_1_d_e_a_d_176
@_d_e_a_d_1_d_e_a_d_176 4 года назад
Денис поставте лайк чтобы я хвалиться перед друзьями! ))) каналу удачи и много много подписчиков
@Murlack
@Murlack 5 лет назад
спасибо большое за данное видео. Давно хотел научиться делать подобное меню
@user-ib8vd5is9d
@user-ib8vd5is9d 5 лет назад
Спасибо большое, отличный урок
@gamesplay9750
@gamesplay9750 6 лет назад
Спасибо большое! Все понятно и легко!
@skair_kz1447
@skair_kz1447 3 года назад
Очень отличный видео ! Спасибо
@FLATTYOU
@FLATTYOU 5 лет назад
Супер!Очень полезный урок.
@rusealgooglov6080
@rusealgooglov6080 6 лет назад
Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!
@user-zq2bq8yq9g
@user-zq2bq8yq9g Год назад
спасибо за урок ,очень понравилось !
@Relbick
@Relbick 5 лет назад
Я вам очень благодарен! Снимайте еще ;)
@denisgorelov3236
@denisgorelov3236 5 лет назад
Спасибо! Возможно скоро начну.
@labudydabudiproduction6248
@labudydabudiproduction6248 4 года назад
Спасибо огромное! Было очень ясно и полезно!
@verabratunova3434
@verabratunova3434 Год назад
Огромное вам спасибо! Все понятно!!!!
@Angry_Welder
@Angry_Welder 3 года назад
Крутецкое меню! Еще бы крутые анимации на кнопки.
@user-su3ef5cb8p
@user-su3ef5cb8p 6 лет назад
спасибо. полезно, эффективно и красиво =)
@sinaktenone9882
@sinaktenone9882 7 лет назад
Отлично видео, спс, ждем адаптива)
@kateshkurenko
@kateshkurenko 3 года назад
Спасибо за видео! Вы просто меня им спасли!!!
@stalker21able
@stalker21able 7 лет назад
Очень круто, спасибо
@veterok54
@veterok54 7 лет назад
Если бы ты сделал парочку макетов сайтов у себя на видеоуроках, разбил бы их на штук так 20 и за эти 20 уроков ты бы например запилил 2, 3 сайта разной сложности. От простого и легкого, к более сложному. Вот это было бы интересно, хотя так наверное каждый бы урок занимал по минут 20, но, лично для меня, это было бы интересно)
@denisgorelov3236
@denisgorelov3236 6 лет назад
Интересное предложение, спасибо. Появится лишнее время возможно реализуем.
@bekzhanzulkashev5816
@bekzhanzulkashev5816 5 лет назад
@@denisgorelov3236 Ждем)
@user-tb8pb5es1f
@user-tb8pb5es1f 6 лет назад
Полезное видео! Наконец-то создал меню для сайта)
@user-so3eg1rw8l
@user-so3eg1rw8l 6 лет назад
Вообще годнота! Спасибо за видео! Наконец-то меню на nav-ах, а то все ролики бородатых годов
@user-rt6uw5gv1q
@user-rt6uw5gv1q 4 года назад
Спасибо тебе огромное очень выручил!!! сделал через opacity а не через display:block; получилась плавней)
@user-er4bm4hk6w
@user-er4bm4hk6w 3 года назад
Обалденный канал! Спасибо за контент! Для начинающих самое ТО! 100ЛАЙК!
@Viktorres1
@Viktorres1 5 лет назад
Одним словом - крутяк! Теперь адаптацию под мобильные буду смотреть. Subscribe+)
@alastar1234
@alastar1234 6 лет назад
Дэнчик спасибо большое за твой труд !
@denisgorelov3236
@denisgorelov3236 6 лет назад
Не за что!
@TauLepton-od3zz
@TauLepton-od3zz 6 лет назад
Посоны, чем "ul li a" от "ul li > a" отличается? И почему не "ul > li > a"?
@user-sw5xd4zf3v
@user-sw5xd4zf3v 6 лет назад
очень круто, спасибо. попробую также ))
@antonivanov9555
@antonivanov9555 5 лет назад
Ооооочень круто! Спасибо!
@LeonidProgrammer
@LeonidProgrammer 4 года назад
Охренеть, а что так можно было?! Бомба.
@user-kx3vl5wz9i
@user-kx3vl5wz9i 4 года назад
Вообще круто! Спасибо огромное!
@user-iy9jo4tz3o
@user-iy9jo4tz3o 9 дней назад
Смотрю в 2024, урок очень помог, спасибо!
@user-zw9zl7lv1s
@user-zw9zl7lv1s 4 года назад
Спасибо. Хороший урок!
@oraclevb5430
@oraclevb5430 4 года назад
Молодец все доступно объяснил спасибо за урок
@nazarmarushkey4796
@nazarmarushkey4796 4 года назад
Пасибо, предельно ясно и просто.
@user-qh9jw8if1p
@user-qh9jw8if1p 3 года назад
Красава, респект тебе, еле успевал. ))
Далее
Learn Every CSS Selector In 20 Minutes
19:38
Просмотров 435 тыс.
Tutorial 😍 @elsarca #danilisboom #elsarca
00:16
Просмотров 987 тыс.
CSS Auto-Complete Hack? in Pycharm
2:57
How The Web Works - The Big Picture
12:25
Просмотров 496 тыс.