Бургер меню без библиотек на чистом JavaScript + плавный скролл к ссылкам

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

КОМЕНТАРІ • 69

  • @enterkvas
    @enterkvas 8 днів тому

    Большое Вам, Даниил, спасибо! Думал, уже лучше некуда апгрэйдить бургер. Оказалось, как обычно, нет предела совершенству! Ваш вариант на данный момент для меня - лучший! Успехов!

  • @demianamnel01
    @demianamnel01 2 роки тому +5

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

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

    блин даниил!! какое же огромное спасибо тебе!! я 3 дня мучался по видосам других блогеров и не получалось(( ппц как ты просто выручил! огромное спасибо! 😭

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

    Отличный урок, долго искал меню с переходом по ссылкам, выручил меня братан! Желаю каналу много подписчиков! Естественно подписался!

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

    Как же вы классно объясняете. Снимайте, пожалуйста, еще видео

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому +1

      благодарю!

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

      @@ПрокашевДаниил а последнее видео пол года назад(( как так?

  • @evgenenterprises4933
    @evgenenterprises4933 2 роки тому +3

    Классно рассказываешь, структурированная и понятная подача информации. Спасибо за твой труд!

  • @MrBenemon
    @MrBenemon Рік тому +2

    Спасибо, крутой контент. Все четко подано, как мини туториал. Мне так легче воспринимать, чем сухую теорию. Добавил в закладки.
    И конечно в своем портфолио сделал по аналогии с видео, работает )

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

    Благодарю, хорошо и четко объяснил. Искал бургер меню, без всяких лишних jquery, и ненужных функции. Всё прекрасно!

  • @maris2885
    @maris2885 21 день тому

    Спасибо тебе большое, самое идеальное бургер меню 🔥👍🏻

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

    Респект большое спасибо! Крутяк! Ты большой молодец!

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

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

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

    обалденный видос. коротко и по делу)

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

    Спасибо, очень понятно и доступно👍 Процветания каналу!!!

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

    ты самый лучший из 1234567890- видео что я видел !!!! спасибо старый

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

    спасибо, крутой шаблон

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

    Просто лучший

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

    Спасибо!

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

    Спасибо! Очень помогли)

  • @user-rashid-mamyrov
    @user-rashid-mamyrov 2 роки тому +1

    Отлично! 👍

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

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

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому

      благодарю!

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

      @@ПрокашевДаниил Только есть один вопрос. Когда ширина меню не 100%, то черная область выдвигается вместе со списком меню при нажатии на бургер. А вариант, когда эта черная область появляется независимо от списка меню можно сделать посредством добавления блока, который по z-index будет между самим списком и непосредственно контентом сайта?

  • @sean1000
    @sean1000 8 місяців тому

    0:42 есть видео или исходники по этим сайтам?

  • @michaelteljatnikow5471
    @michaelteljatnikow5471 4 місяці тому

    благодарю

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

    Беру в копилочку, спасибо! 🤩

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

    Топчик!))спс

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

    Класс, спасибо

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

    Тоже искал, спасибо

  • @ASMR-Bodya
    @ASMR-Bodya Рік тому

    Здравствуйте, я дошёл до этого момента 6:54. На этом моменте вы демонстрируете что у вас получилось 3 полоски. Я повторил те же действия, повторял всё точ в точ, но у меня почему-то 2 полоски.. у вас есть мысли почему так ? :(

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

    Nice video. Which plug in you used to extract class names from HTML to css file?

    • @NAZAR_BUK
      @NAZAR_BUK 21 день тому

      exstantion's name --> eCSStracktor
      It can copy only classes from html. Just select a piece of html code, then press right mouse's button and choose eCSStracktor Run. Go to your css or scss file and paste . Also you can use ctr+V.

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

    Справа если сделать меню, появляется прокрутка в ширину

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

    Отличный видос, подписался. Будет ли реакт, тс, редакс/ртк (ну и вот эти вот все высокотехнологичные плюшки) в будущем?

  • @АлександрКравец-ы7ч

    Спасибо. Покажи ещё пожалуйста как в этом меню можно делать подменю

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

    В хроме плавный скролл, почему-то, не работает (

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

    Почему может не работать плавный скролл в хроме? код 1 в 1 несколько раз проверил

  • @prostojerk9861
    @prostojerk9861 2 роки тому +3

    Сделай пожалуйста видео, с версткой больших макетов, с добавлением дополнительных файлов как css так и html. Уверен это будет полезно новичкам, ведь не каждый понимает при открытие проекта, почему там вместо одного файла index.html ещё кучу других файлов. Это видео получилось довольно полезным, надеюсь увидишь мой комментарий.

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому +2

      хорошо, сделаю! спасибо за фидбек :)

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

      @@ПрокашевДаниил спасибо вам за видеоролики )

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

    Эх, на первый взгляд очень полезное видео, но по факту для олдов оно явно не особо актуальное, а для таких новичков как я, слишком много пропущенного и непонятного. :(
    К примеру: "тут у меня стоит полезный плагин, я его применил вот вуаля!" (какой плагин - фиг его знает), "я тут предварительно настроил себе страницу, то чего мы не будем касаться" (при этом всё пролистывается так быстро, что дабы повторить я раз пять пыталась словить момент, когда код мелькает на экране). Думаю, если Вы ориентированы на таких нубов, как я, то стоило б хотя бы на пару тройку секунд показывать и обозначить код, что присутствует в файле, пусть и не играет особой роли для раскрытия темы. Просто, чтоб все желающие успели при необходимости нажать на паузу и переписать себе в тренировочный файл))
    В итоге пришлось идти смотреть два других видео, сделав на их основе бургер, а потом только вернуться к Вашему, чтоб подсмотреть момент с появлением меню на экране.
    В общем, желаю дальнейшего совершенствования и много-много подписчиков)

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому

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

  • @ДанилПостовой-е7б
    @ДанилПостовой-е7б 2 роки тому

    Видос топовый
    Спасибо большое за полезную информацию !
    Но у меня возникла не состыковочка )))
    Подскажите , что это может быть
    У меня не появляется скролл на 16:15 минуте
    Делаю все тоже самое , но его нет
    Единственное что помогает , для того чтобы появился скролл в
    .menu__bodu {
    overflow: auto
    padding -bottom: 100px (тире) 300px (Добавляю и все работает )
    }
    Не могу понять почему так ???((

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

    классное информативное видео молодец! сделал все как в видео, но скажи пожалуйста, я вот под классом .menu__body добавить другой блок с классом .square__btn с кнопками, и мне нужно чтобы при 767px у меня открывалось меню бургер только c классом .menu__list как у тебя в видео, чтобы .square__btn был виден на header, а вот на 497px (допустим) у меня меню бургер открывалась вместе с .menu__list и с моими кнопками .square__btn
    .
    как это можно сделать, подскажите?

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

    Бро какой у тебя в Vs code встроенный шрифт стоит?

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

    Подскажи, а зачем делать запись в js для скрола , если просто в css можно прописать scroll-behavior->smooth
    Или это другое ?

    • @ПрокашевДаниил
      @ПрокашевДаниил  Рік тому

      это нужно для поддержки старыми версиями браузеров

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

      @@ПрокашевДаниил понял, спасибо 😉

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

    4:22 что это за символы? $&

    • @ПрокашевДаниил
      @ПрокашевДаниил  Рік тому

      & - это символ вложенности, доступный в sass (scss)
      $ в этом куске нет

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

      @@ПрокашевДаниил понял. Спасибо за гайд. Правда, мне пришлось в голове переводить все это в обычный ксс, но я все равно собирался изучать scss, так что спасибо

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

    как можно исправить проблему адаптива? при сужении экрана примерно с 460px начинает все секции ломаться и вместо их заданного цвета рядом появляется еще белый

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому

      возможно, эта проблема была из-за большого размера шрифта в секциях

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

    Начал учить фронтенд, дайте совет как легче учить, а то мозг варится

    • @ПрокашевДаниил
      @ПрокашевДаниил  2 роки тому +2

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

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

      @@ПрокашевДаниил спасибо