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

Поделиться
HTML-код
  • Опубликовано: 26 янв 2025

Комментарии • 667

  • @denisgorelov3236
    @denisgorelov3236  6 лет назад +14

    Полезные ссылки к уроку:
    ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p
    ► Уроки по FlexBox - bit.ly/2CYN8lo
    ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt

    • @ДанилЛитвин-п9ш
      @ДанилЛитвин-п9ш 6 лет назад +1

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

    • @ДанилЛитвин-п9ш
      @ДанилЛитвин-п9ш 6 лет назад

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

    • @davidsahakyan8790
      @davidsahakyan8790 6 лет назад

      скинь
      код

    • @timanderson324
      @timanderson324 6 лет назад +1

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

    • @timanderson324
      @timanderson324 6 лет назад

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

  • @mishalitvin6359
    @mishalitvin6359 7 лет назад +150

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

  • @mishasv1490
    @mishasv1490 6 лет назад +1

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

  • @oleksandrharkusha9404
    @oleksandrharkusha9404 7 лет назад +11

    Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +2

      Спасибо за комментарий, рад то уроки помогают.

  • @dreamer2978
    @dreamer2978 6 лет назад +1

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

  • @ВоваМир-э3з
    @ВоваМир-э3з 3 года назад

    День второй) Возьмите это и его туда а здесь вот так и этак)) Чёёёёёё. До этого видео я представления не имел о всём что говорит автор) Очень много гуглю, первое меню в моей жизни даётся тяжело. Познания в данной сфере на данный момент -100% ))
    Но мы не здаёмся, обязательно всё получиться) Всем удачи,не бросайте на пол пути)

  • @billyukrop1496
    @billyukrop1496 7 лет назад +3

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

  • @Бойправ-ж8ы
    @Бойправ-ж8ы 4 года назад +7

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

    • @hornyBanAn4ik
      @hornyBanAn4ik 3 года назад

      не совсем, сайт с иконами изменился и всё совсем не так как на видео

  • @clever_distr
    @clever_distr 4 года назад +2

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

  • @Muzaffar1987ful
    @Muzaffar1987ful 2 года назад

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

  • @НиколайБадулин-у4щ
    @НиколайБадулин-у4щ 6 лет назад +1

    Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.

  • @TauLepton-od3zz
    @TauLepton-od3zz 6 лет назад

    Посоны, чем "ul li a" от "ul li > a" отличается? И почему не "ul > li > a"?

  • @КириллАндреевич-п8ф

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

  • @paranoia-1994
    @paranoia-1994 4 года назад

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

  • @kinggiv1
    @kinggiv1 2 года назад

    люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!

  • @doskerprovokator7210
    @doskerprovokator7210 5 лет назад +1

    Идеально - кратко, понятно и по сути, качество записи на отлично!

  • @Эрмек.Султанов
    @Эрмек.Султанов 6 лет назад +4

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

  • @uszakow
    @uszakow 4 года назад

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

  • @_d_e_a_d_1_d_e_a_d_176
    @_d_e_a_d_1_d_e_a_d_176 5 лет назад +1

    Денис поставте лайк чтобы я хвалиться перед друзьями! )))
    каналу удачи и много много подписчиков

  • @it6706
    @it6706 7 лет назад +2

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

  • @alexryzhenkov271
    @alexryzhenkov271 6 лет назад +1

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

  • @KindCat21
    @KindCat21 5 лет назад +2

    Уровень знаний и подача материала впечатляет. Спасибо!

  • @bobretsoff
    @bobretsoff 6 лет назад +37

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

  • @МаринТолмач
    @МаринТолмач 6 лет назад +3

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

  • @filevav
    @filevav 7 лет назад +6

    Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)

  • @faizulla5838
    @faizulla5838 6 лет назад

    Денис, не обижайся, но это было уже гдето в 2012м... тогда появилось, даже сайт в котором можно было скачать менюшки на CSS ? гармошкой... выпаданием вниз , смещением вбок. ,по своему заказу, заполнив поля онлайн. Сложнее платно, что проще бесплатно.
    Но если есть спрос, то освещать тему естественно надо. Молодца. Лайк.

  • @oleksiirudenko1446
    @oleksiirudenko1446 5 лет назад

    сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто

  • @hiddenapproach4771
    @hiddenapproach4771 7 лет назад

    Спасибо добрый человек!За 7 минут видео я понял гораздо больше чем за 330 страниц книги Бена Хеника!На которую убил 4 дня...Я таки прямо в восторге!Буду смотреть дальше твои видео!А то натыкался на часовые видео других людей,толку мало было

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +2

      Такого рода комментарии очень приятно читать, понимаешь что потраченное время было не напрасно. Спасибо!!!

  • @ВладимирВячеславович-э3щ

    Видео о том как быстро автор умеет работать с CSS. Молодец!

  • @AlexsashkaSysoev
    @AlexsashkaSysoev 7 лет назад +4

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

    • @denisputria2376
      @denisputria2376 4 года назад

      😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl
      Assssssxxxxxxxc xmcv1waasscc b %

  • @bekzhanzulkashev5816
    @bekzhanzulkashev5816 6 лет назад

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

  • @ravabat5841
    @ravabat5841 5 лет назад +1

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

  • @funclub6927
    @funclub6927 5 лет назад

    Всё действительно быстро, и для понимающих людей полезно, мне как новичку немного трудновато так быстро следить за действиями, но думаю розебрусь

  • @ShocKKKKKKK
    @ShocKKKKKKK 7 лет назад +125

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

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +30

      Интересное предложение, спасибо. Появится лишнее время возможно реализуем.

    • @bekzhanzulkashev5816
      @bekzhanzulkashev5816 6 лет назад +3

      @@denisgorelov3236 Ждем)

  • @coffeemango7241
    @coffeemango7241 5 лет назад +1

    Подскажите пожалуйста, а какую программу лучше использовать для svg изображений?

  • @alexey6680
    @alexey6680 7 лет назад +1

    Супер. По поводу адаптации +++. Буду ждать с нетерпением.

  • @grandmacter9064
    @grandmacter9064 5 лет назад +1

    Я хочу узнать подробнее, о центровке иконки и текста через position: absolute.

  • @parkerparker9378
    @parkerparker9378 5 лет назад

    Покажите как сделать анимационную новогоднюю рамку на всю страницу и разместить анимационные гиф картинки в углах страницы. а также как отражать картинку по горизонтали и по вертикали ? Спасибо Вам !

  • @TolikM
    @TolikM 7 лет назад +33

    Хороший канал. Спасибо за все видео. Спокойно и понятно....
    Хауди хо правильно посоветовал...👍

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +13

      Спасибо, Хауди хо от меня привет ).

  • @OxoTHuK13
    @OxoTHuK13 6 лет назад

    Денис, спасибо за замечательные уроки! Нашел Ваш канал по рекомендации от Хауди Хо и не пожалел.
    Небольшая поправочка: "Awesome" произносится как "Осом" (ударение на первый слог). )))

  • @ДмитроГорбатиков
    @ДмитроГорбатиков 5 лет назад +1

    Очень понравился background кнопок в конце ролика, надо будет попробовать :)

  • @DorozhkoOleg
    @DorozhkoOleg 6 лет назад

    >>Списки отобразим по горизонтали при помощи display: flax, и делаем его по центру:
    Опечатку нашел на сайте, страница этого урока. Автор, ты все равно мегакрут. Сейчас меню делаю. У тебя учусь.

  • @ДаниилГуревич-г8з
    @ДаниилГуревич-г8з 5 лет назад +3

    Великолепный урок! Спасибо большое автору!

  • @bagafree
    @bagafree 5 лет назад +1

    Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается

  • @bektendosmambetov938
    @bektendosmambetov938 5 лет назад +1

    Спасибо за уроки, смотрю твои видео и просто наслаждаюсь

  • @TheEBPO
    @TheEBPO 2 года назад

    Отличный урок, спасибо. Вопрос... Как сделать плавное появление выпадающего меню?

  • @ІванМись-о5с
    @ІванМись-о5с 7 лет назад

    Переглядав багато різного відео по даній темі це вражає простотою зрозумілістю і ефективністю!!!

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад

      Спасибо, это то что я добиваюсь.

  • @ЭдЛесничий-щ8т
    @ЭдЛесничий-щ8т 7 лет назад +1

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

  • @TheAlexmaxakt
    @TheAlexmaxakt 6 лет назад +1

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

  • @Smyth47466
    @Smyth47466 6 лет назад

    Что за тег я никак не пойму? Как курсив может вставлять иконки? И что значит запись в css,
    в строчке 20: .dws-menu > ul li a? Почеу li и a подряд записываются?

  • @АлешаДрыкалик
    @АлешаДрыкалик 7 лет назад +3

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

  • @tommy.angeles
    @tommy.angeles 8 месяцев назад

    Смотрю в 2024, урок очень помог, спасибо!

  • @АлександрАфонин-я8щ

    Вообще годнота! Спасибо за видео! Наконец-то меню на nav-ах, а то все ролики бородатых годов

  • @web-eea
    @web-eea 6 лет назад +1

    Красавчик! Все четко, без воды! Уважаю!

  • @blinkonstarforge7904
    @blinkonstarforge7904 4 года назад

    Подскажите пожалуйста, как сделать плавное появление списков при наведении, например на "продукция"?

  • @Viktorres1
    @Viktorres1 6 лет назад +1

    Одним словом - крутяк! Теперь адаптацию под мобильные буду смотреть. Subscribe+)

  • @yaroslavmasanov3929
    @yaroslavmasanov3929 5 лет назад

    Здравствуйте . Сделайте видео как сделать фоновую картинку с кнопками

  • @ПерминовКирилл-я4д
    @ПерминовКирилл-я4д 5 лет назад +1

    Супер!!! впервые я понял ВСЕ! От и до. Респект!

  • @makskyciny5622
    @makskyciny5622 3 года назад

    Очень крутой урок! Автор молодчага👌

  • @avtomono52
    @avtomono52 6 лет назад +2

    просто идеально, благодарю))) автору респекс.

  • @Free_474
    @Free_474 5 лет назад

    Супер, спасибо!! Сделайте, пожалуйста, видео про горизонтальную прокрутку элементов с кнопками

  • @maximplyashchenko5610
    @maximplyashchenko5610 5 лет назад

    Что надо изменить для того, что бы при наведении, допустим, на кнопку "главная", раскрывалась не только эта ветка, а всё дерево?

  • @belligalaton9091
    @belligalaton9091 2 года назад

    Всё круто о6ъяснил и показал.
    Огромное спаси6о. ^_^
    Хочу уточнить, будут ли кнопки адаптивными, если там указана точная ширина?

  • @sergeigregul1546
    @sergeigregul1546 7 лет назад +1

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

  • @TheStwot
    @TheStwot 7 лет назад

    Автор турбофлеш! я в шоке как ты так быстро все делаешь... для меня это уровень бог...

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +2

      Перестань, я не хочу растягивать на пол часа и больше то, что можно рассказать за 10 - 15 минут, когда это понимаешь. Я ценю время тех людей, которые меня смотрят, а набор кода и все остальное - это просто готовый результат трудов, которым я посвящаю все свое свободное время.

    • @TheStwot
      @TheStwot 7 лет назад +2

      я месяца 2 активно учу html и css, для меня сейчас это мечта, такая скорость кодинга.

    • @vladivostok8922
      @vladivostok8922 7 лет назад

      скорость кодинга) ты не заметил что видео приобретает скорость x2-x4 время от времени

  • @rusealgooglov6080
    @rusealgooglov6080 7 лет назад +1

    Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!

  • @_Fantom_.
    @_Fantom_. 5 лет назад +2

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

  • @Caesar33106
    @Caesar33106 6 лет назад

    С помощью какой программы устанавливается синхронизация между изменением кода и одновременно появлением это на странице

  • @andrewgrechukh3139
    @andrewgrechukh3139 2 года назад

    Дуже вдячний за це відео!!! Щей навчився як швидше писати код

  • @НезалежнийЛьвівянин
    @НезалежнийЛьвівянин 4 года назад +1

    Даже не знаю, увидишь ли ты это... Но. Я не совсем давно в галузи CSS и никак не пойму чем отличается запись .dws-menu > ul li от .dws-menu ul li. И вообще, какую функцию выполняет этот символ ">"?

  • @span4ev
    @span4ev 7 лет назад +1

    Как всегда туториалы высший пилотаж) спасибо.

  • @ЕвгенийСидельников-г5с

    Cпасибо за урок.
    Отдельный поклон за иконки :3

    • @denisgorelov3236
      @denisgorelov3236  6 лет назад

      Спасибо, рад что материал был полезен.

  • @olgamazurenko8142
    @olgamazurenko8142 6 лет назад

    Очень понравился урок. Все очень доступно и четко. Спасибо!

  • @ИгнатБахтаров
    @ИгнатБахтаров 3 года назад

    Скажите пожалуйста, как вы сделали второе окошко в котором сразу идет отображение?

  • @СергейКоноплицкий-ц3я

    Спасибо тебе огромное очень выручил!!! сделал через opacity а не через display:block; получилась плавней)

  • @denisgorelov3236
    @denisgorelov3236  7 лет назад +15

    У данного оформления выпадающего меню можно изменить с легкостью дизайн, также адаптировать под разные устройства экрана не составит труда.
    #2 ЧАСТЬ урока тут - ruclips.net/video/tRoszGUp5Sg/видео.html (Адаптация под мобильные устройства)

    • @it6706
      @it6706 7 лет назад +2

      *DWS TV делай прожолжение!*

    • @FlexDrayv
      @FlexDrayv 7 лет назад +3

      С удовольствием бы посмотрел продолжение по адаптации этого меню под разные разрешения экранов и с последующем переходом в мобильное меню - СПАСИБО !!!

    • @denisgorelov3236
      @denisgorelov3236  7 лет назад +3

      Ну, каждому свое, просто js немного капризнее, за то там более проще все реализовать. По загрузке все зависит от содержания файла и его функционала, при помощи консоли в браузере можно сравнить эти варианты, но я думаю особой разницы там не увидишь по крайне мере по данному функционалу. Каждый разработчик выбирает тот вариант в котором лучше всего ориентируется.

    • @1ux443
      @1ux443 7 лет назад

      А как скачивать иконки?

    • @denisgorelov3236
      @denisgorelov3236  6 лет назад

      В данной статье я описываю как это сделать bit.ly/2nHR4lt

  • @Iochvlog
    @Iochvlog 6 лет назад

    Я вам очень благодарен! Снимайте еще ;)

    • @denisgorelov3236
      @denisgorelov3236  6 лет назад +1

      Спасибо! Возможно скоро начну.

  • @MrSimpotic
    @MrSimpotic 2 года назад

    Спасибо за урок!! Отлично! Но сейчас не дает скачать Font Awesome архив, к сожалению - нет ли ссылки где-то в облаке? Я начинающий

  • @zhakelee6432
    @zhakelee6432 7 лет назад +4

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

  • @Виталий-ж9ц4с
    @Виталий-ж9ц4с 4 года назад

    Отличный ролик! Но возник вопрос: выпадающее меню размещается за анимированной картинкой ..... какими средствами исправить, в каком направлении копать?

  • @kerya2858
    @kerya2858 5 лет назад

    Подскажите пожалуйста, как здесь реализовано автоматическое обновление страницы браузера чтобы видеть изменения на лету?

  • @FantazyEliott
    @FantazyEliott 7 лет назад

    Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !

  • @АлексейГундин-э9о
    @АлексейГундин-э9о 4 года назад +1

    Меню отличное, спасибо за урок!

  • @ВладимирБабинцев-ц2ж

    Спасибо большое, что выкладываете исходный код...

  • @АртурХвостик-о6ъ
    @АртурХвостик-о6ъ 6 лет назад

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

  • @inzoddex8312
    @inzoddex8312 5 лет назад

    Не проще ли было икноку и текст внутри li центровать флексом?

  • @maxbuyer98
    @maxbuyer98 7 лет назад +1

    Канал растет на "глазах"!

  • @konstantinbodnenko5842
    @konstantinbodnenko5842 5 лет назад

    а почему не срабатывает задержка при появлении - исчезновении выпадающих списков, так и не получилось transition установить на эти действия

  • @amberasena192
    @amberasena192 5 лет назад

    Здравствуйте. А скажите пожалуйста как сделать так чтобы как у Вас с левой стороны сразу отображался браузер?

  • @ivanivanov7494
    @ivanivanov7494 4 года назад

    Спасибо за урок.
    Реально Awesome!!!

  • @alexeikulikov2844
    @alexeikulikov2844 3 года назад

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

  • @Angry_Welder
    @Angry_Welder 4 года назад

    Крутецкое меню! Еще бы крутые анимации на кнопки.

  • @АндрейГоляновский-х4й

    супер. Скажи, пожалуйста, как применить transition для других элементов. Например, есть 2 дива, при наведении на один, цвет другого должен плавно изменяться. В моем случае свойство transition не работает, иначе говоря, цвет меняется резко.

  • @dmitrybelyaev6286
    @dmitrybelyaev6286 4 года назад

    А если добавить к стилям вот такое
    .dws-menu>ul>li:hover {
    background: #454547;
    }
    .dws-menu>ul>li:hover>a {
    color: #fff;
    }
    то при перемещении курсора с родительского пункта первого уровня темная заливка не будет исчезать.

  • @RusFarFaz
    @RusFarFaz 5 лет назад

    а изначально без списка как такое реализовать ? не лучше ли?

  • @dbuzeninka8005
    @dbuzeninka8005 6 лет назад +1

    автор так понятно рассказал, что я прям хочу ему задонатить.

  • @khromenkov.V
    @khromenkov.V 3 года назад

    Респект 👍
    Очень хорошо и толково. Благодарю!

  • @ДенисНестеров-я6т
    @ДенисНестеров-я6т 5 лет назад +1

    Почему у меня подменю 3-го уровня убегает то вверх то в сторону?

  • @dabll0236
    @dabll0236 3 года назад

    что за мелодия на фоне? напоминает Love Me Like You Do

  • @widi2834
    @widi2834 6 лет назад +1

    Спасибо за годный урок теперь я умею делать меню!