Правое бургер меню - подробное объяснение. HTML + CSS + JS 

Очень приятно читать такие комментарии, спасибо за отзыв и подписку😊

Огромное спасибо за такую обратную связь ☺ рад, что мои видео вам полезны и эстетически приятны 🙃 вам также желаю удачи в изучении JS, оставайтесь на канале 🤗

Большое вас спасибо за приятный комментарий )

Спасибо за замечательный комментарий :)

Спасибо вам :) Мне оченm приятно получить такие отзывы. Рад, что ролик вам помог )

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

Спасибо за Ваш комментарий😊 надеюсь и другие видео курса будут вам полезны

Большое спасибо )) Мне очень приятно. Наверное стоит подумать о озвучку книг )))) Да, мне было бы интересно показать и рассказать вам о чем то интересном. Не только о верстке и js. Но конечно в рамках темы IT. Вы хотели бы такие ролики для просмотра?

@@alex_dudukalo пожалуйста) и мне приятно, что ответили, вы такой внимательный и заинтересованный человек. В телеге смотрела ваш стрим с другими разрабами, было бы классно ещё что-то подобное уже в формате видео. Или можно просто о вас послушать, личный опыт, трудности и прочее)

@@upwlqwp )) Для меня очень важна коммуникация. Потому что это интересно и конечно полезно. Даа, я уже планирую такие встречи и отдельные ролики. Спасибо, что были. Приходите еще. Скоро там же в телеграме сделаю новый анонс)

Спасибо за ваш комментарий 😊 Ваша поддержка очень мотивирует 🤗

Спасибо за ваш приятный отзыв. Не всегда получается быстро ответить (

Спасибо за обратную связь😊 ваша поддержка очень вдохновляет 🤗

Спасибо за отзыв и подписку 😊 Надеюсь и другие видео помогут Вам в изучении JS

Спасибо 🤗 Ваша поддержка очень вдохновляет! Буду стараться и дальше радовать Вас новыми видео 😊

Большое спасибо вам за поддержку 😇

Спасибо вам за ваш отклик и поддержку :)

Большое вам спасибо)))

Спасибо за ваш комментарий и поддержку :)

Большое спасибо 😊 надеюсь и другие видео оказались Вам полезны

спасибо за вашу поддержку и подписку :)) Рад, что ролик понравился

)) Надеюсь получится разобраться с видео. Спасибо вам)

Алена, спасибо за Ваш комментарий)) Рад, что видео оказалось Вам полезно 😊

Почему то не всегда приходят ((

Рад, что ролик вам понравился. Спасибо 🥰

Спасибо за Ваш комментарий 😊

Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам интересны))

Спасибо за отзыв 😊 Ваша поддержка очень мотивирует! Рад, что мои видео помогают Вам познавать JS 🙈

Спасибо большое за Ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны

Спасибо за отзыв 🤗 надеюсь и другие видео канала будут вам полезны))

Спасибо вам. Рад, что понравилось видео :)

Спасибо, значит работаю в верном векторе ))

Спасибо вам. Да, вы правы. Лучше не увлекаться этим свойством. Компьютеру приходится много просчитывать заранее при го использовании :)

Спасибо за ваш комментарий. Прошу прощения за долгий ответ. Да, конечно можно использовать gap ) Так еще удобнее

Спасибо вам за ваш комментарий и поддержку :)

Спасибо вам ))

Спасибо )) 40 минут видео многовато. Но может что то полезное в дополнение дал. Хочется все разжевать :)

@@alex_dudukalo Александр, вот за РАЗЖЕВАТЬ отдельное спасибо от меня!)

Я как всегда, отвечаю не быстро )) Да, решил сделать такой ролик и показать один из способов. Не самый оптимальный, но простой. Надеюсь пригодится в проектах )

Спасибо большое за ваш отзыв )

Здравствуйте, Михаил. Рад, что вы еще со мной и смотрите ролики ))Как у вас дела идут на работе и развитии навыков? :)

@@alex_dudukalo Развитие навыков, решил себе немного курс по nodejs усложнить, сам курс без типизации, от самого начало и до конца решил применять ts, да и могу сказать я как то теперь вообще без ts писать немогу. К алгоритмам все приступить немогу но думаю в ближайшее время приступлю. И вью хочется поучить и nest js и next js, с только всего, буду на днях как то структурировать. По работе сижу на основой выполняю таски, доделки, пока что мало нового функционала, в основном починка старого и оптимизация, и сеошники со своими хотелками😅 Стажировку тут прошёл в компании сертификат получил, на боевом проекте все происходило видео органайзер писали в течении двух месяцев. Мои задачи были перевод сервиса с русского на английский при помощи реакт, онбординги по проекту и конечно исправление багов, вообщем и целом получил хороший опыт, непонравилось только архитектура приложения, ну наверно для этого небольшого приложения свалка компонентов по классике, было нормальным😁 Сейчас ищу параллельно что нибудь по интереснее и может по глобальне, навыков много, хочет закрепить все и использовать на всю катушку. В спокойном темпе неспеша🙃 У вас все впорядке? Собираетесь открывать школу онлайн? Буду рад поучаствовать в ваших проектах, зовите как надумаете🤙🏻

