Правильное адаптивное меню бургер на HTML CSS и jQuery. Мобильное меню туториал // Как это сделать?

Покажу как сделать правильное адаптивное бургер меню на HTML CSS и jQuery.
Архив с результатом верстки доступен для подписчиков на патреоне:
/ materialy-meniu-31592706
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

[@olegsemenukha4107]

Спасибо, Женя, уже поддерживаю 😊 Очень хороший канал! Удачи Тебе!

[@shukhratbazarov]

а не расскажешь какими плагинами для соблайм пользуешься?

[@ВиталГалкин]

Как подключить jquery?

[@AaAa-dd4km]

@@ВиталГалкин погугли.

[@FreelancerLifeStyle]

@@uiopdfy есть видео на чистом js

[@anastasiashpit9663]

Судя по комментариям других, у всех всё получилось, и притом довольно быстро. Лично я несколько часов потратила на то, чтобы сделать это меню и трижды (или даже четырежды) пересмотрела видео, чтобы понять, где допускаю ошибки. Поэтому если у вас что-то не выходит, не опускайте руки. Вы не одиноки.)

[@prometystudio4055]

у меня вообще бургер не выводит ;(

[@anastasiashpit9663]

@@prometystudio4055 бывает... Не сдавайтесь! Пересмотрите видео, как это делала я. Уверена, вы сможете понять, где допустили ошибку.

[@prometystudio4055]

@@anastasiashpit9663 спасибо за поддержку, какже трудно учится на фулстэк

[@valerakuznetsov]

У меня так же ))

[@МизукиУчиха-ш4ь]

А у меня бургер не кликабельный(

[@soulwind7577]

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

[@FreelancerLifeStyle]

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

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

Полностью поддерживаю

[@t.i.i8608]

Как успехи бро? Прошло уже 2 года, получается у тебя?

[@soulwind7577]

@@t.i.i8608 Успехи отличные, сейчас работаю на позиции мидл+ в довольно крупной компании с хорошей ЗП. Не планирую останавливаться.

[@t.i.i8608]

@@soulwind7577 Отлично бро! Ещё удачи тебе в дальнейшем!!!

[@Hottabov]

Сажусь за верстку какого-нибудь проекта, открываю мини-уроки Жеки и делаю шикарную работу по нужным мне пунктам! Спасибо, Жека! Этот урок на "ура" зашел вместе с соседним уроком про выпадающее многоуровневое меню + тачскрины!

[@FreelancerLifeStyle]

Супер! Я рад!

[@artprojectua540]

подлиз засчитан...

[@АлександрМилюков-з6ц]

Возможно я что то не так делаю...не получается скомбинировать эти два урока в один....выпадающие меню выравниваются одно на другое, в самый левый край ul списка( а стрелка уезжает направо...может кто нибудь сталкивался, и решил почему так происходит..?

[@Xyjail]

@@АлександрМилюков-з6ц у меня в другом была проблема, отступы. Ноут старый, винду не обновлял оооочень давно, в 2023 году стоит ещё Win7))) Империческим путем я нашел, что не все стили браузера обнулились. Обнулил, заработало)))

[@mikhail3374]

Беспрецедентный уровень годноты)! Спасибо!

[@FreelancerLifeStyle]

Супер! Рад что полезно!

[@andreykuprin7310]

Честно признаться, сначала напряг говор рассказчика. Но по ходу ролика совсем забыл про все условности. Очень четкое и грамотное изложение материала без лишнего трепа. Парень, ты крут! Спасибо за такую качественную инфу!

[@FreelancerLifeStyle]

Пожалуйста!

[@armancherkharov9410]

Для тех кто не знает как сделать, что бы меню закрывалось после нажатия, выкладываю код ниже: $('.header__list').click(function(event) { $('.header__burger,.header__menu').removeClass('active'); $('body').removeClass('lock');}

[@FreelancerLifeStyle]

Спасибо!

[@ИльяБондаренко-т4е]

Реально спасибо чувак

[@Basmete]

Вообще можно написать тот же самый код с toggle еще раз, ибо применение toggleClass сперва проверит есть ли такой класс. Если есть то удалит его, а если нет добавит. Велосипед изобретать тут ни к чему

[@dim_sh75]

Дополню: если надо закрыть меню по клику/тапу в любом месте меню (без перехода куда-либо), то юзабельнее использовать вместо '.header__list' -> '.header__menu'. А вообще, урок поражает полнотой охвата вопроса. Бургер "под ключ" ) автору конечно спасибо, лайк и всех благ.

