UI-компоненты №14. Простое бургер-меню

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 97

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

    Спасибо большое Вам!
    Продолжайте снимать ролики, все очень доступно и понятно!
    Это уже не первое Ваше видео, которое я смотрю для решения своих задач в построении сайтов

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

      Пожалуйста) конечно, буду продолжать

  • @blackcelebration3588
    @blackcelebration3588 3 роки тому +1

    Спасибо, Макс. Очень нравятся Ваши уроки.

    • @maxgraph
      @maxgraph  3 роки тому +1

      Пожалуйста)

  • @apelsin4ik2901
    @apelsin4ik2901 2 роки тому +2

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

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

      Пожалуйста)

  • @EkaterinaAvdeeva-v8q
    @EkaterinaAvdeeva-v8q 2 роки тому

    Блин, какой ты молодец, Макс! Так доступно все объясняешь! Спасибо огромное!!!

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

      Пожалуйста)

  • @андреймаслов-е2й

    Лучшее объяснение по реализации бургер-меню, Максим Вы лучший успехов Вам.

  • @marina-ej4qd9kc1wh
    @marina-ej4qd9kc1wh Рік тому

    Очень приятное видео про бургер-меню!

  • @Tattybubu-t6f
    @Tattybubu-t6f Рік тому

    Огромное вам спасибо! Желаю успехов вам)

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

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

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

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

  • @biLLie_wiLLie
    @biLLie_wiLLie 3 роки тому +12

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

    • @maxgraph
      @maxgraph  3 роки тому +6

      Спасибо, учту) но вообще многие видео я пишу специально без подготовки, так сказать вживую

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

      @@maxgraph Да так было бы очень удобно:) спасибо за контент:)

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

      @@maxgraph лучше с подготовкой!

    • @dmitryg.9533
      @dmitryg.9533 2 роки тому

      @@maxgraph вживую на самом деле вообще топ, когда смотришь уроки где весь код изначально вылизан до идеала, как то хуже усвояемость материала, лично у меня так, потому что когда видишь как ты правишь какие то моменты, то потом самому на практике видно больше вариантов для реализации, спасибо за уроки!

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

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

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

    класс, обьяснил "что, куда, откудо" , спасибо Макс

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

      Пожалуйста)

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

    Максим, как всегда лайк!
    Скоро понадобится данный урок :)

  • @НикитаСмирнов-ъ2п
    @НикитаСмирнов-ъ2п 2 роки тому

    Спасибо большое, спасибо за то, что объясняете свои действия!

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

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

  • @djdrey4539
    @djdrey4539 2 місяці тому

    Круто. Спасибо

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

    Спасибули! Больше понятно!

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

      Пожалуйста)

  • @ДмитрийЮдичев-с5ъ
    @ДмитрийЮдичев-с5ъ 3 роки тому +2

    Макс привет! А как сделать, чтобы по клику вне области моб. меню оно закрывалось автоматически. То есть не только по нажатию крестика

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

      Клик по body

    • @ДмитрийЮдичев-с5ъ
      @ДмитрийЮдичев-с5ъ 3 роки тому

      @@Vladikslavik верно

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

      @@ДмитрийЮдичев-с5ъ догадается человек или нет? Короче, только с условием, чтобы класс e.target не равнялся классам бургера и ссылок меню.

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

    Спасибо за уроки =)

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

      Пожалуйста)

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

    Макс, привет!) Крутые видео! Не планируешь записать реализацию по загрузки файлов в форме с возможностью drag and drop загрузки ? И кастомизацию инпута, ну и с валидацией по макс числу файлов, по типу, по размеру. В инете нету ни одного толкового видео на эту тему.

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

      Привет, спасибо)
      Можно сделать в общем-то, запишу в план)

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

    Люди добрые, подскажите отсталому, что за расширение для браузера используется, чтобы вот так прямо в браузере сжимать страничку, подставляя разные разрешения экрана?!?!

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

      Никакое)) это device toggle toolbar в браузере, погугли

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

      @@maxgraph благодарю мил человек)

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

    А в script.js, когда получаем дом элементы, зачем ? знак вопроса после document?

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

      Посмотрите урок внимательно, я там все рассказал)

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

    Все супер! p.s у кого свойство --header-height не работает, попробуйте создать его не в @media, а глобально

  • @СтаниславГорячев-г1ъ

    Спасибо)

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

      Пожалуйста)

  • @МаратСафиянов
    @МаратСафиянов 2 роки тому

    Максим, подскажите плиз, почему псевдоэлементы для кнопки делаются для burger, а не для burger__line?

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

      Так удобнее их позиционировать

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

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

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

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

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

      @@maxgraph вопрос немного не в этом. не ясно как использовать такое объявление, то есть везде в коде нужно по всему файлу писать именно со знаком вопросом?
      не проще тогда сделать запись такой:
      const burger = document.querySelector('[data-burder]');
      if (!burger) return;
      и тут ниже уже сам код, и не переживать что где то потом пропустил поставить этот знак вопроса и все сломаеться.

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

      Может и проще, я использую разные варианты, и ставил везде для надёжности

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

      @@maxgraph ну вот я как раз и не могу понять как именно это использовать) это точно что то новенькое) может что то и лучше. почитаю про это. за урок спасибо, все очень круто :)

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

    Покажи следующем видео, как сделать, в таком же меню, то "выпадающее меню". Я так и чую что там дописать надо из этого. Мне не понятно как добавить. Попытаюсь методом втыка как всегда. :)

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

      Посмотрите урок про мега меню на канале)

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

    еще вопросик и все 🤣я вот как-то закончил последний марафон на новой зборке галпа теперь дорабативаю и возник вопрос а что если все изображения в проекте ( кроме PNG которые используются для бэкграундов ) встевить через тег picture?это в целом плюс или без разницы?

    • @maxgraph
      @maxgraph  3 роки тому +1

      Для этого есть миксин image-set в сборке)

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

    Здравствуйте Максим. Повторил ваш вариант бургера. Заметил такую вещь, у вас в видео она тоже промелькнула, при уменьшении вьюпорта на мгновение появляется бургер меню и анимируется его закрытие, смотрится не очень. Есть вариант как это пофиксить?

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

      Здравствуйте. Добавлять транзишн через js попозже нужно видимо.

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

      @@maxgraph Здравствуйте! Не могли бы вы подробней рассказать про это для чайников?

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

      @@kasmacov Один из вариантов:
      В js:
      window.onload = function () {
      nav?.classList.toggle("transition");
      };
      В css:
      .transition {
      transition: transform 0.6s ease-in-out;
      }

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

    А как сделать 4 палочки, а не 3 ?

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

      Добавьте спан

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

    Здравствуйте, спасибо за видео!
    у меня вопрос что за знак вопроса в js
    когда пишите document?

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

      Здравствуйте, я пояснил это в видео, посмотрите внимательно)

  •  3 роки тому

    А что за знаки вопроса у тебя в ЖС коде ?

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

      Пересмотри видео, сразу после их написания я сказал зачем это)

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

    Макс, привет! Спасибо за урок! Не подскажешь, какая у тебя цветовая схема в редакторе? Спасибо.

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

      Привет, one monokai)

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

      @@maxgraph странно, у меня она выглядит по-другому)

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

    Все бы хорошо, но почему даже в твоих видео есть большие косяки, например, после клика нужно останавливать событие клик, либо оно будет копиться, или эта информация из разряда купите мой курс там будет?

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

      Ты сам себе что-то придумал) какие курсы? 😀
      Почему нужно? Не вижу проблем

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

      @@maxgraph ничего против не имею против тебя ты гений для меня, ты забыл про эту вещь? Я просто учусь фронту и сам об этом только сегодня узнал

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

      Звучало иначе))
      Но нет, я конечно не гений =)

  • @ФранцузРусский-ы2ш

    Макс лови Лайкс!

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

    🥰😃😃

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

    4k качество это конечно сильно)

  • @СергейГадаев-у5н
    @СергейГадаев-у5н 3 роки тому

    Спасибо за контент!) А не лучше ли сделать анимацию только на transform? Что бы не менять top и botton, ведь они нагружают fps))

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

      Не сильно тут большая нагрузка

  • @Monster-x4d
    @Monster-x4d 2 роки тому

    Спасибо за урок, ну и aria-expanded="true" при открытии можно сделать

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

      Если не сделал вдруг - да!)

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

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

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

      Поменять можно как угодно, стили же можно переопределять)

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

    Очень круто видео. А можно такое же только с многоуровневым меня?

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

    Есть идея для плейлиста! Coffee CMS

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

      Что-то интересное?)

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

    макс к тебе экстренный вопрос(телегу снес 😂спрошу тут)так: собираю я твой последний марафон на новой зборке галпа(еле с импортами разобрался) у тебя там Head в отделном файле который подключааю на каждой странице но как теперь сделать так чтоб на каждой странице в бразуре отображалась название самой страницы а то на всех страницах одно название 😎

    • @maxgraph
      @maxgraph  3 роки тому +1

      Можешь попробовать передавать переменные в file include
      Или забить, это все равно уже на натяжке же будет

  • @ИгорьКим-й4л
    @ИгорьКим-й4л Рік тому

    Здрасте , почему когда я пишу для burger--active .burger__line : opacity: 0; то у меня пропадают все три палочки бургера ?

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

      Потому что вы это и написали. Надо обращаться к определённой линии

    • @ИгорьКим-й4л
      @ИгорьКим-й4л Рік тому

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

  • @betnews-8616
    @betnews-8616 Рік тому

    У меня то сделано у меня это сделано. Зачем тогда это смотреть, скопирую код с гугла и все у меня тогда тоже все сделано.

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

      никто не заставляет же

  • @Сергей-г8г6с
    @Сергей-г8г6с 11 місяців тому

    Спасибо!

  • @ilya10rus
    @ilya10rus 10 місяців тому

    Спасибо😊