Выпадающее меню на чистом HTML & CSS шаг за шагом || Responsive Drop Down menu pure CSS

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 46

  • @topchiydev
    @topchiydev  7 днів тому

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

  • @OksanaSaienko
    @OksanaSaienko Рік тому +2

    Спасибо, добрейший человек! За понятное и доступное объяснение!!🙏

    • @topchiydev
      @topchiydev  Рік тому

      Пожалуйста!)
      Спасибо за обратную связь!👍

  • @БолотТоробеков-п4м

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

  • @АлинаАнисимова-н8н

    Шикарно 🔥

  • @vladislavslis9103
    @vladislavslis9103 Рік тому

    Дякую за урок !

  • @natashawebconstanta777
    @natashawebconstanta777 Рік тому

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

  • @БолотТоробеков-п4м
    @БолотТоробеков-п4м 6 місяців тому

    спасибо очень простой, классный урок

    • @topchiydev
      @topchiydev  6 місяців тому

      Пожалуйста)

  • @instsaurfem
    @instsaurfem Рік тому +1

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

  • @ВолодяЛітовинський

    круть) майже місяць не міг саменький сам склепать) 3 рівень меню і бургер дуже дякую!!!!!!!

    • @topchiydev
      @topchiydev  Рік тому

      Будь ласка)
      Радий що зміг допомогти!

  • @AJIEKCAHDP_CEPrEEBI14
    @AJIEKCAHDP_CEPrEEBI14 7 місяців тому

    Ну ты бро даёшь... Каждый урок вёрстка HTML у тебя с нуля??? Почему не использовать уже ранее сделанное меню или хотя бы каркас HTML??? В целом меню отличное👍Но есть нюансы, я так полагаю, что без JS для адекватной работы всё же не обойтись. Нюанс в том, что при повторном нажатии на символ стрелки на мобильном устройстве подменю обратно не сворачивается, а это уже недостаток.
    P.S. Как и обещал, лайк прожал, подписку оформил.

    • @topchiydev
      @topchiydev  7 місяців тому

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

  • @lililight-e5f
    @lililight-e5f Рік тому

    селектор обобщённых родственных элементов показывает Что nav и #menu:checked родственники? Урок просто супер!

    • @topchiydev
      @topchiydev  Рік тому

      Приветствую!
      Спасибо за обратную связь 👍
      По поводу селектора обобщенных родственных элементов, можно и так сказать.
      Он соответствует элементу, который является сестринским по отношению к другому элементу, хотя не обязательно расположенному перед ним.
      Об этом селекторе есть отдельное видео, возможно будет интересно ознакомится: ua-cam.com/video/w1V1yMnuleE/v-deo.htmlsi=E1AP-xFKYiPlvl49

  • @vladislavslis9103
    @vladislavslis9103 Рік тому

    А це потрібно якось бібліотеку підключити щоб добавити такі символи як на 8:34?
    UPDATED: Я все вирішив.

    • @topchiydev
      @topchiydev  Рік тому +1

      Для додаткової інформації, можливо буде корисно по цій темі: ua-cam.com/video/qw1oQ9xXRaw/v-deo.html

  • @alenamitrofanova4361
    @alenamitrofanova4361 Рік тому

    Спасибоо большое за такое подробное видео. у меня только маленький вопрос есть, я вроде бы так же все писала как и вы в коде. Но с момента menu span у меня не появились линии для бургера. мне получается нужно значения просто подгонять, если не получается также как у вас?

    • @topchiydev
      @topchiydev  Рік тому

      Да, там нужно подгонять ширину и высоту и соответственно размеры для span и тогда для свойства transform: translate() также подбирать значения, чтобы крестик корректный получился с бургера.

  • @ТаняФіль-р7я
    @ТаняФіль-р7я 7 місяців тому

    А если у меня и так ссылки уже правильно стоят, в ряд и по сридине, все равно нужно писать ul li { или нет ?

    • @topchiydev
      @topchiydev  7 місяців тому +1

      Приветствую!
      Не обязательно, это просто разные методы применения разметки, кто-то через списки делает меню (ul>li>a), кто-то просто с ссылками (a). Ссылки строчный элемент, поэтому они располагаются одна за одной в ряд.

  • @vladislavslis9103
    @vladislavslis9103 Рік тому

    Не розумію чому не працює в мене justify-content: space-between; ?

    • @vladislavslis9103
      @vladislavslis9103 Рік тому

      CSS поки виглядає так
      body {
      font-family: 'Open Sans', sans-serif;
      background-color: gray;
      }
      *,
      *:before,
      *:after{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-decoration: none;
      list-style: none;
      text-transform: capitalize;
      }
      header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: white;
      box-shadow: 0 5px 10px rgba(0, 0, 0,.4);
      justify-content: space-between;
      }

    • @topchiydev
      @topchiydev  Рік тому +1

      Привіт!
      Якщо я правильно зрозумів ви застосовуєте цю властивість щоб розмістити меню в середині header, спробуйте додати display: flex, має спрацювати.

    • @vladislavslis9103
      @vladislavslis9103 Рік тому

      Доброго дня. Дуже смішна ситуація трапилась. Я не побачив ваш комментарий вчасно, але сам зрозумів свою помилку )

    • @topchiydev
      @topchiydev  Рік тому +1

      Супер)

  • @steak3378
    @steak3378 Рік тому

    Привет, есть проблема, я так понял она есть и в твоем примере. При открытых dropdown Courses и Web Development, и попытке нажать на Projects происходит еще один клик на пункт выше, после которого Projects открывается и скрывается. Не подскажешь как фиксить?

    • @topchiydev
      @topchiydev  Рік тому

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

    • @steak3378
      @steak3378 Рік тому

      @@topchiydev Я немного не дописал, это происходит на мобильных девайсах

  • @user-py4tw5hr9t
    @user-py4tw5hr9t Рік тому

    А де можна отримати архів?

    • @topchiydev
      @topchiydev  Рік тому +1

      Вiтаю!
      Ось посилання: surl.li/fdwrm

    • @user-py4tw5hr9t
      @user-py4tw5hr9t Рік тому

      @@topchiydev дякую!!!

    • @ВолодяЛітовинський
      @ВолодяЛітовинський Рік тому

      не раджу користуватись архівом якщо сам набираєшь куда краще доходить)))))

  • @dedmaxim100
    @dedmaxim100 Рік тому

    Не работает

    • @topchiydev
      @topchiydev  Рік тому

      Приветствую!
      Проверьте правильность написания кода.

    • @dedmaxim100
      @dedmaxim100 Рік тому

      @@topchiydev проверил много раз

    • @dedmaxim100
      @dedmaxim100 Рік тому

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

    • @topchiydev
      @topchiydev  Рік тому +1

      Вот ссылка на архив: surl.li/fdwrm

    • @dedmaxim100
      @dedmaxim100 Рік тому

      @@topchiydev спасибо вы лучшей