[@amirnalyne3801]

$('body').removeClass('lock');} помогло пофиксить баг. я сделал переход по силке к якорю и тогда если повторно откривать меню то body.lock уже не работал и страница снова прокручивалась. А добавив кусочек кода который ранеее написал все исправил ) спасибо

[@MrKadyrkhan]

Спасибо за урок. Наконец-то я победил это меню. Не поверите, сутки сижу за этим уроком. Несколько просьб. 1-ая и самая важная - в конце урока, открывайте пожалуйста весь код, и с самого начала и до самого конца, пролистайте его, чтобы была возможность застопить и сравнить куски конечного работающего кода. 2-ая, постарайтесь обходится без копипастов в уроках. Или хотя бы это делать не так быстро. Я сам в 2003 году, купил книгу по CSS и учил по ней верстку. Она была моей настольной книгой. 2008-ом я перестал верстать, и ушел полностью в системное администрирование. И даже с учетом этой практики, мне было тажело найти свою ошибку. в итоге я победил этот урок, и постарался вникнуть в логику адаптивной верстки, и немного начинаю вникать js. Спасибо что поясняешь подробно каждый шаг. Пошел я дальше смотреть ваши видео. Пытаюсь вернуться в профессию верстальщика.

[@raccoon1399]

здравствуйте. скажите пожалуйста как у вас получилось это победить, я 2й день пытаюсь понять, но JS почему то не работает.

[@deeco8289]

@@raccoon1399 может быть ты забыл jQuery подключить?

[@raccoon1399]

@@deeco8289 спасибо, уже нашлась ошибка)

[@rikitiki568]

@@raccoon1399 В чем была ошибка? Не могу найти, почему не работает ._.

[@raccoon1399]

@@rikitiki568 у меня ; была пропущена и чуть-чуть не правильно написано было)

[@liarollot]

Благослови Господи твой канал! Благодарю за полезные видео!

[@FreelancerLifeStyle]

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

[@АллаКолосова-ь8ф]

Честно, лучшее что я нашла в интернете по адаптивной шапке! Всё от самого начала и до конца + очень понятно! Спасибо!

[@FreelancerLifeStyle]

Я рад! Пожалуйста!

[@vzvanov]

Самое "вкусное" бургер-меню из тех, что я видел с простым js в качестве приправы. БРАВО!!!

[@FreelancerLifeStyle]

Спасибо! 👍

[@СергейРожков-ж2ц]

Отличный урок! Однозначно лайк и подписка! По этому видео сделал себе меню для мобильной версии сайта. Подучил немного JavaScript и переписал без jquery на чистом JavaScript. Кому интересно Тот же функционал, без подключения jquery: const burger = document.querySelector('.header_burger') const classNameActive = 'active' const classNameLock = 'lock' const elements = [burger, document.querySelector('.header_menu')] function toggleClass(elements, classNameActive, classNameLock) { elements.forEach(element => element.classList.toggle(classNameActive)) document.querySelector('body').classList.toggle(classNameLock) } burger.onclick = () => toggleClass(elements, classNameActive, classNameLock)

[@СергійК-з5т]

Величезне Вам Спасибі!!! Чудесний ВідеоУрок!!! Удачі Вам та Всього Найкращого!!!

[@abzdrive]

В последний день сдачи дипломной работы на курсе "Веб Старт" сделал все из дипломного макета, кроме бургер меню, вспомнил, что ты очень адекватно все рассказываешь, нашел у тебя как раз то, что мне нужно, сделал менюшку и наконец докончил всю работу! Нереально помог! Очень благодарен за твои видео, после сдачи курса планирую пересмотреть многое на твоем канале, еще раз спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@Duh280]

