Правое бургер меню - подробное объяснение. HTML + CSS + JS

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

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

  • @asmix7328
    @asmix7328 Год назад +2

    Ооо, как я мучался с этим правым меню))
    Да прибудет Вам +100 в карму за такое видео)

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Большое вас спасибо за приятный комментарий )

  • @952a259
    @952a259 11 месяцев назад +1

    Александр, спасибо Вам большое за такое подробное объяснение! В сети встречаются видео где всё делают за 15 минут при этом никаких объяснений почему и зачем вместо объяснений - наложена музыка. У Вас же всё подробно и понятно, и цветами выделяете элементы и комментируете отлично + тёплый ламповый вайб! 🙂 Успехов Вам в разработке и в продвижении каналов! Очень классное видео, сложно сделать лучше👍

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

      Огромное спасибо за такую обратную связь ☺ рад, что мои видео вам полезны и эстетически приятны 🙃 вам также желаю удачи в изучении JS, оставайтесь на канале 🤗

  • @slavaProg
    @slavaProg 7 месяцев назад +2

    Видео у вас хорошие получаются, и то что вы подумали что говорите много - НЕТ просто вы глубоко погружаете в тему для того что бы мы ваши зрители были внимательно сосредоточены. Момент 16:50

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

    Александр, спасибо большое, вы как всегда на высоте, ждем новый контент

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за замечательный комментарий :)

  • @upwlqwp
    @upwlqwp Год назад +1

    Александр, у вас такой приятный голос, что я готова выполнять все ваши указания. Хотелось бы ещё от вас разговорных видео

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Большое спасибо )) Мне очень приятно. Наверное стоит подумать о озвучку книг )))) Да, мне было бы интересно показать и рассказать вам о чем то интересном. Не только о верстке и js. Но конечно в рамках темы IT. Вы хотели бы такие ролики для просмотра?

    • @upwlqwp
      @upwlqwp Год назад

      @@alex_dudukalo пожалуйста) и мне приятно, что ответили, вы такой внимательный и заинтересованный человек. В телеге смотрела ваш стрим с другими разрабами, было бы классно ещё что-то подобное уже в формате видео. Или можно просто о вас послушать, личный опыт, трудности и прочее)

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

      @@upwlqwp )) Для меня очень важна коммуникация. Потому что это интересно и конечно полезно. Даа, я уже планирую такие встречи и отдельные ролики. Спасибо, что были. Приходите еще. Скоро там же в телеграме сделаю новый анонс)

  • @alisaa.9205
    @alisaa.9205 3 месяца назад

    Огромное вам спасибо за такое подробное видео! Я даже не знала с чего начать, но начав с вами, адаптировала под свою задачу (я еще только учусь) и сделала это!

  • @НикитаАверьянов-е2ь

    Супер, очень полезная информация. Раньше боялся, что это сложно, и не знал, с чего начать. А теперь могу сделать этот бургер самостоятельно) Благодарю за труд!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за Ваш комментарий😊 надеюсь и другие видео курса будут вам полезны

  • @alonaastakhova8533
    @alonaastakhova8533 Год назад +1

    Просмотрела "левый бургер", просмотрела "правый бургер", реализовала у себя в проекте. Подписалась на Ютуб канал, на Телеграмм канал, нашла там исходники и скопировала себе в проект доп. фишечки. Лайки поставила, коммент написала. Буду остальные ваши видео смотреть... В общем, большое спасибо!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Очень приятно читать такие комментарии, спасибо за отзыв и подписку😊

  • @zhannaantipushina6588
    @zhannaantipushina6588 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо вам :) Мне оченm приятно получить такие отзывы. Рад, что ролик вам помог )

  • @ЕвгенийАнисифоров-щ9р

    Огромное спасибо, это самое понятно объяснение, которое я видел, огромнейшее спасибо вам, лайк и подписка автоматом 🥰

  • @natashawebconstanta777
    @natashawebconstanta777 Год назад

    Благодарю тебя, добрый человек! Ты очень талантливый ! Прекрасно объясняешь, чудесный контент! Успехов, мира и добра !!! 🙏🙏🙏

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за ваш комментарий 😊 Ваша поддержка очень мотивирует 🤗

  • @bermetusubalieva9824
    @bermetusubalieva9824 Год назад +1

    Спасибо огромное за это видео, все понятно и ясно!!!! Вы проделали обалденную работу!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо Вам за такой комментарий, это очень мотивирует и заряжает на новые видео

  • @andreyfedyukin8360
    @andreyfedyukin8360 Год назад +1

    Спасибо 👍
    Почему-то пропустил я старт этого ролика, не пришло уведомление… 😮

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Почему то не всегда приходят ((

  • @sergeykhmelnitsky5307
    @sergeykhmelnitsky5307 Год назад +1

    классное видео!
    кстати, MDN предупреждает, что юзать свойство will-change нужно строго при необходимости!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо вам. Да, вы правы. Лучше не увлекаться этим свойством. Компьютеру приходится много просчитывать заранее при го использовании :)

  • @vadimgajsarov7793
    @vadimgajsarov7793 Год назад

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

  • @caroline3531
    @caroline3531 Год назад +1

    Спасибо большое за такой ценный урок! Очень помогло. Лайк + подписка

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за обратную связь😊 ваша поддержка очень вдохновляет 🤗

  • @shamidinoff
    @shamidinoff Год назад +1

    Спасибо. Очень полезно было для меня. Лайк и подписка!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      спасибо за вашу поддержку и подписку :)) Рад, что ролик понравился

  • @exey4688
    @exey4688 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за отзыв 😊 Ваша поддержка очень мотивирует! Рад, что мои видео помогают Вам познавать JS 🙈

  • @ИванИванов-л7ю
    @ИванИванов-л7ю Год назад

    Благодарность тебе брат за видео! Очень доходчиво объяснил! Продолжай своё дело, оно у тебя хорошо получается!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо 🤗 Ваша поддержка очень вдохновляет! Буду стараться и дальше радовать Вас новыми видео 😊

  • @Drtt500_Lk
    @Drtt500_Lk 11 месяцев назад +2

    Спасибо за классный урок👍👍👍💯!!!

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

      Спасибо за отзыв 🤗 надеюсь и другие видео канала будут вам полезны))

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

      Спасибо вам. Рад, что понравилось видео :)

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо )) 40 минут видео многовато. Но может что то полезное в дополнение дал. Хочется все разжевать :)

    • @ОльгаЛебедева-и4э
      @ОльгаЛебедева-и4э Год назад

      @@alex_dudukalo Александр, вот за РАЗЖЕВАТЬ отдельное спасибо от меня!)

  • @megabulk
    @megabulk Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @khafiz4709
    @khafiz4709 Год назад +1

    Всегда полезный контент, спасибо))

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за ваш приятный отзыв. Не всегда получается быстро ответить (

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

    Подробно,охуительно, качественно

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо, значит работаю в верном векторе ))

  • @РонКасторкин
    @РонКасторкин Год назад +1

    'will-change' - super, thanks a lot my dear teacher!

  • @РусланСеменов-щ7щ
    @РусланСеменов-щ7щ Год назад +1

    Как же вовремя, как раз нуждался в этом видео)

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      )) Надеюсь получится разобраться с видео. Спасибо вам)

  • @aliakseipliutsinski2890
    @aliakseipliutsinski2890 Год назад +1

    вы просто космос!!!

  • @patriziapepe3
    @patriziapepe3 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо большое за Ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны

  • @АртёмМоисеев-ь8б

    Спасибо, очень помогло реализовать функциональность!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Большое спасибо 😊 надеюсь и другие видео оказались Вам полезны

  • @Holger_
    @Holger_ Год назад +1

    Спасибо за полезный ролик! Очень помогло, впрочем как всегда )

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Большое спасибо вам за поддержку 😇

  • @alena_75
    @alena_75 Год назад

    Спасибо огромное! Уже неделю пытаюсь разными способами "спрятать" панель справа и всё никак. Самостоятельно додуматься до такого способа просто невозможно. Но это настолько просто оказалось, что прям нет слов...

  • @Kain4ra
    @Kain4ra Год назад +1

    Очень полезный контент, большое спасибо!!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за ваш комментарий и поддержку :)

  • @jakefrost1967
    @jakefrost1967 Год назад

    Спасибо тебе больше. Очень помог. Подписался на твой канал. Буду смотреть как время будет)

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

      Спасибо за отзыв и подписку 😊 Надеюсь и другие видео помогут Вам в изучении JS

  • @МихаилЯнов-ы6д
    @МихаилЯнов-ы6д Год назад +1

    Александр, приветствую.
    Спасибо за новую инфу по css свойствам, я за оптимизацию☝🏻
    Интересный подход. Сейчас до учу node js, осталось пару модулей и думаю надо приступить к курсовой по продвинутой верстке вспомнить навыки верстки и новые фишки параллельно изучить. Также хочется поставить wakatime для учёта времени🙌🏻
    Плодотворного творчества вам😉

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Здравствуйте, Михаил. Рад, что вы еще со мной и смотрите ролики ))Как у вас дела идут на работе и развитии навыков? :)

    • @МихаилЯнов-ы6д
      @МихаилЯнов-ы6д Год назад

      @@alex_dudukalo
      Развитие навыков, решил себе немного курс по nodejs усложнить, сам курс без типизации, от самого начало и до конца решил применять ts, да и могу сказать я как то теперь вообще без ts писать немогу.
      К алгоритмам все приступить немогу но думаю в ближайшее время приступлю.
      И вью хочется поучить и nest js и next js, с только всего, буду на днях как то структурировать.
      По работе сижу на основой выполняю таски, доделки, пока что мало нового функционала, в основном починка старого и оптимизация, и сеошники со своими хотелками😅
      Стажировку тут прошёл в компании сертификат получил, на боевом проекте все происходило видео органайзер писали в течении двух месяцев.
      Мои задачи были перевод сервиса с русского на английский при помощи реакт, онбординги по проекту и конечно исправление багов, вообщем и целом получил хороший опыт, непонравилось только архитектура приложения, ну наверно для этого небольшого приложения свалка компонентов по классике, было нормальным😁
      Сейчас ищу параллельно что нибудь по интереснее и может по глобальне, навыков много, хочет закрепить все и использовать на всю катушку.
      В спокойном темпе неспеша🙃
      У вас все впорядке?
      Собираетесь открывать школу онлайн?
      Буду рад поучаствовать в ваших проектах, зовите как надумаете🤙🏻

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

      @@МихаилЯнов-ы6д Я немного суеверный, не хочется сглазить )))) Но я так рад за вас. Я ведь помню, как мы с вами работали над материалом и сейчас вы уже на таком уровне. Правда искренне рад. Вы молодец. И в этом заслуга только ваших усилий и терпения) Я иногда привожу вас, как пример студентам, которые сталкиваются с трудностями для мотивации. Сейчас я немного набью руку еще в видео и в преподавании и думаю записать курс не большой. А дальше, конечно развивать это направление. Вы знаете, я люблю рассказывать )) Да, конечно. Спасибо за предложение. Я обязательно вам напишу. Спасибо за предложение и за время )

  • @nechaysous
    @nechaysous Год назад +2

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

      Спасибо за такой отзыв. Мне обчень приятно его было читать. Да, по своему опыту знаю, что с мобильным меню может быть куча проблем и попытался в этом ролике их проработать :) Спасибо, что поделился мнением. Это мотивирует :)

  • @dev645r
    @dev645r Год назад +2

    Привет. Лайк сходу, видео очень полезное, по крайней мере для меня) У меня вопрос возник во время просмотра.. Почему не использовал gap для расстояния между элементами списка? Просто в другом видео видел gap, а у тебя margin)

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за ваш комментарий. Прошу прощения за долгий ответ. Да, конечно можно использовать gap ) Так еще удобнее

  • @tuku_mann
    @tuku_mann Год назад +1

    Получилось очень полезно, спасибо!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Рад, что видео было полезным :) Спасибо

  • @Самал-2д.78
    @Самал-2д.78 Год назад +1

    Спасибо! Отличные уроки!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо вам за ваш отклик и поддержку :)

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic3608 Год назад +2

    Очень круто, спасибо.

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо вам за ваш комментарий и поддержку :)

  • @grrrrrrrrrya
    @grrrrrrrrrya Год назад +1

    Очень круто, спасибо )

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Рад, что ролик вам понравился. Спасибо 🥰

  • @ludmilas9137
    @ludmilas9137 Год назад

    Спасибо! Все подробно, все понятно!

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо за Ваш комментарий 😊

  • @alenasakuta7434
    @alenasakuta7434 Год назад

    Спасибо, мне очень помогло ваше видео!)

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Алена, спасибо за Ваш комментарий)) Рад, что видео оказалось Вам полезно 😊

  • @NadezhdaMemelova
    @NadezhdaMemelova Год назад +1

    Спасибо, полезное видео

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Спасибо большое за ваш отзыв )

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

    20:53 Александр, подскажите, пожалуйста, как лучше в настоящее время делать бургер, с точки зрения профессионализма, через 3 span или span before и after ?

    • @alex_dudukalo
      @alex_dudukalo  Год назад +2

      Спасибо за вопрос :) Есть много способов и я бы не стал выделять их, как лучшие. Мне удобно использовать три span. Что бы указывать им всем сразу одинаковые стили. В случае с span before и after нам придется указать всем им разные настройки. Например для span не нужно указывать свойство content, а для before требуется. В случае, когда мы делаем три span, вы можете сразу всем им указать одинаковые опции. Вообще бургер можно сделать даже двумя before и after, а третью палочку сделать тенью :) Способов много и многие хороши

  • @dmytroselikhov3603
    @dmytroselikhov3603 Месяц назад +1

    Александр, спасибо за видео. Подскажите, пожалуйста, если header задать position: sticky; то шапка сайта с меню будет располагаться сверху и скролиться всесте с контентом сайта?

    • @alex_dudukalo
      @alex_dudukalo  Месяц назад

      Спасибо за ваш комментарий. Если меню будет спозиционировано относительно шапки, то да. Оно тоже будет прилипать :)

    • @dmytroselikhov3603
      @dmytroselikhov3603 Месяц назад

      @@alex_dudukalo спасибо

  • @СергейОсадчий-и5е

    Здравствуйте Александр! Все как обычно круто, спасибо! Где музычка? жду видео БЭМ

  • @no_stressin
    @no_stressin Год назад

    Здравствуйте, а почему нельзя для body прописать overflow-x:hidden;?

  • @ruchnaya_klad_konst
    @ruchnaya_klad_konst Год назад +1

    Да-да) БЭМ интересно крайне)

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Будем делать БЭМ :) Спасибо вам

  • @sostav5
    @sostav5 Год назад

    Спасибо! Проще некуда. Наконец-то я победил бургер

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

    Благодарю. Всё понятно и красиво.
    Сделал всё как велено, но оказалось у меня проблема с многоуровневым меню. При наведении уровни меню выпадают на пол секунды и закрываются.
    Не понимаю есть ли связь, но находиться ошибка в main.js. Вот сообщение Uncaught TypeError: Cannot properties of null (readin ‘addEventListener’) at main.js:17:32

  • @mary-jenndeniro
    @mary-jenndeniro 8 месяцев назад

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

  • @maksbugo
    @maksbugo 11 месяцев назад

    чудесное видео! спасибо за комфортный и милый урок!

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

      Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам интересны))

  • @ВикторияАлексеевна-о6ш

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

  • @НиколайЧеботарь-щ8ж

    Всем привет! Подскажите, почему у меня может не работать св-во transform: transate;

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Здравствуйте, тут много вариантов и причин. Без когда сложно разобраться

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

    Добрый вечер! Подскажите пожалуйста: как быть в том случае, когда в body есть интерактивные элементы? То есть кнопки, формы и т.д. Контейнер для бокового меню занимает всю ширину экрана, из-за этого он блокирует возможность кликать по интерактивным элементам в body. Если поставить кнопке z-index: 999, а ее контейнеру меньшее значение, то соответственно кнопка скроется за body. Возможно что-то упускаю, но буду благодарна за помощь!

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

      Здравствуйте, Виктория. А вы использовали position: absolute для меню?

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

    Красава😎

  • @КириллФокин-у9о
    @КириллФокин-у9о Год назад

    отличное видео

  • @SatanaVissarionovich
    @SatanaVissarionovich Год назад +1

    Спасибо большое и еще пара слов для продвижения!)
    UPD. 1) Для промотки хорошо бы таймкоды добавлять в видео,
    2) для значка бургера куда проще использовать “button>&# 9776;

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

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

    А почему бы не скрыть меню вверх?

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Да, так было бы еще проще :)

  • @AntonioBenderas
    @AntonioBenderas Год назад +1

    42:18 я попробовал навесить листенер на клик по window и меню скрывается

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Да, можно делать для body и для window событие клика. Все будет работать так же :)) Спасибо, что досмотрели до конца )

  • @romanr5843
    @romanr5843 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Здравствуйте, роман. Прошу прощения за долгий ответ. Думаю тут вопрос связан с конкретным примером ) Структуры шапок очень различаются по сложности

  • @ЕвгенияОдесса-у8и
    @ЕвгенияОдесса-у8и Год назад +1

    Спасибо, интересно, понятно, но нужен чистый css по тз

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Здравствуйте, спасибо :) Не уверен, что понял вопрос про чистый CSS? :)

    • @ЕвгенияОдесса-у8и
      @ЕвгенияОдесса-у8и Год назад

      @@alex_dudukalo по заданию пока js не подключаем, поэтому пока застряла на этапе смены open/close

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      @@ЕвгенияОдесса-у8и по заданию в Скиллбокс или к вам есть иные проекты ?

    • @ЕвгенияОдесса-у8и
      @ЕвгенияОдесса-у8и Год назад +1

      @@alex_dudukalo в RS School учусь, проект пока adaptive html, css. По JS только через неделю тз будет. Но и лично мне уже интересно решить ребус. Жаль опыта маловато пока

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      @@ЕвгенияОдесса-у8и к сожалению такого ролика у меня пока нет(( бургер меню без js. Но хочу сказать, что реализовать это можно. Например через чекбокс

  • @АлександрПогребняк-д8з

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

    • @alex_dudukalo
      @alex_dudukalo  2 месяца назад

      Здравствуйте, Александр. Большое спасибо за приятный комментарий :) В итоге получилось сделать меню ? :)

    • @АлександрПогребняк-д8з
      @АлександрПогребняк-д8з 2 месяца назад

      Все - нашел ошибку ! И ошибка не у меня, в видео в JS не стоит точка перед классом HEADER , как у вас работало я не знаю ,у меня без точки не работало , не изучил бы правое - не получилось бы левое,но интересно !!!!!

    • @АлександрПогребняк-д8з
      @АлександрПогребняк-д8з 2 месяца назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  2 месяца назад

      @@АлександрПогребняк-д8з Спасибо Вам :) Рад, что вы решили начать смотреть курс по JS. Дело в том, что все домашние работы я опубликовал в сервисе Notion, который недавно ушел из РФ. Рекомендую использовать средства обхода, например ВПH и все заработает. Сейчас я работаю над переносом ДЗ в другой сервис, но на это понадобится время :)

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

    Может разобрать лучше в видео свг анимацию вместо костылей со спаном 🤔

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

      поддерживаю как идею на следующий ролик

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

      Да, можно. Мне не очень нравится анимировать svg. Это выглядет громоздко. Но конечно анимация svg важная и полезная тема. Записал в список тем )) Спасибо

  • @bystrov180
    @bystrov180 Год назад +2

    я нажимаю на ссылку в меню бургер, а сам бургер не закрывается.

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

    • @bystrov180
      @bystrov180 Год назад

      Вот решение: const navLinks = document.querySelectorAll('.nav__item-link');
      navLinks.forEach(link => {
      link.addEventListener('click', () => {
      document.querySelector('header').classList.remove('open');
      });
      });

  • @caroline3531
    @caroline3531 Год назад +1

    Всё было хорошо, до того момента когда мы хотим скрыть меню. Этот способ не всегда подходит.

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

    Я сам много лишнего говорю когда че то снимаю 😏это все от волнения

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      :) Да, есть такое. Особенно, когда без сценария и подготовки сразу делаешь ролик

  • @fanissalahiev5618
    @fanissalahiev5618 2 месяца назад

    подскажите, пожалуйста, код где можно взять?

    • @alex_dudukalo
      @alex_dudukalo  2 месяца назад

      Исходники кода можно найти тут: t.me/frontend_du2/60

  • @AntonioBenderas
    @AntonioBenderas Год назад +1

    Не пойму в чём сложность именно справа?

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Обычно, когда мы прячем блок влево за экран в окне появляется горизонтальный скролл и от него трудно избавиться :)

    • @AntonioBenderas
      @AntonioBenderas Год назад

      @@alex_dudukalo я использовал 100vw и нормально)

  • @ЧынгызДжумадылов-о5я

    💥

  • @МуратКошетеров
    @МуратКошетеров Год назад

    Спасибо

  • @AntonioBenderas
    @AntonioBenderas Год назад +1

    34:20 javascript

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Возможно съел пару букв ):)

    • @AntonioBenderas
      @AntonioBenderas Год назад

      @@alex_dudukalo не, это таймкод )

  • @СергейК-б6н
    @СергейК-б6н Год назад +1

    Кнопку можно 20 на 20 а остальное падинги 😏😏😏

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Да :) Но в любом случае позиционирование внутри абсолютное у спанов )) паддинги не сильно будут на них влиять. Но идея для варианта решения хорошая :)

  • @andrey-frontend
    @andrey-frontend Год назад +2

    Много байта на лайки, хотя я ещё до показа кода его ставлю)))

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      )) Да, может в самом начале будет достаточно )) Но лайки правда нужны. Спасибо, что оставляете их :)

    • @andrey-frontend
      @andrey-frontend Год назад

      @@alex_dudukalo по коду было бы ещё возможно кому-то интересно, как заблокировать скрол и разблокировать его при клике на ссылку в меню, и так же закрывать это меню при клике на ссылку)))

  • @enterthedragon2689
    @enterthedragon2689 Год назад

    У меня меню уезжает вправо, и занимает место, хоть и становится невидимым из-за visibility:hidden. Из-за этого появляется полоса прокрутки, что является помехой. Получилось от этого избавиться удалением параметра visibility у элемента, и установкой другого параметра overflow-x: hidden; для враппера страницы.

    • @alex_dudukalo
      @alex_dudukalo  Год назад

      Да, это рабочее решение :) Я рад ,что вы смогли это сделать. Примерно это же я показываю в этом ролики. Спасибо вам )

  • @feederok5957
    @feederok5957 Год назад +1

    Дякую відео допомогло