@@user-yg8nn9vp1w Я немного суеверный, не хочется сглазить )))) Но я так рад за вас. Я ведь помню, как мы с вами работали над материалом и сейчас вы уже на таком уровне. Правда искренне рад. Вы молодец. И в этом заслуга только ваших усилий и терпения) Я иногда привожу вас, как пример студентам, которые сталкиваются с трудностями для мотивации. Сейчас я немного набью руку еще в видео и в преподавании и думаю записать курс не большой. А дальше, конечно развивать это направление. Вы знаете, я люблю рассказывать )) Да, конечно. Спасибо за предложение. Я обязательно вам напишу. Спасибо за предложение и за время )

❤️ Спасибо

Спасибо за вопрос :) Есть много способов и я бы не стал выделять их, как лучшие. Мне удобно использовать три span. Что бы указывать им всем сразу одинаковые стили. В случае с span before и after нам придется указать всем им разные настройки. Например для span не нужно указывать свойство content, а для before требуется. В случае, когда мы делаем три span, вы можете сразу всем им указать одинаковые опции. Вообще бургер можно сделать даже двумя before и after, а третью палочку сделать тенью :) Способов много и многие хороши

Будем делать БЭМ :) Спасибо вам

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

Здравствуйте, Виктория. А вы использовали position: absolute для меню?

Спасибо вам :)

Спасибо вам за ваш комментарий и предложения ) Они для меня очень важны) Да, с символом бургера хорошая идея. Но с анимацией было бы удобно. Но для быстрого решения конечно подходит. На мобильном если только с планшета :) Но бывает, что и. на компьютере уменьшают окно браузера и пользуются в мобильном режиме сайтом

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

Здравствуйте, тут много вариантов и причин. Без когда сложно разобраться

Спасибо 🔥

Да, можно делать для body и для window событие клика. Все будет работать так же :)) Спасибо, что досмотрели до конца )

Да, так было бы еще проще :)

Здравствуйте, спасибо :) Не уверен, что понял вопрос про чистый CSS? :)

@@alex_dudukalo по заданию пока js не подключаем, поэтому пока застряла на этапе смены open/close

@@user-sg7dn9wz2r по заданию в Скиллбокс или к вам есть иные проекты ?

@@alex_dudukalo в RS School учусь, проект пока adaptive html, css. По JS только через неделю тз будет. Но и лично мне уже интересно решить ребус. Жаль опыта маловато пока

@@user-sg7dn9wz2r к сожалению такого ролика у меня пока нет(( бургер меню без js. Но хочу сказать, что реализовать это можно. Например через чекбокс

поддерживаю как идею на следующий ролик

Да, можно. Мне не очень нравится анимировать svg. Это выглядет громоздко. Но конечно анимация svg важная и полезная тема. Записал в список тем )) Спасибо

:) Да, есть такое. Особенно, когда без сценария и подготовки сразу делаешь ролик

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

@@alex_dudukalo я использовал 100vw и нормально)

Этот момент я не предусмотрел. Думаю запишу ролик с кликом по ссылке и закрытием меню. Но вы можете доработать код. Добавить клик по ссылке в кода (если есть понимание) и закрыть меню теми способами, которые есть видео, а именно убрать класс :)

Вот решение: const navLinks = document.querySelectorAll('.nav__item-link'); navLinks.forEach(link => { link.addEventListener('click', () => { document.querySelector('header').classList.remove('open'); }); });

Возможно съел пару букв ):)

@@alex_dudukalo не, это таймкод )

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

Да :) Но в любом случае позиционирование внутри абсолютное у спанов )) паддинги не сильно будут на них влиять. Но идея для варианта решения хорошая :)

)) Да, может в самом начале будет достаточно )) Но лайки правда нужны. Спасибо, что оставляете их :)

@@alex_dudukalo по коду было бы ещё возможно кому-то интересно, как заблокировать скрол и разблокировать его при клике на ссылку в меню, и так же закрывать это меню при клике на ссылку)))

Спасибо вам :)

Да, это рабочее решение :) Я рад ,что вы смогли это сделать. Примерно это же я показываю в этом ролики. Спасибо вам )

Рад, что видео было полезным :) Спасибо