Спасибо! Очень круто объясняешь! 3 раза пересмотрел, два из которых пытался к своему проекту пристроить, а третий уже твой сверстал, чтобы понять как все работает, чтобы потом зацепить. Здоровья тебе и благополучия!

[@Анна-й4ф7и]

Спасибо огромное за этот урок!) Сделала мое первое меню-бургер и оно работает!) В уроке учтены все мелочи, отступы и т.д. Подача отличная, все доходчиво. Не учеба, а кайф)

[@FreelancerLifeStyle]

Я рад!

[@lenaplay3884]

Ваши ролики - это энциклопедия жизни верстальщика. Учитываются и объясняются самые мелкие моменты, которые трудно заметить, а, тем более, учесть новичку. Очень полезно, понятно, интересно!!!

[@slamedesign]

Ребята, небольшая поправка, в видео не сказано, к сожалению. У всех по разному выглядят "минимальные обнуления" и т.п., поэтому для того, чтобы скролл не работал во время открытого меню, необходимо в js прописать вот так $('body,html').toggleClass('poshelnahuiscroll'); , а в css вот так body.poshelnahuiscroll {overflow: hidden;} html.poshelnahuiscroll {overflow: hidden;} То есть нужно не только body, но и html ограничивать по скролу, а если быть еще точнее, то необходимо делать не overflow, а overflow-x. Всем удачи!)

[@bake5448]

Ахах,чел ты крут

[@slamedesign]

@@bake5448 ахахха

[@СветланаГангардт-ц2й]

Ой, спасибо! Обязательно учту и внесу эти поправки

[@Хуго-ю7ф]

от души, добавил html и все пошло как по маслу

[@dmaster2231]

Спасибо

[@svone_x]

Жека крут на все 100%. Чувство юмора, подача материала, монтаж видео, звуковое сопровождение, все на высоте. Смена кадров (Жека на велике, Жека за компом, вид с квадрика), суперская фишка. Каналы по теме обучающих роликов обычно скучны, но этот исключение. При такой подаче информации, намного легче учить (потому что интересно, информация подкреплена эмоциями), а то что запомнилось, хранится на более длительный срок. СПАСИБО ЗА УРОКИ)))

[@EvilYou]

Переписал код на чистом JS, пользуйтесь: let menu = document.querySelector('.header__menu'); let burger = document.querySelector('.header__burger'); burger.onclick = function(e) { menu.classList.toggle('active'); burger.classList.toggle('active'); document.body.classList.toggle('lock'); }

[@r4j1n]

бл добрый человек спасибо тебе. Без шуток

[@EvilYou]

​@@r4j1n Не за что. Кстати, можно вместо document.body.classList.toggle('lock'); написать следующее условие: if (document.body.style.overflow === '') { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } тогда CSS станет чуточку короче (не придется добавлять класс lock).

[@МаксимБешляга-ч5ч]

Спасибо тебе,но у меня на onclick выбивает ошибку- Cannot set properties of null (setting 'onclick').Может знаешь чего?

[@EvilYou]

@@МаксимБешляга-ч5чвероятно, у тебя в html другой класс задан, не header__burger, а иначе

[@EvilYou]

@@МаксимБешляга-ч5ч либо скрипт подключен неправильно. Если ты отдельным файлом подключаешь, то добавь атрибут defer

[@АннШ]

JS код из урока: (первая строка нужна, чтобы скрипт начал срабатывать только после загрузки страницы. Женя это не пояснял, но так всегда делают в JS) $(document).ready(function() { $('.header__burger').click(function(event){ $('.header__burger,.header__menu').toggleClass('active'); $('body').toggleClass('lock'); }) })

[@phat80]

Это не совсем JS код. Это jQuery код. Я бы вообще сейчас не стал использовать jQuery, так как эта библиотека была разработана очень давно, когда писать какие-то моменты на JS + HTML 4 было крайне не удобно. В HTML5 добавили много плюшек, да и JS с тех пор вырос. Сейчас можно в принципе обходиться легко без jQuery. Не понимаю, зачем ее до сих пор используют.

[@KindCat21]

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

[@FreelancerLifeStyle]

Спасибо! Все верно, нужно помогать!

[@boonson51]

Фрилансер по жизни, ты красавчик! всё подробно объясняешь и порядок в коде. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@artemvalkov491]

