UI-компоненты №11. Выпадающее меню

Поделиться
HTML-код
  • Опубликовано: 21 ноя 2021
  • Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей.
    В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются.
    Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js.
    В этой части я сделаю выпадающее меню по клику.
    github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
    Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
    Понравилось? clck.ru/Gr9Ec
    Моя страница вконтакте: maxdenaro
    Мой блог: blog.maxgraph.ru
    Мой сайт: maxgraph.ru
    Канал в телеграм: teleg.run/maxgraph
    Чат для верстальщиков: teleg.run/maxgraph_chat
    #ityoutubersru #ui_компоненты #верстка

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

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

    Большое спасибо за твой труд! Качественно и доступно.

  • @platonzhoske4522
    @platonzhoske4522 2 года назад +3

    Не ждал этот ролик так быстро )) Спасибо большое за качественный контент !!

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

      Пожалуйста)

  • @BMikel
    @BMikel 2 года назад +1

    Даже не посмотрел, уже ставлю лайк. Так как 100% уверен что годнота

    • @maxgraph
      @maxgraph  2 года назад +1

      Спасибо)

  • @k0rsoYD
    @k0rsoYD 2 года назад +1

    Спасибо за простоту и качество!

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

      Пожалуйста)

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

    Максиму огромное спасибо за dropdown menu !

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

    Огромное спасибо!

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

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

  • @slavavolkov4913
    @slavavolkov4913 2 года назад +1

    Для полноты картины, можно было бы реализовать перемещение по пунктам меню с клавиатуры (таб, стрелки).

  • @jackyiakovenko
    @jackyiakovenko 2 года назад +2

    😍👍

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

    Спасибо!

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

      Пожалуйста)

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

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

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

      Может быть) но мне удобнее так.

  • @r.h._vid
    @r.h._vid 2 года назад

    А можно как то сделать так, чтобы кнопка пункта после клика открывал дроп (как сейчас), а повторное нажатие переходило бы на страницу

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

      Ну тут можно смотреть, если класс добавляется - через js отправлять пользователя куда-то по второму клику. Но вообще сомнительно, что нужен такой функционал

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

    Когда-то для подменю использовали jQ плагин superfish. Я так понял, в 2021 году он уже не нужен? интересно, кто-то еще использует?

    • @maxgraph
      @maxgraph  2 года назад +1

      Не нужен)

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

    Как раз сегодня есть такая задача! Вроде сделал с помощью choices js , но как-то криво вышло, с удовольствием бы сделал лучше.

    • @maxgraph
      @maxgraph  2 года назад +1

      Ну здорово)

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

    По бэм class перед href🤗

  • @kerusdc8322
    @kerusdc8322 2 года назад +1

    многоуровневое меню было бы лучше
    такое меню менее применимо

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

      Оно уже есть на канале

    • @BMikel
      @BMikel 2 года назад +1

      @@eugeneshiyan да, хотелось бы увидеть как верстают меню интернет магазинов. citilink, e-katalog. Я б если можно было, 350 лайков поставил бы

    • @maxgraph
      @maxgraph  2 года назад +1

      Может быть)