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

2017 ж. 8 Сәу.
314 311 Рет қаралды

(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

    @denisgorelov3236@denisgorelov32366 жыл бұрын
    • Простите , у меня не выстраивается меню в ряд .Думал дело в display: flex; , но все равно ничего не выходит подскажите пожалуйста .

      @user-dc5sy1ug1h@user-dc5sy1ug1h5 жыл бұрын
    • Спасибо . Я выяснил в чем дело . У меня редактор дает баги . Пишу код- на странице ерунда , потом стираю его переписываю (или копирую и вставляю снова ) и все работает .

      @user-dc5sy1ug1h@user-dc5sy1ug1h5 жыл бұрын
    • скинь код

      @davidsahakyan8790@davidsahakyan87905 жыл бұрын
    • В выпадающем меню на пер пой кнопке левая граница толще чем на остальных (вернее она там двойная). Как исправить? pp.userapi.com/c850520/v850520621/5538b/ucuStvsuMWk.jpg

      @timanderson324@timanderson3245 жыл бұрын
    • Крч // border у всех элементов поставил одного цвета, а в // .dws-menu > ul li:first-child добавил строку // margin-left: -1px; в // .dws-menu li > ul li ul сделал // right: -153px; вместо 150. Вроде бы мелкие недочеты, но глаза мозолят. Теперь надо в выпадающем списке правую полосу поправить. Она в два раза толще левой. Еще градиент у меня при зуме иногда растаскивает кнопки. Поменял на один цвет. Не нашел как всё это исправить.

      @timanderson324@timanderson3245 жыл бұрын
  • Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!

    @mishalitvin6359@mishalitvin63597 жыл бұрын
  • Спасибо, прошло уже 4 года, а видео до сих пор актуально. Удачи.

    @user-ty6fq9os9k@user-ty6fq9os9k3 жыл бұрын
    • не совсем, сайт с иконами изменился и всё совсем не так как на видео

      @i3anan4ik86@i3anan4ik862 жыл бұрын
  • ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!

    @billyukrop1496@billyukrop14967 жыл бұрын
  • Отличный урок, спасибо большое) *Ждем вторую часть*

    @user-hs5hh2hl5j@user-hs5hh2hl5j7 жыл бұрын
  • Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)

    @filevav@filevav7 жыл бұрын
  • Здравствуйте Денис, хочу сказать что у вас очень интересные уроки, буду ждать (НОВЫХ) СПАСИБО :-)

    @user-dv8sl7xh7d@user-dv8sl7xh7d6 жыл бұрын
  • Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.

    @user-tp1sb6eo2b@user-tp1sb6eo2b5 жыл бұрын
  • Уровень знаний и подача материала впечатляет. Спасибо!

    @KindCat21@KindCat214 жыл бұрын
  • Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно! Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!

    @clever_distr@clever_distr3 жыл бұрын
  • Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!

    @oleksandrharkusha9404@oleksandrharkusha94046 жыл бұрын
    • Спасибо за комментарий, рад то уроки помогают.

      @denisgorelov3236@denisgorelov32366 жыл бұрын
  • Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!

    @user-cb2ui4cj8j@user-cb2ui4cj8j5 жыл бұрын
  • сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто

    @oleksiirudenko1446@oleksiirudenko14465 жыл бұрын
  • Великолепный урок! Спасибо большое автору!

    @user-zv6uq2cd1u@user-zv6uq2cd1u4 жыл бұрын
  • Идеально - кратко, понятно и по сути, качество записи на отлично!

    @doskerprovokator7210@doskerprovokator72105 жыл бұрын
  • Красавчик! Все четко, без воды! Уважаю!

    @web-eea@web-eea5 жыл бұрын
  • Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.

    @ravabat5841@ravabat58415 жыл бұрын
  • люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!

    @kinggiv1@kinggiv1 Жыл бұрын
  • Спасибо за уроки, смотрю твои видео и просто наслаждаюсь

    @bektendosmambetov938@bektendosmambetov9384 жыл бұрын
  • Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!

    @TheAlexmaxakt@TheAlexmaxakt5 жыл бұрын
  • Супер. По поводу адаптации +++. Буду ждать с нетерпением.

    @alexey6680@alexey66807 жыл бұрын
  • Так все быстро сказал, что я даже не успел запомнить))) Спасибо большое !! Все супер.

    @alexandrryzhenkov6917@alexandrryzhenkov69175 жыл бұрын
  • Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее

    @dreamer2978@dreamer29786 жыл бұрын
  • Очень понравился урок. Все очень доступно и четко. Спасибо!

    @olgamazurenko8142@olgamazurenko81425 жыл бұрын
  • Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!

    @mishasv1490@mishasv14905 жыл бұрын
    • Спасибо!

      @denisgorelov3236@denisgorelov32365 жыл бұрын
  • Всё чётко, ясно и по полочкам, лайк и подписка, продолжай делать гайды)

    @sergeigregul1546@sergeigregul15466 жыл бұрын
  • Очень интересные и познавательные уроки, молодец!

    @Romzec1@Romzec16 жыл бұрын
  • Спасибо еще раз за твой труд,буду с нетерпением ждать новые,смотреть и лайкать старые уроки.

    @AlexsashkaSysoev@AlexsashkaSysoev7 жыл бұрын
    • 😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl Assssssxxxxxxxc xmcv1waasscc b %

      @denisputria2376@denisputria23764 жыл бұрын
  • Отличный канал. побольше подписчиков тебе. ибо твой материал достоин внимания :)

    @user-os4yb9tg6w@user-os4yb9tg6w7 жыл бұрын
  • Канал растет на "глазах"!

    @user-wk9ue9sy8e@user-wk9ue9sy8e7 жыл бұрын
  • Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается

    @bagafree@bagafree4 жыл бұрын
  • Невероятно крутые уроки, спасибо тебе!

    @oce10t96@oce10t966 жыл бұрын
  • *Я посмотрел DWS TV многих комментарии лайкает,комментирует.Молодец общается с зрителями.Желаю тебе успехов в дальнейшем!*

    @it6706@it67067 жыл бұрын
  • просто идеально, благодарю))) автору респекс.

    @avtomono52@avtomono526 жыл бұрын
  • Супер!!! впервые я понял ВСЕ! От и до. Респект!

    @user-gk2tl9xz6p@user-gk2tl9xz6p4 жыл бұрын
  • Как всегда туториалы высший пилотаж) спасибо.

    @span4ev@span4ev6 жыл бұрын
  • Спапсибо за урок Денис! респект тебе. очень много в интеренете материалов, но ты обясняешь отлично! спасибо еще раз!

    @Muzaffar1987ful@Muzaffar1987ful Жыл бұрын
  • Очень крутой урок! Автор молодчага👌

    @makskyciny5622@makskyciny56222 жыл бұрын
  • Было великолепно, спасибо большое!!!

    @yourrise9280@yourrise92805 жыл бұрын
  • Спасибо за урок. Реально Awesome!!!

    @ivanivanov7494@ivanivanov74943 жыл бұрын
  • Спасибо. Отличный урок. Все предельно просто и понятно

    @BULBARASHGREEN@BULBARASHGREEN6 жыл бұрын
  • Спасибо! Очень доступно и полезно.

    @vicont9089@vicont9089 Жыл бұрын
  • Класс видео! Очень полезно, и понятно) Так сказать "Без лишних слов"))) Спасибо!!!

    @user-if9ft4we4x@user-if9ft4we4x5 жыл бұрын
  • Меню отличное, спасибо за урок!

    @user-yb9uf8uz8k@user-yb9uf8uz8k3 жыл бұрын
  • Огромное вам спасибо! Все понятно!!!!

    @verabratunova3434@verabratunova3434 Жыл бұрын
  • Спасибо за интересный и очень познавательный урок.. С меня лайк и подписка!

    @_Fantom_.@_Fantom_.4 жыл бұрын
  • Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !

    @FantazyEliott@FantazyEliott6 жыл бұрын
  • Спасибо большое за урок. Вы молодец!!!!!

    @user-im3jb5de6b@user-im3jb5de6b5 жыл бұрын
  • Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!

    @uszakow@uszakow3 жыл бұрын
  • Мужик люблю тебя только у тебя нашел выход из проблемы, которая ломала меня 2 недели

    @Obraveliss@Obraveliss3 жыл бұрын
  • Здорово буду теперь учиться сам делать такие)

    @user-ls2tl2qn7l@user-ls2tl2qn7l5 жыл бұрын
  • спасибо за замечательный выпуск)

    @ozmosis13777@ozmosis137777 жыл бұрын
  • Очень круто, спасибо

    @stalker21able@stalker21able7 жыл бұрын
  • Очень понравился background кнопок в конце ролика, надо будет попробовать :)

    @user-os4yk6hf4r@user-os4yk6hf4r4 жыл бұрын
  • Очень отличный видео ! Спасибо

    @skair_kz1447@skair_kz14473 жыл бұрын
  • Обалдеть, а че так можно было да? =) пипец, красавчик, давай еще =)

    @bobretsoff@bobretsoff6 жыл бұрын
  • Спасибо большое! Все понятно и легко!

    @gamesplay9750@gamesplay97506 жыл бұрын
  • Отлично видео, спс, ждем адаптива)

    @sinaktenone9882@sinaktenone98827 жыл бұрын
  • Спасибо большое, что выкладываете исходный код...

    @user-ho4xs6ty4z@user-ho4xs6ty4z4 жыл бұрын
  • Крутецкое меню! Еще бы крутые анимации на кнопки.

    @Angry_Welder@Angry_Welder3 жыл бұрын
  • Я вам очень благодарен! Снимайте еще ;)

    @Relbick@Relbick5 жыл бұрын
    • Спасибо! Возможно скоро начну.

      @denisgorelov3236@denisgorelov32365 жыл бұрын
  • Спасибо огромное! Было очень ясно и полезно!

    @labudydabudiproduction6248@labudydabudiproduction62484 жыл бұрын
  • спасибо за урок ,очень понравилось !

    @user-zq2bq8yq9g@user-zq2bq8yq9g Жыл бұрын
  • Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!

    @rusealgooglov6080@rusealgooglov60806 жыл бұрын
  • Видео о том как быстро автор умеет работать с CSS. Молодец!

    @user-rf4tu5bd4y@user-rf4tu5bd4y3 жыл бұрын
  • Ооооочень круто! Спасибо!

    @antonivanov9555@antonivanov95555 жыл бұрын
  • спасибо большое за данное видео. Давно хотел научиться делать подобное меню

    @Murlack@Murlack5 жыл бұрын
  • спасибо. полезно, эффективно и красиво =)

    @user-su3ef5cb8p@user-su3ef5cb8p6 жыл бұрын
  • Спасибо за годный урок теперь я умею делать меню!

    @widi2834@widi28346 жыл бұрын
  • Респект 👍 Очень хорошо и толково. Благодарю!

    @khromenkov.V@khromenkov.V3 жыл бұрын
  • Спасибо большое, отличный урок

    @user-ib8vd5is9d@user-ib8vd5is9d5 жыл бұрын
  • Красава, респект тебе, еле успевал. ))

    @user-qh9jw8if1p@user-qh9jw8if1p3 жыл бұрын
  • Слушай, ну просто топ!😀

    @user-ie9jk1rc9x@user-ie9jk1rc9x5 жыл бұрын
  • Вообще круто! Спасибо огромное!

    @user-kx3vl5wz9i@user-kx3vl5wz9i4 жыл бұрын
  • Круто! Благодарю)

    @tatyanaaverkova8378@tatyanaaverkova83783 жыл бұрын
  • Спасибо. Хороший урок!

    @user-zw9zl7lv1s@user-zw9zl7lv1s4 жыл бұрын
  • Супер!Очень полезный урок.

    @FLATTYOU@FLATTYOU5 жыл бұрын
  • Если бы ты сделал парочку макетов сайтов у себя на видеоуроках, разбил бы их на штук так 20 и за эти 20 уроков ты бы например запилил 2, 3 сайта разной сложности. От простого и легкого, к более сложному. Вот это было бы интересно, хотя так наверное каждый бы урок занимал по минут 20, но, лично для меня, это было бы интересно)

    @veterok54@veterok546 жыл бұрын
    • Интересное предложение, спасибо. Появится лишнее время возможно реализуем.

      @denisgorelov3236@denisgorelov32366 жыл бұрын
    • @@denisgorelov3236 Ждем)

      @bekzhanzulkashev5816@bekzhanzulkashev58165 жыл бұрын
  • Cпасибо за урок. Отдельный поклон за иконки :3

    @user-nj1ei4is2h@user-nj1ei4is2h6 жыл бұрын
    • Спасибо, рад что материал был полезен.

      @denisgorelov3236@denisgorelov32366 жыл бұрын
  • Отличный урок Денис. css сейчас много интересного позваляет делать (без того же js). Такие уроки нужны. Ждемс продолжения

    @maxxbf@maxxbf6 жыл бұрын
  • очень круто, спасибо. попробую также ))

    @user-sw5xd4zf3v@user-sw5xd4zf3v6 жыл бұрын
  • Благодарю, очень помог!

    @tatyanaaverkova8378@tatyanaaverkova83783 жыл бұрын
  • Спасибо за видео! Вы просто меня им спасли!!!

    @kateshkurenko@kateshkurenko3 жыл бұрын
  • отличный ролик, приятная музыка, смотрел в 2х кратном ускорении, дикция норм, инфа полезная, всего пару дней как начал лепить первый сайт, комент ради комента говорят за это бонусы дают блогерам

    @user-bv5oy6kh1w@user-bv5oy6kh1w4 жыл бұрын
  • Денис спасибо за хороший урок. Объяснил все четко и понятно, главное не спеша. Ждем еще такие уроки от вас. Еще хотел видеть от тебя в таком же темпе урок о PHP. Спасибо!

    @zhakelee6432@zhakelee64327 жыл бұрын
  • Полезное видео! Наконец-то создал меню для сайта)

    @user-tb8pb5es1f@user-tb8pb5es1f6 жыл бұрын
  • Все довольно хорошо, даже идеально.

    @frojeri8583@frojeri85835 жыл бұрын
  • Спасибо большое за урок.

    @user-eu7wh7nq2j@user-eu7wh7nq2j6 жыл бұрын
  • Спасибо Денис! Ты лучший

    @Kpsnbrd@Kpsnbrd5 жыл бұрын
  • Охренеть, а что так можно было?! Бомба.

    @LeonidProgrammer@LeonidProgrammer4 жыл бұрын
  • Выражаю огромную благодарность за это видео. Хоть я и новичок, но на это13-ти минутное видео я потратил 2,5 часа и у меня получилось.

    @bekzhanzulkashev5816@bekzhanzulkashev58165 жыл бұрын
  • Лучший канал !! ЛАЙК!

    @RUSGALEDON@RUSGALEDON7 жыл бұрын
  • просто шикарно , легко и нечего сложного , спасибо тебе от моего сайта

    @user-nn5zw3jd9n@user-nn5zw3jd9n4 жыл бұрын
  • Урок топ! Ты лутший!

    @griwopr6015@griwopr60153 жыл бұрын
  • Меню пригодилось. Спасибо.

    @tovjukov@tovjukov4 жыл бұрын
  • Дэнчик спасибо большое за твой труд !

    @alastar1234@alastar12346 жыл бұрын
    • Не за что!

      @denisgorelov3236@denisgorelov32366 жыл бұрын
  • Лайк и подписка. Автор молодец, очень подробное и доходчивое объяснение для начинающих.

    @alexeikulikov2844@alexeikulikov28443 жыл бұрын
  • Пасибо, предельно ясно и просто.

    @nazarmarushkey4796@nazarmarushkey47964 жыл бұрын
  • Молодец все доступно объяснил спасибо за урок

    @oraclevb5430@oraclevb54304 жыл бұрын
  • Огромное спасибо!

    @ivangessler9847@ivangessler98473 жыл бұрын
KZhead