Доступно, понятно, круто! Никогда бы не подумал о таких "мелочах" в юзабилити. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@alexandr8978]

Здорово! Я редко жду новых видео на ютуб, но твои исключение)) Спасибо!

[@FreelancerLifeStyle]

Спасибо, я рад 👍😅

[@Mykhailo_Vdovychenko]

Это гениально! Настолько все просто, красиво, идеально! 10/10! Спасибо, Вам, за такой чудесный урок! 👍👍👍

[@МихаилРазуваев-ь6л]

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

[@FreelancerLifeStyle]

Спасибо! 👍

[@Faradenza-sb3mj]

напишу комент чтоб больше продвинуть автора

[@rozovays]

Ура! Получилось! Добавила код let menu=document.querySelector('.header__list'); menu.onclick=function(){ $('.header__burger, .header__menu').toggleClass('active'); }; чтобы меню закрывалось. И еще классу .header__menu .active добавила top:50px, чтобы заголовок меню оставался исходного цвета. Пока только учусь, поэтому буду благодарна за комментарий о правильности/некорректности исправлений

[@Masimkaify]

Спасибо за код! Второй раз сейчас сверстал меню (решил сделать именно правильно от А до Я, шаг за шагом) и возникла такая проблема, оно не закрывалось при клике на ссылку :( Первый раз когда верстал, я бегло посмотрел урок, стилизацию делал сам (вышло неправильно походу, но визуально норм :) ) и всё работало, очень странно! Есть подозрение, что где-то во вложенности беда, 1-е моё меню было без БЭМ и в половину меньше классов. Других вариантов "почему?" пока нет, т.к. JS код тот же! P.S. Небольшой баг с этим кодом, если нажать на пустое место в бургере, он закрывается, но класс .lock у body не убирает. Я еще JS не знаю, предполагаю, что это легко лечится)

[@nikobelich5470]

Целиком и полностью поддерживаю слова начинающего верстальщика ;) Очень помог, спасибо !

[@FreelancerLifeStyle]

Пожалуйста!

[@АлександрЧернов-х2у1и]

Который раз смотрю это видео) Как учебник) Делаю уже 4 свой заказ. Жека - ты супер чел!)

[@dmitrydmitriev617]

Отличный урок. Если кому нужно, переключение классов на JS (без jQuery): (() => { window.onload = () => { let header__burger = document.querySelector('.header__burger'); let header__menu = document.querySelector('.header__menu'); let body = document.querySelector('body'); header__burger.addEventListener('click', (e)=> { header__burger.classList.toggle('active'); header__menu.classList.toggle('active'); body.classList.toggle('lock'); }) } })();

[@FreelancerLifeStyle]

Спасибо, знаю. Просто решил сделать вход в JS через JQ из-за низкого порога.

[@ДарьяАрсеньева-х9и]

Спасибо тебе, добрый человек)

[@АннаКурдюкова-й8ы]

Вы же просто бог верстки! Я с минимальным набором знаний все-таки сделала это меню и оно работает!!!❤❤❤

[@АндрейЛопин-щ2р]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@vision2817]

Лучший урок по меню что я видел в своей жизни! Спасибо за образование!!! Если у кого то постоянные проблемы с меню, то этот урок для Вас! Все моменты раскрыты!

[@ОльгаШамановская]

Спасибо огромное!!! С меня лайк:)) И ещё нужно руки оторвать, тем кто ставит дизлайки😡 Как так можно? Реально крутой урок!

[@FreelancerLifeStyle]

Пожалуйста! Рад что нравится!

[@ПатиматИсалабдулаева]

Получилось почти сразу. Была проблема в 1 месте, оказалось, пропустила точку. такие ошибки свойственны новичкам. Все уроки Жеки крутые

[@ЕвгенийХорват]

Огромное спасибо Женя.Супер, то что я искал. Удачи и процветания тебе и твоему каналу.

[@FreelancerLifeStyle]

Спасибо, я рад!

[@R2D2Krl]

