Выпадающее меню на чистом HTML & CSS шаг за шагом || DropDown menu using HTML & CSS step by step

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ธ.ค. 2024

ความคิดเห็น • 226

  • @topchiydev
    @topchiydev  29 วันที่ผ่านมา

    🔗 Курс Flex Box CSS на образовательной платформе Udemy: www.udemy.com/course/css-flexbox-layout-course

  • @Alex-ux4dw
    @Alex-ux4dw ปีที่แล้ว +18

    Огромное спасибо, это видео как бы подводит итог всем знаниям, которые накопились в голове)))

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста 👍

  • @Aleksey-prosto-Aleksey
    @Aleksey-prosto-Aleksey ปีที่แล้ว +5

    Большое спасибо я искал этот список меню очень долго, и попадалось все время не то в Гугле, а зашёл в Ютуб и сразу же нашел что нужно, ещё раз большое спасибо

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста 🙂

  • @uismax
    @uismax 5 หลายเดือนก่อน +2

    Классное, полезное видео. Для начала обучения и понимания, лучшее на мой взгляд. Header с которого больше года назад, началось знакомство с каналом Дмитрия, как быстро время летит. Очень часто возвращаюсь к этому ролику. Сегодня это уже другой вид, на канале много обновлений, но основа остаётся неизменной. Удачи.

    • @topchiydev
      @topchiydev  5 หลายเดือนก่อน

      Спасибо за обратную связь)

  • @DeadNnarri
    @DeadNnarri ปีที่แล้ว +3

    Дружище, спасибо за работу, ты лучший!

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста)

  • @daniyareq
    @daniyareq ปีที่แล้ว +6

    Отличный урок.Большое спасибо!!!

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста 🙂

    • @Vlad_010
      @Vlad_010 6 หลายเดือนก่อน

      это не урок.

  • @samvelzargaryan3559
    @samvelzargaryan3559 11 หลายเดือนก่อน +2

    Огромное спасибо дядь, всегда хотел узнать как это делается, и только ты помог)) Лайк и подписка

    • @topchiydev
      @topchiydev  11 หลายเดือนก่อน +1

      Пожалуйста)

  • @vicont9089
    @vicont9089 ปีที่แล้ว +3

    Молодец! Есть определенная новизна. Спасибо!

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Спасибо)
      Рад что понравилось!

  • @NurMi-vh1tf
    @NurMi-vh1tf 8 หลายเดือนก่อน +1

    Отличный урок. Ты лучший, спасибо.

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Пожалуйста)

  • @yano.seylee
    @yano.seylee ปีที่แล้ว +1

    Благодарю, за урок и понятное объяснение!

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Спасибо за обратную связь)

  • @эрланнурманбетов-щ5ы
    @эрланнурманбетов-щ5ы ปีที่แล้ว

    ну ты Гигант брат. Спасибо за урок. Дай бог высокой уровен знаний. Тем кто ишет знание, а тебя всех благ! HTML CSS JavaScript.

  • @natashawebconstanta777
    @natashawebconstanta777 ปีที่แล้ว +2

    Благодарю!! Это огонь!! Отдельное спасибо за сущности ))) но я прописала другую, более нежную - blacktriangledown;, я ж дизайнер ))) Иду смотреть у вас адаптивность для этого меню. Благодарю =)

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста)
      Рад что все понравилось 👍

  • @mr.petrucho8809
    @mr.petrucho8809 ปีที่แล้ว +2

    спасибо большое, очень хорошее видео получилось!!! :)

  • @92daa74
    @92daa74 4 หลายเดือนก่อน +1

    Класс, вижу что есть куда расти

    • @topchiydev
      @topchiydev  4 หลายเดือนก่อน

      Да, развитие это бесконечный путь 👍

  • @phpstudy8625
    @phpstudy8625 8 หลายเดือนก่อน +2

    Лучший !!!

  • @doctorspeed3102
    @doctorspeed3102 ปีที่แล้ว +2

    Отличное видео! Спасибо большое, очень помогли!

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста)

  • @Melonguy_132
    @Melonguy_132 ปีที่แล้ว +2

    супер, благодарю за видео

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста)

  • @dansyz80
    @dansyz80 11 หลายเดือนก่อน +1

    Love your: «эйч-рэф» ❤😂❤

  • @pip_install7496
    @pip_install7496 10 หลายเดือนก่อน +2

    А если на сайте уже есть списки, то мы их сломаем выделением ко всему, то есть * {}. Как обратиться именно к заголовку чтобы только там убралось подчеркивание и нумерование? Пишу header {}, не работает

    • @topchiydev
      @topchiydev  10 หลายเดือนก่อน +1

      Приветствую!
      Да, все верно универсальный селектор * уберет у всех списков маркеры.
      Попробуйте дочерний селектор использовать, например header > список (ul) или к ссылкам (a) и затем {list-style: none; text-decoration: none;} должно сработать.

  • @noobsslayer7520
    @noobsslayer7520 ปีที่แล้ว

    Чертов гений) спасибо за очень понятный ролик) лайкусь

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста 🙂

  • @kudaibergenov03
    @kudaibergenov03 ปีที่แล้ว

    Огромное спасибо, Мужик

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста 🙂

  • @sotnik350
    @sotnik350 ปีที่แล้ว

    Спасибо большое, очень доступно и понятно

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста 👍

  • @Anna07081987
    @Anna07081987 10 หลายเดือนก่อน

    Дуже зрозуміле видео. Дякую

    • @topchiydev
      @topchiydev  10 หลายเดือนก่อน

      Будь ласка)

  • @НикитаКомолых-д4ь
    @НикитаКомолых-д4ь ปีที่แล้ว +4

    Спасибо! Отличное видео! А можешь сделать код или показать как это меню применить для всех страниц?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Рад что понравилось видео)
      На днях сделаю видео о том, как сделать переход по ссылке. Например: нажимаете на HTML и переходите на страницу с блоками о HTML.

    • @topchiydev
      @topchiydev  ปีที่แล้ว +2

      th-cam.com/video/BDWbRZP6wm4/w-d-xo.html

  • @Роман-б4б2г
    @Роман-б4б2г 4 หลายเดือนก่อน

    Спасибо!

    • @topchiydev
      @topchiydev  4 หลายเดือนก่อน

      Пожалуйста)

  • @СоломонФридман-с2г
    @СоломонФридман-с2г ปีที่แล้ว +1

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Приветствую!
      Скорей всего не добавили background-repeat: no-repeat;
      Вот как должно быть:
      body {
      width: 100%;
      height: 100vh;
      background: url(image);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      }

    • @СоломонФридман-с2г
      @СоломонФридман-с2г ปีที่แล้ว

      @@topchiydev Ещё такой вопросик, я вместо фона добавил видео, растянул как мне надо, теперь хочу под видео добавлять дальше тексты, контейнеры, растягивать по высоте, но когда я добавляю например фоттогалерию и хочу дальше продолжать писать текст у меня фотки не до конца открываются он у меня не прокручивает вниз даже, может стоит фиксированный размер страницы? вот скриншот - i2.paste.pics/1f41422c58f54f6b8d444cb114fbe306.png

  • @АлёнаПортретова
    @АлёнаПортретова 8 หลายเดือนก่อน

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

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Приветствую!
      Оставляю ссылку на исходный код: surl.li/etlmm

  • @denveriogrizzly4722
    @denveriogrizzly4722 ปีที่แล้ว +1

    Спасибо, полезное видео.
    Если бы еще адаптив показал, вообще цены не было бы.

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста!
      Вот адаптив: th-cam.com/video/TqoTPUFllR4/w-d-xo.html

  • @unionjack408
    @unionjack408 ปีที่แล้ว

    Огромная благодарность за видео. Невероятно помогли. Есть вопрос, а возможно ли сделать кнопки меню в виде таблицы с тремя столбцами, где кнопка "Главная" будет занимать 3 ячейки? Еще раз благодарю

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Пожалуйста)
      На счет кнопок, не совсем понимаю как это должно выглядеть, но в целом думаю, что можно так сделать.

  • @СергейТоропыгин-т7н
    @СергейТоропыгин-т7н 14 วันที่ผ่านมา

    Добрый вечер! На RUTUBE не планируете? TH-cam тормозит постоянно.

    • @topchiydev
      @topchiydev  14 วันที่ผ่านมา

      Приветствую!
      Нет.

    • @СергейТоропыгин-т7н
      @СергейТоропыгин-т7н 14 วันที่ผ่านมา

      @topchiydev Понял, спасибо! Жаль, очень доступно объясняете!

    • @topchiydev
      @topchiydev  14 วันที่ผ่านมา

      Спасибо 👍

  • @MrVarkom
    @MrVarkom ปีที่แล้ว

    ема крутяк

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Спасибо 🙂

  • @EldarDF1
    @EldarDF1 5 หลายเดือนก่อน

    Спасибо огромное, очень полезное видео, правда появился вопрос, можно ли сделать этот процесс более плавнее?

    • @topchiydev
      @topchiydev  5 หลายเดือนก่อน

      Приветствую!
      Пожалуйста)
      Вы имеете ввиду более плавное открытие выпадающего меню или более детальное объяснение?
      Если первое тогда можете использовать свойство transition - это свойство отвечает за плавные переходы, если второе можете посмотреть еще это видео: th-cam.com/video/V29Jysbuzus/w-d-xo.htmlsi=iEELB4E_FjNjGQbN

  • @ИванТюников-д3е
    @ИванТюников-д3е ปีที่แล้ว

    Отличный урок, но строить длинную цепочку вложенных селекторов затея не ice. Я присвоил вложенным тегам ul классы и описывал стили исходя из этого. Получилось в лучшем виде. А в остальном всё хорошо.

  • @upwlqwp
    @upwlqwp ปีที่แล้ว

    Ну и заморочился ты. Классно получилось

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Спасибо)
      Рад что понравилось 👍

    • @cherepashki
      @cherepashki ปีที่แล้ว

      mi ban stacvuma ?)P

  • @your_brother5927
    @your_brother5927 11 หลายเดือนก่อน

    Спасибо помог!

    • @topchiydev
      @topchiydev  11 หลายเดือนก่อน

      Пожалуйста)

  • @dmitry.w3b
    @dmitry.w3b ปีที่แล้ว

    5:21 На этом этапе у меня ссылки сместились под Logo. Вроде всё точь в точь делаю

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Проверьте разметку, возможно logo размещается внутри тега nav из-за этого такое размещение.

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Вот ссылка на исходный код: surl.li/etlmm
      Может это поможет разобраться детальней.

  • @gulnazametova7509
    @gulnazametova7509 8 หลายเดือนก่อน

    Благодарю за видео🤝 Подскажите, пожалуйста, как добавить поисковик с иконкой ? 🙇‍♀️

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน +1

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

  • @vladlenaklimova7871
    @vladlenaklimova7871 2 หลายเดือนก่อน

    не могу понять почему в header nav ul li{тут соотвествующий код} у меня ничего не происходит и объекты остаются точно также в правом верхнем углу

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน

      Приветствую!
      Возможно что-то пропустили в стилях, проверьте код еще раз. Также можете еще это видео посмотреть: Выпадающее меню на чистом HTML & CSS th-cam.com/video/V29Jysbuzus/w-d-xo.html

    • @vladlenaklimova7871
      @vladlenaklimova7871 2 หลายเดือนก่อน

      @@topchiydev спасибо за ответ! Код уже переписывала два раза, буду пробовать ещё

  • @Просточеловек-э6ы
    @Просточеловек-э6ы ปีที่แล้ว

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста)

  • @cain776olzhas
    @cain776olzhas 11 หลายเดือนก่อน

    Офигенный видос! Спасибо большое! Только просьба подскажите пожалуйста как изменить форму кнопки? Хочу не квадрат а овал

    • @topchiydev
      @topchiydev  11 หลายเดือนก่อน

      Приветствую!
      Спасибо за обратную связь.
      Рад, что понравилось видео)
      Для кнопки можете использовать свойство border-radius - это позволить скруглить углы, как вам угодно.

  • @southvillage1229
    @southvillage1229 4 หลายเดือนก่อน

    странно у меня не получаеться выровнить список со ссылками по центру (код оставлю в css как и был и просто добавляю 3 дива с блоками и они выравниваются по тем же свойствам что и для ссылок) (так же все прописано в для головы сайта ничего местами не менял проблема со списками какая то

    • @topchiydev
      @topchiydev  4 หลายเดือนก่อน

      Приветствую!
      Сложно оценить проблему не видя код.
      Попробуйте применить свойство display к списку со значениями block/inline-block и применить выравнивание margin: 0 auto; для block или text-align: center; для inline-block.
      Также можете посмотреть еще это видео: Адаптивное выпадающее меню на чистом HTML & CSS
      th-cam.com/video/V29Jysbuzus/w-d-xo.html тут используется flex-box.

    • @southvillage1229
      @southvillage1229 4 หลายเดือนก่อน

      @@topchiydev получилось, видос хороший, просто я еще зеленый)

  • @Floryxd
    @Floryxd 9 หลายเดือนก่อน +8

    Вы не представляете.... Я все переписал................... Кому скинуть??

    • @VusalIsrafilovproverka
      @VusalIsrafilovproverka 9 หลายเดือนก่อน

      Мне

    • @никита-э8ж9в
      @никита-э8ж9в 8 หลายเดือนก่อน +2

      Так готовый код в описании,зачем мучаться?

    • @tatyanafox7483
      @tatyanafox7483 6 หลายเดือนก่อน

      Скинь мнеее

    • @uyga13
      @uyga13 20 วันที่ผ่านมา

      Можно мне

  • @vitaminf4608
    @vitaminf4608 ปีที่แล้ว

    Подскажите пожалуйста какие горячие клавиши использовали в этот момент 0:56

    • @vitaminf4608
      @vitaminf4608 ปีที่แล้ว

      ctrl+alt+стрелки

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Нужно зажать alt и курсор мышки ставить в поля.

    • @ИванТюников-д3е
      @ИванТюников-д3е ปีที่แล้ว

      По-моему, лучше протащить мышь с зажатым колёсиком. В этом случае, когда всё на одно вертикали, самое то. Нажатая Alt тоже вариант, но этот способ следует применять, когда множественный ввод разбросан по коду.

  • @tauron0_o
    @tauron0_o 5 หลายเดือนก่อน

    У меня не боляшая ошибка вышла в итоге, вкладка в вкладке там тектс сехал и он другуго цвета

    • @topchiydev
      @topchiydev  5 หลายเดือนก่อน

      Приветствую!
      Сложно оценить проблему не видя код.
      Текст съехал возможно из-за того, что не помещается в блок, можете немного увеличить ширину или уменьшить размер текста, текст другого цвета возможно из-за того, что пропустили обращение к селектору вложенности пунктов. Проверьте еще раз внимательно код, должно все получится 👍

  • @poppinpillsouljah
    @poppinpillsouljah ปีที่แล้ว

    Привет. А что делать если я открываю выпадающее меню, а оно размещается слева в упор а не прям под ссылкой?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Попробуйте добавить позиционирование (position: absolute;) и размещение (left и top), должно помочь.
      В видео это идет после 9-ой минуты.

    • @poppinpillsouljah
      @poppinpillsouljah ปีที่แล้ว

      @@topchiydev абсолютное позиционирование есть, left и top тоже, но все равно упирается)

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Оставлю ссылку на исходный код: surl.li/etlmm
      Может это поможет разобраться детальней.

  • @crystalll5868
    @crystalll5868 ปีที่แล้ว

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Попробуйте применить свойство z-index.

  • @Ta-cw3iq
    @Ta-cw3iq 10 หลายเดือนก่อน

    Видео выручило, спасибо. Хотелось бы увидеть, как работает a.submenuTitle:hover+ul.submenu, ul.submenu:hover {display: block;} если использовать в конце. Этот вариант у меня не сработал.

  • @RustamMirzayev-ki5ms
    @RustamMirzayev-ki5ms 8 หลายเดือนก่อน

    а какую программу ты используешь для написания кода?

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Приветствую!
      Visual Studio Code.

  • @Python-HTML-CSS-JS-AHK
    @Python-HTML-CSS-JS-AHK ปีที่แล้ว

    Лайк . Подписка.

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Спасибо 👍

  • @pollyprice2587
    @pollyprice2587 ปีที่แล้ว

    Большое спасибо, очень наглядно. Особенное восхищение вызывает Ваша замечательная программа, в которой Вы пишете код и тут же видите результат.) Подскажите, пожалуйста, как она называется? )

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Пожалуйста! 🙂
      Visual Studio Code

  • @retroeagle
    @retroeagle ปีที่แล้ว

    Автор, объясните пожалуйста: как сделать код, с помощью которого меню (при нажатии на ту или иную кнопку) будет открывать нужную тебе страницу? Например: Создал я Меню с кнопками "Группа ВКонтакте, Ютуб Канал и Оригинальный Контент" и каждая это кнопка открывает то что мне нужно. Суть, как это сделать?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Посмотрите это видео: Выпадающее меню с переходом на другие страницы используя HTML&CSS th-cam.com/video/BDWbRZP6wm4/w-d-xo.html
      должно раскрыть ваш вопрос.

    • @retroeagle
      @retroeagle ปีที่แล้ว +1

      @@topchiydev благодарю)))

  • @silent_dude
    @silent_dude ปีที่แล้ว

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Приветствую!
      Вы имеете ввиду после меню в одну строку горизонтально или какой-то контент по средине страницы?
      Если в одну строку, тогда внутри тега header после тега nav нужно добавить что-то, например кнопку «Заказать» и тд.
      А если контент на странице, тогда после тега header, нужно создать section или div с каким-то классом и внутри разместить контент, затем нужно обратится к div(допустив у div будет класс .home) и можете добавить следующий код:
      .home {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      и тогда весь контент разместиться по центру 👌🏻

    • @silent_dude
      @silent_dude ปีที่แล้ว

      @@topchiydev спасибо за помощь но я уже разобрался с этим.

  • @veryslon5104
    @veryslon5104 ปีที่แล้ว +1

    Спасибо

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста)

  • @ДаниалЕркалды-ь5ю
    @ДаниалЕркалды-ь5ю 9 หลายเดือนก่อน

    У меня картинка не выходит когда пишу (background: url(img/bg.jpg) no-repeat;) объясните пожалуйста

    • @topchiydev
      @topchiydev  9 หลายเดือนก่อน

      Приветствую!
      Проверьте путь к картинке и название формата, возможно в этом проблематика.
      И еще можете посмотреть это видео: th-cam.com/video/fMGJkdc4nck/w-d-xo.htmlsi=3YglSLZkYL5opCo5 может будет полезным.

  • @ivancube2992
    @ivancube2992 9 หลายเดือนก่อน

    Супер

    • @topchiydev
      @topchiydev  9 หลายเดือนก่อน

      Спасибо)

  • @АндрейРазумейко-ц4ф
    @АндрейРазумейко-ц4ф 8 หลายเดือนก่อน

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

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Приветствую!
      С помощью расширения Live Server вот подробное видео об этом: Расширение Live Server и автоматическое обновление страницы th-cam.com/video/bPe-DnRBsVk/w-d-xo.html

  • @littlespoon9270
    @littlespoon9270 ปีที่แล้ว

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Не совсем понимаю, куда должны были подвинуться контейнеры?
      Значение space-between размещает блоки в контейнере по разные стороны, добавляет пространство между ними.

    • @littlespoon9270
      @littlespoon9270 ปีที่แล้ว

      @@topchiydev имею ввиду лого максимально слева, а само меню сжато справа, не могу понять в чем дело

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Добавьте padding: 1rem 9%; - отступ сверху и снизу 1 rem будет, а слева и справа на 9%.

  • @PunkKoroli
    @PunkKoroli ปีที่แล้ว

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

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Можете попробовать сделать распределение с помощью flexbox.
      В плей-листе «Navigation menu» есть примеры.

  • @Js__voL_06
    @Js__voL_06 2 หลายเดือนก่อน +1

    А нельзя было задать не float а дисплей флекс я думаю проблем не будет с флексом

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน +1

      Приветствую!
      Можно и так, вот вариант с display: flex + адаптив: Выпадающее меню на чистом HTML & CSS th-cam.com/video/V29Jysbuzus/w-d-xo.html

    • @Js__voL_06
      @Js__voL_06 2 หลายเดือนก่อน

      @@topchiydev я очень часто смотрю вас очень хотелось бы чтобы у вас было бы такое же видео но толко кода поменьше а так сразу с большим количеством кодов опять же контент огонь просто, ну если будет такое же видео ну как бы с поочередным порядком то вообще будет все на 100% процентов все понятно. Сто бы то ни было очень радует ваше представление высший класс 👍.

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน

      @User_5576-o6n спасибо 🙂

  • @АлексейКУЗНЕЦОВ-н6ю
    @АлексейКУЗНЕЦОВ-н6ю หลายเดือนก่อน

    а что если список выйдет за рамки экрана?

    • @topchiydev
      @topchiydev  หลายเดือนก่อน

      Приветствую!
      В таком случае можно сделать так, чтобы список выпадал в другую сторону или можно адаптировать выпадающее меню. Вот есть видео на эту тему: Адаптивное выпадающее меню на чистом HTML & CSS
      th-cam.com/video/V29Jysbuzus/w-d-xo.html

  • @vasiliysobovoy4289
    @vasiliysobovoy4289 2 หลายเดือนก่อน

    Может кто сможет подсказать - можно ли как-то средствами css подсвечивать родительский пункт меню, пока мы водим мышкой по дочерних?

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน +1

      Приветствую!
      Может это видео поможет разобраться: Объединенный hover-effect для блоков используя HTML & CSS th-cam.com/video/aLChdLr43OU/w-d-xo.html

    • @vasiliysobovoy4289
      @vasiliysobovoy4289 2 หลายเดือนก่อน

      @@topchiydev Понял, спасибо! Тупанул (

  • @kiritokaxorov15
    @kiritokaxorov15 ปีที่แล้ว

    пацан от души сбасибо

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Пожалуйста!)

  • @kar7ins
    @kar7ins 8 หลายเดือนก่อน

    В якій прозі пишете html ? 0:22

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน +1

      Вітаю!
      Visual Studio code

    • @kar7ins
      @kar7ins 8 หลายเดือนก่อน

      @@topchiydev дуже дякую!

  • @Js__voL_06
    @Js__voL_06 2 หลายเดือนก่อน

    Откуда скачать эту музыку? Ну прям очень мотивирует скажите пожалуйста 😊

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน

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

    • @Js__voL_06
      @Js__voL_06 2 หลายเดือนก่อน

      @@topchiydev огромное спасибо 😊 .

    • @topchiydev
      @topchiydev  2 หลายเดือนก่อน

      Пожалуйста 👍

  • @phpstudy8625
    @phpstudy8625 8 หลายเดือนก่อน

    Еще бы сущности поворачивались при выпадании блоков была бы БОМБА !!!

  • @OksanaSaienko
    @OksanaSaienko ปีที่แล้ว

    Спасибо!!!! Вы преподаете? Хочу к Вам на курс.

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      К сожалению не преподаю, только видео-обучение и видео-курсы.

    • @OksanaSaienko
      @OksanaSaienko ปีที่แล้ว +1

      @@topchiydev , удачи Вам и процветания всем видам деятельности!

    • @topchiydev
      @topchiydev  ปีที่แล้ว

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

  • @ilyasanych
    @ilyasanych ปีที่แล้ว

    Немного смутил float, а на flexbox можно так сделать? А так огонь!!!

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Да, можно на flex, это уже как удобно 👍

  • @alexandrkhutornoy
    @alexandrkhutornoy ปีที่แล้ว

    Разве можно юл помещать в ли? Это же не верно семантически

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Да, можно.
      Если интересно, вот обучающее видео по спискам: th-cam.com/video/TSy_37CKDgw/w-d-xo.html

  • @dansyz80
    @dansyz80 11 หลายเดือนก่อน

    «Давайте!» 😂

  • @MikkiMouse-p7t
    @MikkiMouse-p7t ปีที่แล้ว

    Лайк и пописка 🎉

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Спасибо 🙂

  • @ИльяКаплунов-м1ф
    @ИльяКаплунов-м1ф ปีที่แล้ว

    ссылку на исходный код можно?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Ссылка на архив с кодом: surl.li/etlmm

  • @EkaterineMaisuradze-ju6jm
    @EkaterineMaisuradze-ju6jm 2 หลายเดือนก่อน

    👍

  • @studs304agarkov5
    @studs304agarkov5 9 หลายเดือนก่อน

    А где находится код этого сайта ?

    • @topchiydev
      @topchiydev  9 หลายเดือนก่อน

      Приветствую!
      www.patreon.com/CodingWithTopchiy

  • @ВоваКириллов-х8ъ
    @ВоваКириллов-х8ъ ปีที่แล้ว +1

    Искал серебро, а нашел золото!

  • @КоляСиднев
    @КоляСиднев ปีที่แล้ว

    Как скрыть эти треугольники?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      В этом примере никак не скрыть, только методом удаления сущностей в HTML.

  • @Mekteptekz
    @Mekteptekz 11 หลายเดือนก่อน

    🎉👍👌

  • @Ефимов_Юра
    @Ефимов_Юра ปีที่แล้ว

    ОМГ ну кому сейчас нужна вёрстка только для десктопа?
    У меня на сайте по услугам 98% посещений со смартфона.
    Как это меню сделать выпадающим по нажатию на него пальцем, а не по наведению курсором мышки?

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Считаю, что примеры должны быть разные.
      Вот видео с адаптивным выпадающим меню: th-cam.com/video/TqoTPUFllR4/w-d-xo.html

    • @Ефимов_Юра
      @Ефимов_Юра ปีที่แล้ว

      @@topchiydev спасибо!

  • @m_nazikou
    @m_nazikou 8 หลายเดือนก่อน

    Почему у меня не получаетсЯ

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Приветствую!
      Видимо что-то делаете не правильно, проверяйте внимательно все еще раз.

  • @terroz4641
    @terroz4641 7 หลายเดือนก่อน

    ссылки не работают

    • @topchiydev
      @topchiydev  7 หลายเดือนก่อน

      Приветствую!
      Проверяйте код, значит что-то не верно прописали.

  • @ewhkkx
    @ewhkkx 6 หลายเดือนก่อน

    Пасебаааа

    • @topchiydev
      @topchiydev  6 หลายเดือนก่อน

      Пожалуйста)

  • @cestlavie1257
    @cestlavie1257 หลายเดือนก่อน

    3:27

  • @DanDiablo
    @DanDiablo 5 หลายเดือนก่อน

    ul li ul li .... ul li ul... Я запутался... Можно код?

    • @topchiydev
      @topchiydev  5 หลายเดือนก่อน

      Приветствую!
      Исходный код есть на www.patreon.com/topchiydev

    • @DanDiablo
      @DanDiablo 5 หลายเดือนก่อน

      @@topchiydev Страница не может загрузится, проверьте.

    • @topchiydev
      @topchiydev  5 หลายเดือนก่อน

      @DanDiablo проверил все работает

  • @enyooa
    @enyooa ปีที่แล้ว

    А как сделать адаптив с этими вырождающимися меню, без js 🤯🤯🤯🤯🤯🤯🤯

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Сегодня в 18:00 выйдет видео на эту тему.

  • @Useruser656-o4k
    @Useruser656-o4k ปีที่แล้ว

    Не рабочий код

    • @topchiydev
      @topchiydev  ปีที่แล้ว

      Приветствую!
      Что именно не работает?

  • @Infinity-Catharsis
    @Infinity-Catharsis 4 หลายเดือนก่อน

    Ссылка на рабочая

    • @topchiydev
      @topchiydev  4 หลายเดือนก่อน

      Какая ссылка?

    • @Infinity-Catharsis
      @Infinity-Catharsis 4 หลายเดือนก่อน

      Ваша ссылка не работает

    • @Infinity-Catharsis
      @Infinity-Catharsis 4 หลายเดือนก่อน

      В этом ролике

    • @Infinity-Catharsis
      @Infinity-Catharsis 4 หลายเดือนก่อน

      Вы тут)

    • @Infinity-Catharsis
      @Infinity-Catharsis 4 หลายเดือนก่อน

      @@topchiydev у вас есть тгк?

  • @golovatskii_r
    @golovatskii_r ปีที่แล้ว

    nav ul li ul?? Брат, не проще было класс ебануть или айди и уже его стилизовать?

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

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

  • @donchikbro4140
    @donchikbro4140 ปีที่แล้ว

    Вообще не работает

    • @topchiydev
      @topchiydev  ปีที่แล้ว +1

      Приветствую!
      Оставлю ссылку на исходный код: surl.li/etlmm
      Может это поможет разобраться детальней.

    • @toniagoloveshenko3954
      @toniagoloveshenko3954 ปีที่แล้ว

      не открывается код по ссылке@@topchiydev

  • @ideskaber
    @ideskaber ปีที่แล้ว

    😂😂😂

  • @DoolotkeldiAlanov
    @DoolotkeldiAlanov 8 หลายเดือนก่อน

    molodes

    • @topchiydev
      @topchiydev  8 หลายเดือนก่อน

      Спасибо)

  • @AJIEKCAHDP_CEPrEEBI14
    @AJIEKCAHDP_CEPrEEBI14 7 หลายเดือนก่อน

    Эй, эй, эй, братуля, посмотри в окно, на дворе 2024 год, меню без адаптива ни кому не нужная тема. Решил делать, делай до конца. Ну и спасибо конечно что меню хотя бы читабельно, может кому-то и пригодится .

    • @topchiydev
      @topchiydev  7 หลายเดือนก่อน

      Приветствую!
      Будьте внимательны Выпадающее меню на чистом HTML & CSS шаг за шагом th-cam.com/video/V29Jysbuzus/w-d-xo.html

    • @AJIEKCAHDP_CEPrEEBI14
      @AJIEKCAHDP_CEPrEEBI14 7 หลายเดือนก่อน

      @@topchiydev Пардон мисье, в конце ролика ни чего не было сказано про следующий этап. Моё вам почтение. В таком случае, я таки доложу безупречную плитку на объекте и вернувшись домой усядусь за ПК, оформлю на ваше творчество подписку и с вашего позволения примусь верстать меню для своего, пока ещё не безупречного сайта на основе ваших уроков.

  • @Suetlanshorts
    @Suetlanshorts ปีที่แล้ว

    Видео ужас, вид не соответствует тому, что в видео

  • @lexxkrt
    @lexxkrt ปีที่แล้ว +2

    серьезно? для этого нужно "учебное" видео? мне кажется проще этого сложно что то придумать. это же элементарно и очевидно. зачем мне это в рекомендации попало

    • @polpogiovanna1558
      @polpogiovanna1558 ปีที่แล้ว +7

      Твои проблемы, кому-то может быть не понятно такое. Элементарно и очевидно это субъективно

    • @exstra6205
      @exstra6205 ปีที่แล้ว +3

      Я только начал изучать веб разработку от просмотра хуже не будет

    • @lexxkrt
      @lexxkrt ปีที่แล้ว

      @@exstra6205 если вы до этого своей головой не дошли, завязывайте с веб-разработкой, это не ваше

    • @Копроним-б5ш
      @Копроним-б5ш ปีที่แล้ว +6

      Душнилойд

    • @dansyz80
      @dansyz80 11 หลายเดือนก่อน

      Заткнись 😂

  • @32prince
    @32prince 2 หลายเดือนก่อน

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

  • @user-cn3hg6sr4k
    @user-cn3hg6sr4k 7 หลายเดือนก่อน

    Здравствуйте. У меня проблема с текстом, когда пишу или делаю что-то после этого меню, то текст, картинки начинаются на странице под меню. Как будто бы меню вне страницы. Можно ли как-то исправить это?

    • @topchiydev
      @topchiydev  7 หลายเดือนก่อน

      Приветствую!
      Скорей всего что-то не так с разметкой, это меню фиксируется сверху, для него разметка идет внутри тега , если вы создание разметку дальше, например для home section, тогда нужно создавать после секцию и уже туда добавлять контент.

    • @user-cn3hg6sr4k
      @user-cn3hg6sr4k 7 หลายเดือนก่อน

      @@topchiydev









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

    • @topchiydev
      @topchiydev  7 หลายเดือนก่อน

      Вроде все корректно, но так очень сложно оценить в чем может быть глобальная проблема.
      Можете посмотреть начало этого видео: th-cam.com/video/HXFAsT0_oBY/w-d-xo.htmlsi=7ZZR8jJL0VlOMst0 здесь есть фиксированый header и затем размещение home section.

    • @1nd1fference_
      @1nd1fference_ 6 หลายเดือนก่อน

      @@topchiydev точно такая же проблема, помогите разобраться