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

Что еще снять? 🔴 Карта канала: 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как хорошо, что я зашла на ваш канал!!! Столько полезной информации, рабочие и доступные скрипты. Для меня, как начинающего верстальщика это просто находка! Спасибо за ваш труд🙏 А про слайдер есть контент?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дуже дякую! Жека - ти найкращий! Тобі добре вдається доносити інформацію! І головне - тепер ми знаємо, як це зробити!)))

Дякую за контент. Уже другий день шукаю подібну інформацію, а тут все роз'яснено чітко і зрозуміло. Ще раз дякую.

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

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

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

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

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

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

Огромное спасибо! Очень крутой урок получился, много полезного, особенно порадовали "мелочи". Именно таких моментов не хватает, из-за малого опыта =) Жаль только, что прокрутка не работает ( нашла в другом месте - прикрутила, заработало). Так и не поняла, в чем была проблема. Проверила вроде все до буковки раз десять.

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

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

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

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

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

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

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

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

Відразу лайк перед переглядом. Круто як завжди. Жень, зроби відос про активний пункт меню при переході та при скролі на чистому js.

Как всегда очень полезно и доходчиво. Может ещё потом покажешь как сделать выделение пунктов меню при скроллинге и переходе на раздел на чистом JS?

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

перший раз я не зробила якусь помилку, і не шукала її 2 години😝 дякую за суперське відео🙏🏼

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

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

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

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

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

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

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

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

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

Ох напряжненько, но оч познавательно😮 Спасибо большое, приблизится бы на процентов 30 % к такому уровню.

Очень полезное видео! С меня лайк =D. Было бы интересно (по крайней мере мне), если бы ты запил ролик, как сделать адаптивный touch слайдер. Когда у меня появилась такая задача, без подключения доп. библиотек, я пошёл шерстить инет. В итоге я решил задачу, однако, как мне кажется тот цыганский фокус на 670 строк, который у меня получился, это не самое правильное решение) Был бы рад увидеть правильное исполнение.

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

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

pointer-events не использовал ранее, теперь буду, спасибо !

Ты первый человек на которого я подписался. Всё очень круто, понятно и динамично.В 35 не поздно начинать учиться верстке? Дошел до флексов.

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

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

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

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

Огонь! Жека ты волшебник из страны ОЗ)))Все доступно и прозрачно понятно, обожаю твои ролики, мира и чистого неба вам над головой🤝👍🙏

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

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

Дуже крутий відосік)) Хотілося б ще відео про canvas і svg-анімацію

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