Меню бургер на чистом JavaScript. Многоуровневое меню и плавная прокрутка к разделу на HTML CSS JS

Как сделать правильное адаптивное меню бургер на чистом JS, навигацию на странице с плавной прокруткой к нужному разделу а также многоуровневое меню смотрите в новом выпуске "Как это сделать?"

🔝 Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф:
Инсайдерская инфа: тариф за 90 рублей скоро закончится, успевайте!

00:00 - В выпуске
01:04 - РЕКЛАМА
02:24 - Подготовка к работе
02:51 - Верстка контента
05:15 - Верстка шапки
11:13 - Верстка и программирование подменю
26:00 - Плавная прокрутка к нужному разделу
33:25 - Меню бургер на JS
54:29 - Заключение

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[pivnoepuzo]

А представьте не было бы таких людей, сколько десятков часов мы бы убивали на банальные вещи. Спасибо.

[AlexStolbovakariturnel]

Представь - 10 минут назад сел смотреть предыдущий видос про бургер, а сам себе думаю - наверное, посмотрю и сам соображу, как это сделать на чистом JS. И тут открываю почту Женя как всегда - лучший!

[РусланРусалкин-хш]

Один из не многих обучающих блогеров которому лайк можно ставить не глядя. Спасибо Джексон!

[IT_psychopath]

я так уже за год, вырос с твоих уроков, но начинал с них.)) как вырос, смотрю иногда, чтоб что-то вспомнить, ну и лайк поставить за труды. спасибо!
если позволишь, поделюсь своим не большим опытом.))))
1) лучше классы добавлять на li а не на ссылку! это важно, ибо в большинстве CMS, при натяжке такой верстке, проклянут, просто там на li класс можно прописать при инициализации меню к примеру в вордпресс, это гипер важно и будет попа боль... может кому пригодиться во классы вордпресса по умолчанию: nav-menu - этот класс ставиться на ul, menu-item - это класс пункта меню (li), 2) я бы вместо span сделал button причем с текстом внутри, только тексту задал бы нулевой размер, это поможет людям с инвалидностью, да и так верно по семантике, у нас там не декоративная стрелочка, а все-же это позиционируется как кнопка. но это не обязательно, можно так и не делать.))
3) кнопка бургера, это тоже кнопка а не блок! да, это не критично и плевать как делать, но корректно, когда кнопка, это все-же кнопка а не что-то другое. опять же, проблема будет у людей с инвалидностью.
4) не помешало бы честь тот факт, что клиент в будущем может добавить новый пункт меню, и наша верстка полетит в тар тарары.... я тоже сейчас сел себе писать подобное, для проектов, и вот как раз это одна из причин, по которой решил написать адаптивное меню.)))
5) я бы шапку не делал фиксированной с самого начала, не всегда оно уместно. как по мне, лучше сделать ее фиксированной после прокрутки к примеру 200-300px. это добавит адаптивности.
6) это уже мелочи, но лучше все обернуть сначала в - "window.addEventListener("DOMContentLoaded", () =>{}", как миним поможет людям с инвалидностью. есть еще пара мелких моментов, которые тоже часто могут вызвать боль в очень больших проектах, но не критично.))) к пример, лучше проверить сразу, а создалось ли меню и наши основные классы. потому что не мы будем создавать меню а php к примеру, он баганул и наш js пошел гулять ошибками по консоле.)))

[maksym_iv]

Это один из тех уроков, после которого смотришь на результат работы и не можешь перестать радоваться, спасибо большое за знания и хорошее настроение!

[pholi]

У Жени скоро 200 тыс. подписчиков, а я до сих пор читаю поздравления с первой сотней)
Удачи тебе, Женя, спасибо за твои классные уроки, если чего-то не пойму или не хватит мотивации, стану твоим патроном.
Для меня ты единственный человек, которому хочется задонатить, тем более это заслуженно.
К концу года наберешь 500 тыс?))
Вопрос к тем, кто ставит дизлайки на видео... Ребята, за что? Человек старается, делает всё ради нас, получает с канала копейки (по меркам больших каналов). Он мог бы и кривлять рожи на видео и грести бабло, но он ставит моральные ценности выше денег. Он делится бесценным опытом, который вы не купите даже в Скиллбоксах и тому подобных.

[ТёмаРассадин-нщ]

Всё легко когда ты знаешь, что делаешь. Поистине полезный урок. Спасибо!

[qwe-rty-]

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

[AndriiNakonechnyi-fy]

Росту на твоих роликах, просто лучший!
Иногда не верится, что такой контент с крутой подачей дают бесплатно)

[Maksim_Ivaschenko]

Позитив и настроение Евгения. Блеск в глазах. Как это заряжает и заражает позитивом и желанием учиться. Прямо какая то Вёрсточная лихорадка начинается. Однозначно Гранд Мерси. Респект и Уважуха.

[АлександрКосматов-тх]

Очень редко ставлю лайки и пишу комментарии, но большое, просто огромное вам спасибо. Благодаря вашим подобным видео я начинаю понимать всю взаимосвязь html/css/JS и видеть использование всего этого на реальном проекте. Спасибо, ваши видео очень мотивируют продолжать заниматься этим.

[nazarlevchuk]

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

[maksum]

Ты реально круто подходишь к своему материалу

[НаталияНовицкая-цз]

делаю сайт для портфолио, по твоему видосу сделала меню-бургер, все получилось, ураааа! огромная благодарность за твой труд!

[yomoabh]

Решил разобрать всю инфу в ролике детально и писать следом за тобой, Жека, но прочность осмысленно.
Итог: в период с 00:00 по 1:38 я просмотрел и полностью "впитал" первые 23 минуты ролика.

Большое спасибо за сей труд. Каждый твой ролик наполнен тонной нужной, полезной, а главное актуальной информацией, так же присутвует большое колличество советов, фич, которые нельзя прочесть в документации, ибо они нарабатываются лишь на практике при работе с проектом.
Еще раз большое спасибо!! Вы помогаете людям становиться лучше и речь не только об навыках в Frontend'e. ))

[superdexter]

коментарий для продвижения ролика в тренды.

[AnnaOhrimenko]

Я в повному захваті від відео, якісно, доступно ще й цікаво! Година перегляду на одному диханні! Ви крутий!

[ДмитрийКузьмин-шс]

Отличное начало дня!
Женя, благодарочка!!!😎

[shps.online]

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

[aquilon]

Интересно было посмотреть, спасибо! Добавил бы, что при использовании опции behavior со значением "smooth" в js нужно использовать полифил или бейбел. Ведь если я не ошибаюсь, то отвалится львиная доля safari браузеров и ie11(если его еще кто-то поддерживает).

И отдельно хочу поблагодарить за твой труд! Получив базовые знания html css js было много нюансов с которыми было тяжело и долго реализовывать реальные проекты. Я хотел максимально быстро выйти на фриланс и уже в процессе разбираться с тонкостями разработки. И в этом мне нереально помог твой стартовый шаблон! Он закрывал большую часть проблем и нюансов возникающих в разработке. И даже когда я сталкивался с трудностями, о решении которых не говорилось в видосе по стартовому шаблону, я не бежал сразу в гугл за решением, а начинал копаться в сборке и в большинстве случаев находил там решение! Огромное спасибо!