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

Как сделать правильное адаптивное меню бургер на чистом JS, навигацию на странице с плавной прокруткой к нужному разделу а также многоуровневое меню смотрите в новом выпуске "Как это сделать?"
🔝 Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф:
firstvds.ru/s/freelancer1703.
Инсайдерская инфа: тариф за 90 рублей скоро закончится, успевайте!
🤟Скачать архив с результатом (патреон): / 48896262
Меню бургер на HTML CSS и jQuery: • Правильное адаптивное ...
Геометрические фигуры на HTML и CSS: • Геометрические фигуры ...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В выпуске
01:04 - РЕКЛАМА
02:24 - Подготовка к работе
02:51 - Верстка контента
05:15 - Верстка шапки
11:13 - Верстка и программирование подменю
26:00 - Плавная прокрутка к нужному разделу
33:25 - Меню бургер на JS
54:29 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Что еще снять? 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@commentator7826]

Уроки по javascript). А точнее DOM, события и т.д, а потом хотелось бы практики, например, сделать табы или аккордеон

[@user-qs9kk6fo3l]

Добрый день! Интересно увидеть как делается пагинация, как показывать контент частями при клике

[@zmeygorynych5684]

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

[@dennisfisher2684]

Слайдер )

[@MegaTesei]

@@dennisfisher2684 Есть же видео такое

[@pivnoepuzo3898]

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

[@FreelancerLifeStyle]

Пожалуйста! Рад что полезно!

[@justinnl4332]

Делаю сейчас закрытие меню-бургер по щелчку на ссылку в меню. Никак не работает. За примером далеко ходить не надо.

[@fffffristaylo]

Он был бы немного беднее))

[@AlexStolbovakariturnel]

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

[@FreelancerLifeStyle]

Ахах, спасибо!

[@alexeyyevkov155]

Наш сенсей как всегда лучший!!!

[@FreelancerLifeStyle]

Спасибо!)

[@user-ni8kb1os4b]

Конечно, отлично сказано

[@pholi8773]

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

[@galandec2000]

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

[@Roderen]

Я кстати всегда ставлю классы на всё. Будь то p, strong, и на a в li и на li в a

[@miraigrafit7865]

@@Roderen li в а? 🙈

[@user-fs3yr9yk6n]

можешь объяснить, зачем надо код писать в DOMContentLoaded? Интересно

[@Roderen]

@@miraigrafit7865 "Заговорился")

[@dobramorda9818]

@@user-fs3yr9yk6n ну бывает такое, что есть вещи, которые загружаются асинхронно, или строятся js кодом, в таком случает твоя логика поиска элементов через querySelector-ы будет работать неправильно, так как страница загрузиться, начнется работа условно твоего скрипта, он не сможет найти какой нибудь условный селектор типа body.main, потому что класс main навешивается скриптом другого js, который отрабатывает после твоего, и следовательно document.querySelector('body.main') будет null, ну а ты же для чего то делал этот поиск, чтобы для чего то использовать, следовательно логика твоей программы будет рушится.

[@shps.online9830]

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

[@ginseng_ua]

Супер! Спасибо за видео)! Очень ждал его!

[@nazarlevchuk7773]

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

[@user-ei6wy1ew9f]

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

[@user-fx4tq3cz2w]

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

[@FreelancerLifeStyle]

Я рад!

[@rizaetdinkuchukbay4601]

@@FreelancerLifeStyle видео по jQuery есть на канале ? Вроде пролистал не нашёл. Если нет, то будет ли? Заранее благодарен!

[@user-eh1xr2wq8d]

Просто шикарный урок ) СПАСИБООО)! Невероятная подача))

[@Cleventina]

Большое спасибо за такой подробный урок! У вас отличная подача и очень понятные объяснения 👍

[@qwe-rty-]

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

[@FreelancerLifeStyle]

Я рад

[@ye5275]

Так грамотно и понятно преподносить информацию это настоящий талант! Спасибо вам!

[@user-zi9km3bf4c]

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

[@user-eq1zs7mj6w]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@user-tf8le4tx3v]

Спасибо тебе за твои бесценные уроки 🔥🔥🔥

[@user-lm9gg6oc6n]

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

[@user-in1ww9gt4p]

Боже, шикарный видос! Спасибо. Все так просто и красиво)

[@user-ht5qv3wy4z]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-jc5yr6wz5i]

Супер. Жень спасибо тебе что показываеш и рассказываешь мелкие детали которые очень важны. Жду не дождусь видео по jS.

[@Maksim_Ivaschenko]

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

[@FreelancerLifeStyle]