Спасибо! У меня у новичка получилось со второго раза. Если бы не прервала работу в первый раз, то и с первого бы получилось. Начала по новой и потом поняла где ошибка, одинаковые названия классов сбили с толку, и то, что надо было писать в медиазапросе написала в другой части кода. Очень понятно, очень вдохновляюще!

[@Leon-hm5tk]

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

[@FreelancerLifeStyle]

Супер! Я рад что нравится! 👍🤘

[@SergeLuncarOfficial]

Шикарный разжеванный и детальный контент.Всегда смотрю и просвещаюсь. Благодарю за ваш труд!

[@АргенАкимов-м1б]

Большое спасибо... я горжусь с вами!!!

[@ИЗБАЧИТАЛЬНЯ-ш9о]

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

[@artyomvoytenko1237]

На высоте, как обычно) Очень круто)

[@FreelancerLifeStyle]

Спасибо! 👍

[@sarfarozhakimov108]

любое видео , которую всегда смотрю в конце всегда появляются вопросы.Но у тебя все четко и офигенно.Огромное Спасибо тебе!

[@УмалатГасанов-ч9э]

Привет фрилансер по жизне. По-любому здесь надо оставить комментарий с благодарочкой. Как всегда по красоте все, без лишнего флекса, тупа лайк этому видеа. Бродяги кто читает тоже лайк зарядите молодому фрилансеру, по красоте делает

[@FreelancerLifeStyle]

Спасибо!

[@Troll_Trollich]

Жэка, ты супер. Начиная от манеры "встречать" на каждом видео, заканчивая подробной инструкцией. Я не умею верстать. Учусь по твоим урокам, но с тобой всё получается! Спасибо, Учитель!

[@FreelancerLifeStyle]

Пожалуйста!

[@alfa_main]

Спасибо большое за видео, просто пушечка) Что не новинка, так топчик всегда у тебя) Удачи тебе и побольше подписчиков)

[@FreelancerLifeStyle]

Спасибо!

[@arixqsa2832]

Вы number one, уже не представляю свой день без ваших видосов)

[@taran_dm]

У Вас, как всегда все на высшем уровне! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@bohdanovk]

Для новичков также было бы полезно узнать, как закрывать меню, когда пользователь кликает на пункт этого меню. Мелочь, но думаю стоило учесть.

[@marynakotova7932]

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

[@jossmetthh7773]

@@marynakotova7932 подскажите как вы это исправили. Очень нужно. Буду благодарен

[@jossmetthh7773]

подскажите как вы это исправили. Очень нужно. Буду благодарен

[@turalinov]

Нереально годный контент, никак не находил время посмотреть ваши видео. Открыл для себя ваш канал из рекламы Артема Исламова, и как-то посмотрел совместный стрим вместе с ним, а сегодня мне понадобилось сделать бургер-меню и я наткнулся на ваше видео, вы объяснили все на пальцах. Спасибо вам за ваш труд. Мой опыт в вебе более 3 года, в основном программирую на php/js, но в верстке много чего не освоено) Буду учиться у вас!

[@pushkareff]

Лойк за body.lock :) Дякую, друже! Взагалі на твоєму каналі круті оператори, монтажери, звукорежи і програмісти! :) Хай щастить тобі! Привіт з Києва.

[@FreelancerLifeStyle]

Дякую! Поки роблю все сам)

[@daniilkolevatykh7051]

Огромное тебе спасибо! Я делаю WEB-проект и решил не пользоваться Bootsrtrap, так как иногда он мешает в реализации своих идей, хотя удобен и красив, поэтому решил сделать обнуление стиля и начать стилизовать всё с нуля - ты очень мне помог. Благодарствую!

[@alexes.bochkarev]

Как же всё просто, но не в моей голове!

[@АннаКибенко-у3х]

У меня все получилось. Это фантастика. Я меньше, чем начинающий верстальщик, Женя, мне кажется, и кота научит. Спасибо

[@Artemik-dv7kw]

У меня почему-то overflow: auto; не работает

[@req6841]

Спасибо, мучался полтора года над оптимизацеей, очень помог! Таких видео не где нет.

[@FreelancerLifeStyle]

Спасибо!

[@МаксимКрутов-е8б]

Класс! Невероятно полезная рубрика. Делайте пожалуйста побольше таких видео!

