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

Привет! Сегодня мы будем с нуля делать бургер-меню, которое будет отлично смотреться на любом устройстве, от десктопов до мобильных устройств. Мы полностью напишем функционал на языке JavaScript, дополним наше меню дополнительными фишками, а также разберем 2 варианта внешнего вида нашего меню. Приятного просмотра!
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Ссылки:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Соцсети:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Таймкоды:
00:00 – Введение
01:07 – Начинаем
01:36 – Пишем разметку
03:53 – Стилизуем десктоп
05:00 – Делаем мобильное меню
11:32 – Пишем скрипты
17:28 – Плавный скролл
21:20 – Разбираем другие варианты меню
24:25 – Конгратюлэйшн
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Теги:
#webdev
#верстка
#layout

[demianamnel]

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

[katerynat]

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

[mxate]

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

[alexdrumer]

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

[sad_gary]

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

[MrBenemon]

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

[evgenenterprises]

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

[pinnikolay]

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

[jasonborn]

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

[ironXmen]

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

[miramir]

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

[prostojerk]

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

[ioannis]

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

[salovbokah]

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

[АлександрКравец-ыч]

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

[zelenyigor]

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

[sean]

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

[romanchugunov]

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

[olesyamakarova]

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

[MrBenemon]

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