Выпадающее меню на чистом CSS и HTML

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

КОМЕНТАРІ • 31

  • @АндрейЛансуаов
    @АндрейЛансуаов 25 днів тому

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

  • @greentea288
    @greentea288 2 роки тому +7

    Единственный кто без лишнего объяснил

    • @swesh2105
      @swesh2105 11 місяців тому

      ага, поэтому я не чего не понял почти:)

  • @Anitizer
    @Anitizer 3 роки тому +5

    у меня все также но почемуто в конце .menu li:hover ul не работает и не выпадает меню
    как исправить и почему такая ошибка?

    • @alekseyivanow
      @alekseyivanow 2 роки тому +1

      Попробуй
      .menu li:hover~ul

    • @Anitizer
      @Anitizer 2 роки тому

      @@alekseyivanow ебать спасибо..
      я уже забыл про это видео...
      я сейчас пайтон изучаю,
      а что даст ~ul?

    • @alekseyivanow
      @alekseyivanow 2 роки тому

      @@Anitizer не знаю,но работает и это прикольно!

    • @СергейМануйлов-н7е
      @СергейМануйлов-н7е Рік тому

      в css файле в .menu ul ul поменяй местами display: none и position: absolute ( в видео это строки 40 и 41) и все заработает

  • @luxarmiger5729
    @luxarmiger5729 2 роки тому +1

    Отлично, рахмэт!

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

    Все работает. Спасибо. А можно меню расположить по центру страницы?

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

      margin:auto;

  • @KrasNik2912
    @KrasNik2912 2 роки тому

    Кто знает, почему не работает второй выпадающий список? И > и ~ пробовал - ничего. Все сделал, как в видео

    • @СергейМануйлов-н7е
      @СергейМануйлов-н7е Рік тому

      в css файле в .menu ul ul поменяй местами display: none и position: absolute ( в видео это строки 40 и 41) и все заработает

  • @MrSimpotic
    @MrSimpotic 2 роки тому

    Урок - отличный, спасибо! Но скачать исходный код по ссылке - не получается. Где все же можно качнуть?

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

    А где адаптив?

  • @ФехтовальщикДранглика

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

    • @GreenComet
      @GreenComet  4 роки тому +3

      :active применяется к тегу li пока зажата кнопка мышки. Чтоб реализовать так как вы хотите необходимо использовать javascript, меняя классы или другие атрибуты элемента

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

      В JS с помощью toggle очень удобно это делать

  • @ЮрийКулясов-у2т
    @ЮрийКулясов-у2т 2 роки тому +1

    Самый большой минус в том, что это не работает на тачскринах.

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

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

  • @spacenomoe
    @spacenomoe 4 роки тому

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

    • @GreenComet
      @GreenComet  4 роки тому +1

      Последующие ul вложены в li предыдущего. Добавил пример кода jsfiddle.net/igorrybalko/t0s5f279/67/

    • @spacenomoe
      @spacenomoe 4 роки тому

      @@GreenComet вчера долго ..бался с наследованиями

  • @МарянаЛозинська-х3щ

    КОД В ВИДЕО ПЛОХОЙ😒. А НА ИСХОДНОМ КОДЕ (НА САЙТЕ) ВСЕ ОК😉

  • @Anitizer
    @Anitizer 3 роки тому +3

    почему-то у меня твой код не рабоатет

    • @renpy839
      @renpy839 2 роки тому

      @UA@Teroid у меня ссылка не работает

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

      @@renpy839



      Document

      кат1

      подк2

      подк3

      подк2
      подк3
      подк4


      подк4


      кат2

      подк2
      подк3
      подк4


      кат3

      подк2
      подк3
      подк4



      css
      .menu {
      display: flex;
      }
      .menu li{
      width: 200px;
      list-style: none;
      background: #1c473d;
      position: relative;
      }
      .menu a{
      color: #aeadb3;
      text-decoration: none;
      display: block;
      text-align: center;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      transition: all 1s;
      }
      .menu ul{
      position: absolute;
      left:0;
      top:100%;
      display: none;
      padding: 0;
      }
      .menu a:hover {
      background: #ecf3aa;
      }
      .menu li:hover > ul{
      display: block;
      }
      .menu ul ul{
      display: none;
      position: absolute;
      top:0;
      left: 100%;
      }

  • @Olegria
    @Olegria 3 роки тому

    хорошая работа