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

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

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

  • @kirillgrinevich
    @kirillgrinevich 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

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

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

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

      Пожалуйста)

  • @андреймаслов-е2й
    @андреймаслов-е2й ปีที่แล้ว

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

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

      Спасибо)

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

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

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

      Пожалуйста)

  • @EkaterinaAvdeeva-v8q
    @EkaterinaAvdeeva-v8q ปีที่แล้ว

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

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

      Пожалуйста)

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

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

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

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

    • @nekrartgb
      @nekrartgb 2 ปีที่แล้ว

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

    • @Soap9613
      @Soap9613 2 ปีที่แล้ว

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

    • @dmitryg.9533
      @dmitryg.9533 2 ปีที่แล้ว

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

  • @Tattybubu-t6f
    @Tattybubu-t6f ปีที่แล้ว

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

  • @marina-ej4qd9kc1wh
    @marina-ej4qd9kc1wh ปีที่แล้ว

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

  • @Elisha_GG
    @Elisha_GG 2 ปีที่แล้ว

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

  • @ynwa2290
    @ynwa2290 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @_pheax
    @_pheax 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @Doldskey
    @Doldskey 2 ปีที่แล้ว

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

  • @НикитаСмирнов-ъ2п
    @НикитаСмирнов-ъ2п 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @djdrey4539
    @djdrey4539 วันที่ผ่านมา

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

  • @vladislavmikhailov
    @vladislavmikhailov 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

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

    Спасибо😊

  • @GeorgyDev11111
    @GeorgyDev11111 2 ปีที่แล้ว

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

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

      Спасибо)

  • @dis1755
    @dis1755 2 ปีที่แล้ว

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

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

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

  • @anonymous_ua
    @anonymous_ua 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @МаратСафиянов
    @МаратСафиянов 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

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

    🥰😃😃

  • @ДмитрийЮдичев-с5ъ
    @ДмитрийЮдичев-с5ъ 2 ปีที่แล้ว +2

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

    • @Vladikslavik
      @Vladikslavik 2 ปีที่แล้ว

      Клик по body

    • @ДмитрийЮдичев-с5ъ
      @ДмитрийЮдичев-с5ъ 2 ปีที่แล้ว

      @@Vladikslavik верно

    • @Vladikslavik
      @Vladikslavik 2 ปีที่แล้ว

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

  • @ФранцузРусский-ы2ш
    @ФранцузРусский-ы2ш 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Спасибо)

  • @Uncaught_in_promise
    @Uncaught_in_promise 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @detro1821
    @detro1821 2 ปีที่แล้ว

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

  • @daulettulepbergenov9151
    @daulettulepbergenov9151 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @Sergus1984
    @Sergus1984 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Привет, one monokai)

    • @Sergus1984
      @Sergus1984 2 ปีที่แล้ว

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

  • @jackyiakovenko
    @jackyiakovenko 2 ปีที่แล้ว

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

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

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

  • @alexkir9312
    @alexkir9312 2 ปีที่แล้ว

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

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

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

    • @alexkir9312
      @alexkir9312 2 ปีที่แล้ว

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

  • @СергейГадаев-у5н
    @СергейГадаев-у5н 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @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;
      }

  • @maxvahrushev5154
    @maxvahrushev5154 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

    • @maxvahrushev5154
      @maxvahrushev5154 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @vitalb7907
    @vitalb7907 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

    • @vitalb7907
      @vitalb7907 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

    • @vitalb7907
      @vitalb7907 2 ปีที่แล้ว

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

  • @sasha_08170
    @sasha_08170 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @world_of_facts_shorts
    @world_of_facts_shorts 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Уже было))

  •  2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @lwickboxl
    @lwickboxl 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @unity_12
    @unity_12 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @amat0ru
    @amat0ru 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @jackyiakovenko
    @jackyiakovenko 2 ปีที่แล้ว

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

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

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

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

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

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

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

  • @ИгорьКим-й4л
    @ИгорьКим-й4л ปีที่แล้ว

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

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

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

    • @ИгорьКим-й4л
      @ИгорьКим-й4л ปีที่แล้ว

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

  • @betnews-8616
    @betnews-8616 ปีที่แล้ว

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

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

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

  • @Сергей-г8г6с
    @Сергей-г8г6с 9 หลายเดือนก่อน

    Спасибо!

  • @СтаниславГорячев-г1ъ
    @СтаниславГорячев-г1ъ 2 ปีที่แล้ว

    Спасибо)

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)