Спасибо!

[@ilyaprotsenko1023]

Спасибо, Жека, просто большое спасибо) Многому научился именно от тебя)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-de5hy8vk3p]

Женя, прям не знаю, какие слова благодарности писать! СПАСИБО за крутой контент! миллион лайков! Было бы здорово еще про WP уроки сделать;)

[@j-lewis]

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

[@artemmolot2474]

Спасибо вам Евгений, за качественный контент. Ваше умение качественно доносить информацию, очень ценно. Успехов вам!

[@FreelancerLifeStyle]

Спасибо, рад что полезно!

[@maksum4062]

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

[@FreelancerLifeStyle]

Спасибо, стараюсь)

[@plasticassholes8403]

Это просто бомба, пушка, ракета. Спасибо Женя, низкий поклон.

[@user-cl5yx5mf5u]

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

[@dvsDesing]

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

[@langonar]

Спасибо! Взял несколько моментов на вооружение :) Крутой канал!

[@user-xs5cb1dc6s]

Как всегда - высший пилотаж! Спасибо! На вопрос о том, что еще снять - продолжать уроки по js. Без него никуда, я уж по вашим объяснениям начинаю ориентироваться в jquery :-)

[@tatia216]

Евгений, Вы просто супер!!! Я влюбилась в js, когда так четко, последовательно и доступно все излагается. И результат - выше всех похвал))))

[@user-dl4or3gs3q]

СПАСИБО!!!!! Как всегда, то что нужно доступным языком!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@fordjl9811]

просто кайфанул с результатов!!)) спасибо за уроки))

[@kostyakozlov5289]

Обучение на высшем уровне! Большое спасибо.

[@googdoit]

"То что нужно", как и все остальные ролики. Лайк до прсомотра.

[@user-qn7zf9js3y]

Спасибо за видос. К сожалению, смогу посмотреть только завтра. Лайк-авансом!

[@agibalova24]

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

[@svetlanapokrovskaya7798]

Женя, огромное человеческое спасибо! Столько фишек, так все подробно рассказано! Мегаполезно! Жаль, нельзя поставить 10 лайков...

[@uk-lych_sveta]

Спасибо за интересный контент. Учусь на твоих "видосиках". Будь здоров!!!

[@tatianakruglaya6760]

Спасибо. Очень все подробно и доступно! =)

[@user-gy6lq1ke9c]

Спасибо, как всегда всё качественно и понятно.

[@iqraedukz]

тебе тоже захотелось бургеров?)

[@FreelancerLifeStyle]

100%

[@it-future5144]

Спасибо, что напомнил. Пойду доем второй бургер

[@user-ex5bu4kh1o]

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

[@me-dc2ex]

Крутое видео! Офигенный материал!))

[@FreelancerLifeStyle]

Спасибо большое!

[@vovasevastopol]

Спасибо большое за вашу подачу материала!

[@yomo1abh586]

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

[@user-xb4zd7hm1o]

Здравствуйте! Огромное спасибо за Ваш Труд!!! Урок отличный. Объяснение доходчивое и понятное даже новичку. Еще раз Большое Спасибо!!!!

[@jedwian]

отличное видео, спасибо тебе) Ты лучший!

[@marinasatsyk2184]

Крутейшее видео!!! Спасибо большое!

[@user-lf3ht2ss8q]

Очень качественный урок, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@BrestSouth]

Спасибо, тебе большое! Очень помогает твой контент!

[@no_name_2mix]

Очень интересно и полезно:) спасибо!

[@caydebane6753]

Жека как всегда лучше всех !!! спасибо братка!

[@user-ke4jq5vh7r]

В самом начале по изучению css) Просто лайк зашёл поставить)

[@user-uo4ut2du1z]

Респект вам, Евгений!Теперь всем знакомым,желающим научиться делать классные сайты, после прохождения простейших курсов html/css/js рекомендую смотреть вас, идеальный следующий уровень.Спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@aquilon1790]

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

[@maxraketa6685]

Классные уроки, большое спасибо!

[@everyday_on_top185]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@AnnaOhrimenko]

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

[@damico750]

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

[@daniilgrushkin]

Спасибо за однозначно годный контент. Думаю, было бы крайне неплохо, если бы ты запилил побольше видео с разработкой различных вещей с использованием именно ванильного JS'a, поскольку JQuery уже морально устарел, а вот ванилла будет жить, пока востребован веб:)

[@norby1117]

вряд ли кто-нибудь еще сможет так хорошо объяснить, Спасибо, Жека

[@superdexter1932]

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

[@FreelancerLifeStyle]

Спасибо!