[@FreelancerLifeStyle]

Спасибо! Обязательно! 👍

[@norixweb2765]

Не знал даже как подключить JQuery, испытывал большие трудности потому что не могу докончить этот урок. Но когда во всём детально разобрался и сделал то что запланировал, понял что логика всецело понятная. Впервые наткнулся на твои уроки и очень тебе благодарен, желаю тебе больших успехов в твоём деле, ведь ты без бзды крут парень)

[@dexterholland4430]

Как всегда сто из ста) спасибо большое! Ждем уроки по скриптам)

[@FreelancerLifeStyle]

Спасибо!

[@alexsandraaleksa3188]

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

[@shusilber4867]

Интересно, доступно, полезно! Потрясающий урок!

[@FreelancerLifeStyle]

Спасибо!

[@ОльгаЛитвинова-ж8ш]

Добрый день! Благодарю, Женя! Бургер-меню - часто встречающийся элемент верстки, элегантное решение, важные нюансы по юзабилити, понятные обьяснения! Успехов, мира, развития канала и новых полезных видео! 👍🤝🙂

[@sh_495]

Помог очень сильно, спасибо огромное, не планируешь открыть собственный курс по веб-разработке?

[@FreelancerLifeStyle]

У меня бесплатный курс с нуля БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // #домавместе: kzbin.info/aero/PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr

[@diana_tuz]

Клас) дуже дякую за таку корисну і детальну інформацію ☺️

[@andlivi7860]

Спасибо. Учусь у ВАС. Очень логичные пояснения и доброжелательное изложение материала. Как бывший преподаватель скажу, что Вы мастер с большой буквы в этом деле. Еще раз спасибо.

[@НикитаЧернявский-ы7в]

Супер годнота. С меня лайк

[@FreelancerLifeStyle]

Спасибо! Спасибо! 😅

[@-UAcontent-]

Твої відео можна передивлятись постійно! Кожного разу відкриваєш для себе щось нове, щось, над чим годинами раніше просиджувала, а тут - ось воно - оптимальне та просте рішення!)))

[@FreelancerLifeStyle]

Дякую! Радий що корисно!

[@onebytesiteit30-75]

6:10 чаще всего вот на таких моментах сидишь в гугле по полтора часа а потом "ДА ЁБ;№"!;№";1 ж да серьезно чтоли да ;№";№";№2 %:%;;№"% так то а ." через пол часа "ну теперь знать буду"

[@СергейТемников-м8с]

Привет, зачетное меню! Но я бы добавил еще три строчки для полного функционала, а именно: при нажатие на ссылку менюха должна закрываться, т.е. отменять класс 'active'. $('.header__menu .header__link').click(function(event){ $('.header__burger, .header__menu').removeClass('active'); $('body').removeClass('lock'); });

[@FreelancerLifeStyle]

Верно, но это нужно если речь идёт об одностраничном сайте. В данном случае достаточно того что есть.

[@СергейТемников-м8с]

@@FreelancerLifeStyle Согласен )))

[@ИмяФамилия-э4ф7в]

Эм, я не силён в jQuery, но если я правильно понял, то нажатие в область меню мимо пункта тоже закроет его, что не очень хорошо. Тут нужно target проверять.

[@yootoosick8164]

9:05 начало бургера

[@diasoralbekov6465]

cпс

[@puppeyb1024]

С тобой прошел свое первое тестовое задание, спасибо, фрилансер)

[@FreelancerLifeStyle]

Супер! Пожалуйста!

[@zmeygorynych5684]

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

[@maksim3281]

Скорей всего в js когда ты будешь обрабатывать нажатие на эл-т, то просто удалишь класс active

[@nikolay7618]

Сидел долго, но все получилось. Спасибо подача и содержание как всегда ОТЛИЧНОЕ!!!

[@FreelancerLifeStyle]

Я рад!

[@НатальяТолстая-д2т]

О, годнота подьехала!

[@FreelancerLifeStyle]

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

[@yuriilukianovych8660]

Спасибо! Повторил всё за тобой, и после применил на уже свёрстаном сайте. Всё получилось с первого раза. Спасибо, Жека!

