Как сверстать выпадающее многоуровневое меню

Поделиться
HTML-код
  • Опубликовано: 8 май 2023
  • Кенты, верстка многоуровневого меню на повестке дня! Очень часто бывает такая вечеринка, когда есть многостраничный сайт, и заказчик хочет впихнуть туда всю историю своей жизни. Тут без многоуровневого меню не обойтись! В этом видео вы научитесь это делать и вычеркнете эту задачу со списка "Надо бы разобраться"
    Мой курс по верстке:
    from0to1.com.ua/
    Телеграм канал - t.me/from0to1com
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

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

  • @AlexLee-do4min
    @AlexLee-do4min Год назад +12

    Вадим, ты супер!
    Иногда включаю твои видосы просто для наслаждения и отдыха. Твоё общение со зрителем само по себе доставляет расслабуху и живой кайф!
    Благодарю за твой труд - он приносит людям пользу!

  • @onlydropped6479
    @onlydropped6479 Год назад +13

    Как давно я ждал такой урок. Вадим, спасибо!

  • @movieclips4848
    @movieclips4848 Год назад +10

    Продолжайте делать такие мини уроки

  • @user-sv7us6sq2f
    @user-sv7us6sq2f Год назад +5

    Спасибо за урок, думаю многим понравился такой формат , очень позновательно . Еще хотим подобные интересные фишки !

  • @drawusoon
    @drawusoon Год назад +5

    Блин Вадос, выздоравливай, по голосу слышно что не всё будь здоров, ты там давай не болей дружище!

  • @serkilovtech
    @serkilovtech Год назад +1

    ты как отец, лучшая подача материала!! Продолжай в том же духе

  • @zhannavasylievasandshow5129
    @zhannavasylievasandshow5129 9 месяцев назад

    Спасибо за урок, отличная подача информации 👍

  • @user-xi1gj4ju9f
    @user-xi1gj4ju9f Год назад +2

    Вадос выздоравливай✊ Спасибо большое за контент

  • @user-kh7fv5rn1g
    @user-kh7fv5rn1g Год назад +4

    Я бы еще добавила стрелочку тем li, в которых есть подменю . а так урок супер понятный, беру на заметку 👍

  • @old_dio
    @old_dio Год назад +1

    Спасибо за контент, очень полезно

  • @vimvexvimvex8780
    @vimvexvimvex8780 Год назад +1

    Автоматом уже лайк до просмотра ну и Спасибо конечно! Здоровья и благополучия.

  • @Clever_Web-sites
    @Clever_Web-sites Год назад

    Спасибо, актуально для меня, канал находка )

  • @dimondimonov6417
    @dimondimonov6417 Год назад +5

    Есть вечеринка. Кокрас мне это нужно)))

  • @BEKS705
    @BEKS705 Год назад

    Вадос, огромное спасибо за видос!!!!!!!!!!!! Много времени провел в поисках верстки выпадающего меню....
    Все понятно, просто и доступно, а самое главное что без лишних замарочек и качелей.
    И в продолжении темы хотелось бы посмотреть адаптив к этому меню!!!!
    Еще раз спасибо за видос!!! Очень ждал его!

  • @user-sq9pf4qq8p
    @user-sq9pf4qq8p Год назад +7

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

    • @vadymprokopchuk
      @vadymprokopchuk  Год назад +6

      та я вот смотрю по коментам что многие хотят

    • @user-kf6nh7cq3t
      @user-kf6nh7cq3t 7 месяцев назад

      @@vadymprokopchuk в мобилке без js не обойтись?

  • @technic_and_programming
    @technic_and_programming Год назад +2

    Спасибо большое

  • @natashawebconstanta777
    @natashawebconstanta777 Год назад

    Благодарю!!! Это огонь!! С вашей вечеринкой и адаптив хорошо идёт (если чуток поколдовать))) О, боги... я сделала это ... Спасибо =)

  • @sychpetr8394
    @sychpetr8394 Год назад +1

    Годный контен спасибо +++.

  • @VladimirOnokhov
    @VladimirOnokhov Год назад

    thanks for the lesson!

  • @felion111
    @felion111 Год назад

    Отличный ролик!

  • @Guy_161
    @Guy_161 Год назад +2

    Спасибо👍

  • @croshpin
    @croshpin Год назад

    ШЕДЕВРРРРР!!!

  • @movieclips4848
    @movieclips4848 Год назад +1

    Как всегда топ

  • @user-qn9mb7ex7b
    @user-qn9mb7ex7b Год назад +2

    Даёшь видос по шаблонизаторам HTML! подробный, было бы здорово! Классный видос!

  • @fakesega6730
    @fakesega6730 7 месяцев назад

    Вадос выручает как никогда)

  • @MonteCrush.
    @MonteCrush. Год назад +4

    Веселуха начнётся когда это все надо будет адаптировать для мобилок))

    • @vadymprokopchuk
      @vadymprokopchuk  Год назад

      та мы на все способны =)

    • @MonteCrush.
      @MonteCrush. Год назад +1

      ​@@vadymprokopchuk Запиши видос🙃

  • @TamaraNikolaevna
    @TamaraNikolaevna Год назад +1

    Вадим, большое спасибо! Всё понятно. Давно подписана на вашу страницу. А что надо сделать, чтобы при открытии ссылок меню было видно какая ссылка открывает следующее подменю? Если надо добавить стрелку, то как это написать?

  • @user-sf7lz8fn4r
    @user-sf7lz8fn4r Год назад +1

    Спасибо, не приходилось верстать такие менюшки, теперь буду знать такой принцип.
    Если знаешь про Foundation Zubr, мне было бы интересно посмотреть как ты сверстаешь простой лендинг

  • @mefioz2397
    @mefioz2397 Год назад +1

    спасибо дружище 👍
    вот вы бы показали бы еще про vue 😎 верстка вещь лёгкая, база есть да и опыт а вот вьюшка уже вещь интересная

  • @Francija-Bez-Rozovyx-Ochkov
    @Francija-Bez-Rozovyx-Ochkov Год назад

    Спасибо друг за очередную годноту! Благодаря твоим видео, я могу уже простенькие сайты открытки делать. По чуть чуть иду к нмеченной цели Верстальщика !

    • @IvanIvanov-ps5iz
      @IvanIvanov-ps5iz Год назад

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

    • @Francija-Bez-Rozovyx-Ochkov
      @Francija-Bez-Rozovyx-Ochkov Год назад

      @@IvanIvanov-ps5iz пол года учусь по видео в ютубе, нехватает времени из-за работы, так бы был бы лучше эффект в обучении

  • @xeder2932
    @xeder2932 Год назад

    спасибо)👍

  • @vladmvp8140
    @vladmvp8140 Год назад

    Топ контент! Дякую 👍

  • @kubris.developer
    @kubris.developer 7 месяцев назад

    Вадим, спасибо, всё чётко, как всегда! Что за настройки у EMMET-а, что он разворачивает список построчно?

  • @veterok54
    @veterok54 Год назад +3

    Не хватает адаптива(
    В данных блоках адаптив сложный, а не десктоп

  • @semen_spider
    @semen_spider Год назад +3

    Вадос ти Бог! 💪💪💪👍👍👍

  • @user-vr4ps7do2u
    @user-vr4ps7do2u Год назад

    Класс

  • @Pod_Pro_0
    @Pod_Pro_0 Год назад +5

    А можешь пожалуйста сделать видео про бургер меню
    Я тебя очень сильно прошу я только твои ролики понимаю

    • @natalia_0729
      @natalia_0729 Год назад

      Бургер меню, но многоуровневое, было бы круто

    • @dimondimonov6417
      @dimondimonov6417 Год назад

      На марафоне есть у него бургер меню как делать

  • @constyak9031
    @constyak9031 Год назад

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

  • @movieclips4848
    @movieclips4848 Год назад +7

    Сделайте серию уроков как это сделать например accordion, popup, переключения фона на сайте

    • @MelkoR4111
      @MelkoR4111 Год назад

      таких видео навалом) у Вадима на канале он много раз делал

  • @st.wander4053
    @st.wander4053 Год назад +1

    Буквально 2 дня назад ломал голову с многоуровневым списком. Много что не получалось сделать, по итогу сделал на тяп ляп*( Но сейчас, смотря видос, рили разобрался

    • @246Dron
      @246Dron 7 месяцев назад

      Интересно как у тебя в мобильной версии работает многоуровневое меню

    • @st.wander4053
      @st.wander4053 7 месяцев назад

      @@246Dron да никак) в проекте были свои сложности, в итоге вообще пришлось все на вордпресс пересаживать, так что менюшка вообще похерилась😭 но эт давно было, даже и вспоминать мучения не хочется

  • @VladimirSalygin
    @VladimirSalygin Год назад +1

    Спасибо! адаптив будет?

  • @user-vj3cu3wv9l
    @user-vj3cu3wv9l Год назад

    кстати я тоже заболел) выздоравливай

  • @fedordostoevskiy4209
    @fedordostoevskiy4209 Год назад +2

    Вадим, очень бы хотел с тобой работать! Прикольный ты мужик. 👍

  • @user-fl1pk6jf9f
    @user-fl1pk6jf9f Год назад

    Спасибо Амбассадорам HTML за видео.

  • @kharisovruslan5523
    @kharisovruslan5523 Год назад

    👍👍👍

  • @kerusdc8322
    @kerusdc8322 Год назад +1

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

  • @igorkroshkin9354
    @igorkroshkin9354 Год назад +1

    угу, меню работает - а что будет на мобильных? КАК оно будет работать?

  • @fobianka2131
    @fobianka2131 11 месяцев назад

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

    • @fobianka2131
      @fobianka2131 11 месяцев назад

      решила, может кому понадобится, в .topmenu li:hover > .submenu надо прописать position: static; Не знаю правильно ли, но мне помогло))

  • @natalialiakhovych
    @natalialiakhovych Год назад

    Кєнт топчік 😄

  • @wilezar4835
    @wilezar4835 Год назад

    пока нет времени посмотреть, но я перемотал, и судя по всему здесь вообще без адаптива. Может было сказано что-нибудь по этому поводу?

  • @bohdanbatsenko4843
    @bohdanbatsenko4843 Год назад

    На этой вечеринке должна была зажигать ЖС и Мобилочка. Бургер также, как модный перец и гвоздь программы. Они вместе должны хорошо танцевать клубняк. Менюшечка ведь на мобиле должна работать

  • @MelkoR4111
    @MelkoR4111 Год назад +1

    анимация прикольная, но на телефонах и тачпадах все это не работает, нужно делать по клику.

  • @sartjhon3300
    @sartjhon3300 6 месяцев назад

    Вроде бы и нормально но.... Что с адаптивом, как это работает на мобильных?

  • @BMikel
    @BMikel 11 месяцев назад

    Вадос есть дельное предложение. Вместо примитивных макетиков, сверстать что-нибудь на уровень выше. Я о чем. Многоуровневое мега меню, с адаптивом. Чтоб все схлопывалось и работало на мобиле. Точнее, целый хедер. На пример, как в интернет магазах (розетка, фокстрот, комфи, амазон и т д). Там тебе и каталог, и блог с превьюшками статей. Крч это будет агонь. Сейчас такого нигде нет на БТ.

  • @user-nn9qy1yh3s
    @user-nn9qy1yh3s 2 месяца назад +1

    шо за тема редактора ?

  • @_s1bga8
    @_s1bga8 4 месяца назад

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

  • @user-nn9qy1yh3s
    @user-nn9qy1yh3s Месяц назад

    на сайті кнопка оплатити працює а задати питання ні )))

  • @dimondimonov6417
    @dimondimonov6417 Год назад

    А что с голосом?

    • @Blondguy12
      @Blondguy12 Год назад

      Наверное заболел

    • @dimondimonov6417
      @dimondimonov6417 Год назад

      @@Blondguy12 Наверно! У нас щас погода неактив

    • @vadymprokopchuk
      @vadymprokopchuk  Год назад

      простуда наверное, кто его знает)

  • @246Dron
    @246Dron 7 месяцев назад

    Совершенно не практичный пример. Так как нет мобильной версии. Текущая верстка поплывёт в телефоне. Нужна другая разметка. Такая только для компа сгодится, но у нас же 99.9 процентов имеют две версии сайтов: комп и мобилка

  • @pipajob
    @pipajob Год назад

    Очень хорошее видео, жду подобные видео.

  • @yura9067
    @yura9067 Год назад +2

    Перший

  • @user-lf6fk1fm6r
    @user-lf6fk1fm6r 6 месяцев назад

    Это урок понять сложно подача конечно не очень,с position в li как это относиться не чего не поймешь.

  • @user-fd5le5bx9j
    @user-fd5le5bx9j Год назад

    Красава, Вадос-Вадос!)))

  • @Himera1983
    @Himera1983 11 месяцев назад

    почему display : flex ; не сработал ? в строчку не встали

  • @user-nv5ec9ch8q
    @user-nv5ec9ch8q Год назад

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

  • @beatcustom
    @beatcustom Год назад

    В классе .topmenu нужно было дать падинг чтобы сработвло

    • @beatcustom
      @beatcustom Год назад

      Внутри этого класса текст выравнивается по паддингу

    • @beatcustom
      @beatcustom Год назад

      4:51