[@deniskotov]

ДААА!!)) Наконец-то!!!))) Спасибо, Жека!!!))))

[@FreelancerLifeStyle]

Пожалуйста!

[@user-mq7nd5pq9q]

Спасибо за видео, Жень! Посмотрел и все сделал. Все работает как надо! Теперь на реальном проекте буду нарабатывать практику)) Будь здоров!

[@user-iq5wx7qq4v]

Женя, спасибо тебе большое!!! Как всегда, твой контент спасает 🤝

[@alexles5003]

Круто. Очень понравилось. Взял себе на заметку

[@tom_bombadiI]

Спасибо, было очень интересно, полезно и познавательно!

[@FreelancerLifeStyle]

Пожалуйста !

[@s9219871110]

Женя, большое спасибо за видео!

[@FreelancerLifeStyle]

Пожалуйста!

[@lazukina_2821]

Спасибо огромное за ваш труд !!!

[@user-siergy]

like нужно ставить еще перед просмотром)))легко, понятно, доступно и очень качественно. нет слов)))))ЛУЧШИЙ КАНАЛ!!!!!!!!!!!!!!!субьективно-обьективное мнение)))Жека - сенсей))))))))нужно прописать snipet "Спасибо". так будет проще)))))))))

[@MaximVernigorov]

Волнительно, ну что ж погнали):))) ЖЕКА ЛУЧШИЙ!

[@MaximVernigorov]

Фуууух чётко! Всё сработало спасибо! Патрон в теме:)

[@ihor6439]

Велика подяка! Чудовий урок!!

[@yevheniigoman]

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

[@teymurhuseynli6674]

Только подумал о бургер меню на чистом js и сразу вышло это видео. Женя ты читаешь мысли ? )). Вообщем я хочу сказать большое спасибо за твои труды 👍

[@user-uh5vh2rc5p]

Круто! Я тоже делал наподобие меню, неокторые моменты также реализовал (некоторые иначе, более сложным способом), но вот плавный скролл сделал с помощью свойства scroll-behavior: smooth; На jquery принципиально не делал, так как не хотелось ради этого тащить целую библиотеку, но вот не знал как сделать это же на чистом js (хотя и догадывался, что надо со смещениями работать и задействовать getBoundingClientRect, в одной статье подсмотрел). Теперь буду знать знать как это реализуется. У вас все это очень понятно выглядит, спасибо! Также было в новинку увидеть определение в js класс устройств (я только начинаю изучать js), надо будет тоже у себя так попробовать. Очень познавательно!!!

[@kitralin9987]

Очень понравился урок Бургер меню, все доступно и понятно. идем дальше

[@evgenika7472]

Ты как всегда лучший!!! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@levmorgan1441]

Большое спасибо за ролик! Ну очень помог

[@kirillpopov1445]

Спасибо. Очень подробно и понятно.

[@rezorro6307]

Ну как . КААААААААААААААААААААААК! так круто можно делать . Молодец . Спасибо ))

[@crazybogdancool709]

Дякую за урок! Ця годинна була дуже цікавою та інформативною!

[@user-lu7mm8bw1m]

Классный видос столько много лайфхаков увидел спасибо!

[@FreelancerLifeStyle]

Пожалуйста

[@user-ni8kb1os4b]

Очень классно спасибо что сделали это видео

[@FreelancerLifeStyle]

Пожалуйста!

[@user-bm4zd5ln3m]

Спасибо тебе. Все полезно и очень круто.

[@FreelancerLifeStyle]

Пожалуйста!

[@konstantino7016]

Канал Евгения настоящая сокровищница 👍👍👍

[@user-np9mq5xc7j]

Крутяк! Спасибо ☺️

[@FreelancerLifeStyle]

Пожалуйста!

[@Sobanim]

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

[@user-ei6wy1ew9f]

Лайк не глядя, однозначно годнота! Пишу пару коментов для продвижения видоса 😎

[@user-xn5rq2ii5n]

Огромное вам спасибо!!!

[@feddim9624]

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

[@user-my9zl5vo5r]

Как всегда топчик)

[@FreelancerLifeStyle]

Спасибо!

[@lefun4ik559]

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

[@user-rd1it9bq9k]

Спасибо тебе огромное, Жека)

[@unkled]

Авансом - Спасибо !)

[@FreelancerLifeStyle]

Пожалуйста!

[@LordOzzy1986]

супер огонь, просто адово пламя!🔥🔥🔥

[@user-lf4bc7vq7n]

Благодарю! Мега крутое видео!!!

[@FreelancerLifeStyle]

Пожалуйста!