[@FreelancerLifeStyle]

Супер! Я рад!

[@dimitriitkach7697]

После 9 минуты ( рисование полосок ) полоски не ресуються и дальше не работают и другие части в JS и за этого. У кого то есть работаюший код html - css - JS ?

[@TVproFX]

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

[@FreelancerLifeStyle]

Спасибо! Я рад!

[@ДавидТкаченко-н1и]

Класс! А будут уроки по Ajax и jQuery?

[@FreelancerLifeStyle]

Спасибо! Конечно будут!

[@wireinet]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@ВалерийКостинский]

как раз обедаю - бургером, за одно сверстаю) спасибо!))

[@FreelancerLifeStyle]

Приятного!

[@script2049]

Верстал по данному уроку, всё работает как и в видео. Закомментил важные моменты, теперь есть отличная инструкция для создания бургера, что очень важно для адаптивной верстки. Хвала Жеке, такие видео здорово помогают понять современные методы верстки, это просто спасение для начинающих! УРА!

[@petr_ru-Ru]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@ЮрийКандраль]

Спасибо ОГРОМНОЕ!!! Самый классный адаптив на ютубе)

[@FreelancerLifeStyle]

Спасибо! 👍

[@ik1domari]

Этот код без jQuery: let burger = document.querySelector('.header__burger'); let menu = document.querySelector('.header__menu'); function toggleBurger() { burger.addEventListener('click', function() { burger.classList.toggle('active'); menu.classList.toggle('active'); document.body.classList.toggle('lock'); }) } toggleBurger();

[@aleksandr_twitt]

Спасибо большое за видео! Стало всё понятно и намного яснее! Очень тебе благодарен! thanks :)

[@SkilleR2]

Хочу JS..

[@FreelancerLifeStyle]

Скоро будет)

[@ДмитрийЯ-з2д]

Блин, пытался посмотреть, но отвлекают )) ЛАЙК однозначно! Посмотрю позже, и впечатлениями поделюсь. Но, уже чувствую, что будет круто! А в качестве подачи сомнений нет, всё на высшем уровне!

[@FreelancerLifeStyle]

Спасибо! Надеюсь будет полезно!

[@ДмитрийЯ-з2д]

@@FreelancerLifeStyle твои видосы просто не могут быть не полезными 👍👍👍

[@vlnssteyrin4841]

делаю точь в точь как в видео ничего не получается

[@anonim18pokib]

+

[@ИнЯнь-й2э]

У меня тоже вот прям ничего ничего не получается

[@xstep7533]

Вы подключал и джикерри?

[@smykoil]

Видео классное, давно хотел подтянуть вёрстку, именно эти специфичные элементы сайта, которые не очевидно как осуществить. Большое, человеческое спасибо

[@teama539]

Сделайте, пожалуйста, архив с кодом обще доступным

[@ЮрийРудь-ш4г]

Каждый раз, когда смотрю как он это делает - чувствую себя личинкой веб разработчика... Жека, как всегда - РЕСПЕКТ!!!

[@asdfauiuhasduhfpaiuduy2]

тут типа все всем понятно? спасибо, спасибо, спасибо... и никакого обсуждения. Само собой спасибо.

[@rkua9594]

Бомба,Пушка,Ракета😉Дякую ви найкращий!🤘

[@BLGamesChannel]

Такая частота выхода видео не может не радовать! Сейчас посмотрим как это делается! А то у меня пока это получается кх кх...криво!)

[@FreelancerLifeStyle]

Спасибо! Надеюсь будет полезно)

[@sia_mate]

Большое спасибо! Все получилось, очень полезный урок 👍

[@gevorgmovsisyan5153]

Грехом будет тут лайк не поставить

[@FreelancerLifeStyle]

Спасибо!

[@RuslanZolotoy]

Объяснение понятное и структурированное. Спасибо за качественные уроки!

[@FreelancerLifeStyle]

Пожалуйста!

[@ЭйсВентура-б8д]

Спасибо Женя !! Хоть ты и быстро очень пробежался,по все равно,что то да я понял, лучше бы чуть чуть по медленнее,мозги не успевают переваривать ))Буду сегодня делать бургер благодаря тебе.