Правое бургер меню - подробное объяснение. HTML + CSS + JS
HTML-код
- Опубликовано: 28 янв 2023
- Мобильное меню справа с анимацией - быстро и просто. HTML + CSS и совсем немного Javascript.
👁🗨 Исходники кода в телеграм канале: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend_du2
👁🗨 Дзен: dzen.ru/frontend_it
Видео у вас хорошие получаются, и то что вы подумали что говорите много - НЕТ просто вы глубоко погружаете в тему для того что бы мы ваши зрители были внимательно сосредоточены. Момент 16:50
Просмотрела "левый бургер", просмотрела "правый бургер", реализовала у себя в проекте. Подписалась на Ютуб канал, на Телеграмм канал, нашла там исходники и скопировала себе в проект доп. фишечки. Лайки поставила, коммент написала. Буду остальные ваши видео смотреть... В общем, большое спасибо!
Очень приятно читать такие комментарии, спасибо за отзыв и подписку😊
Огромное спасибо, это самое понятно объяснение, которое я видел, огромнейшее спасибо вам, лайк и подписка автоматом 🥰
Александр, спасибо Вам большое за такое подробное объяснение! В сети встречаются видео где всё делают за 15 минут при этом никаких объяснений почему и зачем вместо объяснений - наложена музыка. У Вас же всё подробно и понятно, и цветами выделяете элементы и комментируете отлично + тёплый ламповый вайб! 🙂 Успехов Вам в разработке и в продвижении каналов! Очень классное видео, сложно сделать лучше👍
Огромное спасибо за такую обратную связь ☺ рад, что мои видео вам полезны и эстетически приятны 🙃 вам также желаю удачи в изучении JS, оставайтесь на канале 🤗
Ооо, как я мучался с этим правым меню))
Да прибудет Вам +100 в карму за такое видео)
Большое вас спасибо за приятный комментарий )
Александр, спасибо большое, вы как всегда на высоте, ждем новый контент
Спасибо за замечательный комментарий :)
Не передать словами, как мне помогло ваше объяснение! Спасибо за подробный разбор, последовательную подачу и внимание к деталям!
Спасибо вам :) Мне оченm приятно получить такие отзывы. Рад, что ролик вам помог )
Спасибо огромное за это видео, все понятно и ясно!!!! Вы проделали обалденную работу!
Спасибо Вам за такой комментарий, это очень мотивирует и заряжает на новые видео
Александр, у вас такой приятный голос, что я готова выполнять все ваши указания. Хотелось бы ещё от вас разговорных видео
Большое спасибо )) Мне очень приятно. Наверное стоит подумать о озвучку книг )))) Да, мне было бы интересно показать и рассказать вам о чем то интересном. Не только о верстке и js. Но конечно в рамках темы IT. Вы хотели бы такие ролики для просмотра?
@@alex_dudukalo пожалуйста) и мне приятно, что ответили, вы такой внимательный и заинтересованный человек. В телеге смотрела ваш стрим с другими разрабами, было бы классно ещё что-то подобное уже в формате видео. Или можно просто о вас послушать, личный опыт, трудности и прочее)
@@upwlqwp )) Для меня очень важна коммуникация. Потому что это интересно и конечно полезно. Даа, я уже планирую такие встречи и отдельные ролики. Спасибо, что были. Приходите еще. Скоро там же в телеграме сделаю новый анонс)
Супер, очень полезная информация. Раньше боялся, что это сложно, и не знал, с чего начать. А теперь могу сделать этот бургер самостоятельно) Благодарю за труд!
Спасибо за Ваш комментарий😊 надеюсь и другие видео курса будут вам полезны
Благодарю тебя, добрый человек! Ты очень талантливый ! Прекрасно объясняешь, чудесный контент! Успехов, мира и добра !!! 🙏🙏🙏
Спасибо за ваш комментарий 😊 Ваша поддержка очень мотивирует 🤗
Алесандр так получилось что всего в одной работе приходилось делать бургер меню справа, и я уже совсем забыл как его скрывать. Вот пересматриваю и вспоминаю!! Спс за вашу работу, так как у вас есть аж два видео по бургер меню с разных сторон))) Спс вам за видео!!!
Всегда полезный контент, спасибо))
Спасибо за ваш приятный отзыв. Не всегда получается быстро ответить (
Спасибо большое за такой ценный урок! Очень помогло. Лайк + подписка
Спасибо за обратную связь😊 ваша поддержка очень вдохновляет 🤗
Спасибо тебе больше. Очень помог. Подписался на твой канал. Буду смотреть как время будет)
Спасибо за отзыв и подписку 😊 Надеюсь и другие видео помогут Вам в изучении JS
Благодарность тебе брат за видео! Очень доходчиво объяснил! Продолжай своё дело, оно у тебя хорошо получается!
Спасибо 🤗 Ваша поддержка очень вдохновляет! Буду стараться и дальше радовать Вас новыми видео 😊
Спасибо за полезный ролик! Очень помогло, впрочем как всегда )
Большое спасибо вам за поддержку 😇
Спасибо! Отличные уроки!
Спасибо вам за ваш отклик и поддержку :)
вы просто космос!!!
Большое вам спасибо)))
Очень полезный контент, большое спасибо!!
Спасибо за ваш комментарий и поддержку :)
Спасибо, очень помогло реализовать функциональность!
Большое спасибо 😊 надеюсь и другие видео оказались Вам полезны
Спасибо. Очень полезно было для меня. Лайк и подписка!
спасибо за вашу поддержку и подписку :)) Рад, что ролик понравился
Как же вовремя, как раз нуждался в этом видео)
)) Надеюсь получится разобраться с видео. Спасибо вам)
Спасибо, мне очень помогло ваше видео!)
Алена, спасибо за Ваш комментарий)) Рад, что видео оказалось Вам полезно 😊
Спасибо 👍
Почему-то пропустил я старт этого ролика, не пришло уведомление… 😮
Почему то не всегда приходят ((
Очень круто, спасибо )
Рад, что ролик вам понравился. Спасибо 🥰
Спасибо! Все подробно, все понятно!
Спасибо за Ваш комментарий 😊
чудесное видео! спасибо за комфортный и милый урок!
Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам интересны))
Спасибо друг,как раз надо так подробно досконально все объяснить)а не тяп ляп которое многие делают,и кстати с тобой я в первые написал код джава скрипта)так что ты отпечатаешься в моей памяти навсегда)в будущем когда стану айтишником буду тебя помнить)спасибо за ролик,очень познавательный и полезный
Спасибо за отзыв 😊 Ваша поддержка очень мотивирует! Рад, что мои видео помогают Вам познавать JS 🙈
помог решить проблемы с бургер меню справа, спасибо за видео!
Спасибо большое за Ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны
Спасибо за классный урок👍👍👍💯!!!
Спасибо за отзыв 🤗 надеюсь и другие видео канала будут вам полезны))
Спасибо вам. Рад, что понравилось видео :)
классное видео!
кстати, MDN предупреждает, что юзать свойство will-change нужно строго при необходимости!
Спасибо вам. Да, вы правы. Лучше не увлекаться этим свойством. Компьютеру приходится много просчитывать заранее при го использовании :)
Подробно,охуительно, качественно
Спасибо, значит работаю в верном векторе ))
Привет. Лайк сходу, видео очень полезное, по крайней мере для меня) У меня вопрос возник во время просмотра.. Почему не использовал gap для расстояния между элементами списка? Просто в другом видео видел gap, а у тебя margin)
Спасибо за ваш комментарий. Прошу прощения за долгий ответ. Да, конечно можно использовать gap ) Так еще удобнее
Очень круто, спасибо.
Спасибо вам за ваш комментарий и поддержку :)
'will-change' - super, thanks a lot my dear teacher!
Спасибо вам ))
Спасибо огромное! Уже неделю пытаюсь разными способами "спрятать" панель справа и всё никак. Самостоятельно додуматься до такого способа просто невозможно. Но это настолько просто оказалось, что прям нет слов...
Короче заебись ролик нормально смотрится ты делаешь акценты на нужных моментах это важно и нет лишней спешки все в принципе заебись 👍
Спасибо )) 40 минут видео многовато. Но может что то полезное в дополнение дал. Хочется все разжевать :)
@@alex_dudukalo Александр, вот за РАЗЖЕВАТЬ отдельное спасибо от меня!)
Очень понравилось. В свое время я делал такие меню только слева, поскольку при попытке его спрятать справа оно уезжало вправо и получалась горизонтальная прокрутка.
Я как всегда, отвечаю не быстро )) Да, решил сделать такой ролик и показать один из способов. Не самый оптимальный, но простой. Надеюсь пригодится в проектах )
Здравствуйте Александр! Все как обычно круто, спасибо! Где музычка? жду видео БЭМ
Спасибо, полезное видео
Спасибо большое за ваш отзыв )
отличное видео
Александр, приветствую.
Спасибо за новую инфу по css свойствам, я за оптимизацию☝🏻
Интересный подход. Сейчас до учу node js, осталось пару модулей и думаю надо приступить к курсовой по продвинутой верстке вспомнить навыки верстки и новые фишки параллельно изучить. Также хочется поставить wakatime для учёта времени🙌🏻
Плодотворного творчества вам😉
Здравствуйте, Михаил. Рад, что вы еще со мной и смотрите ролики ))Как у вас дела идут на работе и развитии навыков? :)
@@alex_dudukalo
Развитие навыков, решил себе немного курс по nodejs усложнить, сам курс без типизации, от самого начало и до конца решил применять ts, да и могу сказать я как то теперь вообще без ts писать немогу.
К алгоритмам все приступить немогу но думаю в ближайшее время приступлю.
И вью хочется поучить и nest js и next js, с только всего, буду на днях как то структурировать.
По работе сижу на основой выполняю таски, доделки, пока что мало нового функционала, в основном починка старого и оптимизация, и сеошники со своими хотелками😅
Стажировку тут прошёл в компании сертификат получил, на боевом проекте все происходило видео органайзер писали в течении двух месяцев.
Мои задачи были перевод сервиса с русского на английский при помощи реакт, онбординги по проекту и конечно исправление багов, вообщем и целом получил хороший опыт, непонравилось только архитектура приложения, ну наверно для этого небольшого приложения свалка компонентов по классике, было нормальным😁
Сейчас ищу параллельно что нибудь по интереснее и может по глобальне, навыков много, хочет закрепить все и использовать на всю катушку.
В спокойном темпе неспеша🙃
У вас все впорядке?
Собираетесь открывать школу онлайн?
Буду рад поучаствовать в ваших проектах, зовите как надумаете🤙🏻
@@user-yg8nn9vp1w Я немного суеверный, не хочется сглазить )))) Но я так рад за вас. Я ведь помню, как мы с вами работали над материалом и сейчас вы уже на таком уровне. Правда искренне рад. Вы молодец. И в этом заслуга только ваших усилий и терпения) Я иногда привожу вас, как пример студентам, которые сталкиваются с трудностями для мотивации. Сейчас я немного набью руку еще в видео и в преподавании и думаю записать курс не большой. А дальше, конечно развивать это направление. Вы знаете, я люблю рассказывать )) Да, конечно. Спасибо за предложение. Я обязательно вам напишу. Спасибо за предложение и за время )
Красава😎
❤️ Спасибо
Здравствуйте, а почему нельзя для body прописать overflow-x:hidden;?
20:53 Александр, подскажите, пожалуйста, как лучше в настоящее время делать бургер, с точки зрения профессионализма, через 3 span или span before и after ?
Спасибо за вопрос :) Есть много способов и я бы не стал выделять их, как лучшие. Мне удобно использовать три span. Что бы указывать им всем сразу одинаковые стили. В случае с span before и after нам придется указать всем им разные настройки. Например для span не нужно указывать свойство content, а для before требуется. В случае, когда мы делаем три span, вы можете сразу всем им указать одинаковые опции. Вообще бургер можно сделать даже двумя before и after, а третью палочку сделать тенью :) Способов много и многие хороши
Спасибо! Проще некуда. Наконец-то я победил бургер
Да-да) БЭМ интересно крайне)
Будем делать БЭМ :) Спасибо вам
спасибо тебе большое, мне 14 и я начал разроботки своего первого сайта, сделал уже очень и подошел к концу работы, но бургер меню все мне запароло> Ты не представляешь сколько я пересмотрел и перечитал информации, но твой ролик решил абсолютно все мои проблемы. Продалжай снимать дальше у тебя это лучши всех получается!
Спасибо за такой отзыв. Мне обчень приятно его было читать. Да, по своему опыту знаю, что с мобильным меню может быть куча проблем и попытался в этом ролике их проработать :) Спасибо, что поделился мнением. Это мотивирует :)
Благодарю. Всё понятно и красиво.
Сделал всё как велено, но оказалось у меня проблема с многоуровневым меню. При наведении уровни меню выпадают на пол секунды и закрываются.
Не понимаю есть ли связь, но находиться ошибка в main.js. Вот сообщение Uncaught TypeError: Cannot properties of null (readin ‘addEventListener’) at main.js:17:32
Столкнулась с проблемой, что не нажимается бургер, джава не работает, перепробовала верстать css по разному но все равно меню не открывается. В чем может быть дело?
Добрый вечер! Подскажите пожалуйста: как быть в том случае, когда в body есть интерактивные элементы? То есть кнопки, формы и т.д. Контейнер для бокового меню занимает всю ширину экрана, из-за этого он блокирует возможность кликать по интерактивным элементам в body. Если поставить кнопке z-index: 999, а ее контейнеру меньшее значение, то соответственно кнопка скроется за body. Возможно что-то упускаю, но буду благодарна за помощь!
Здравствуйте, Виктория. А вы использовали position: absolute для меню?
Спасибо большое и еще пара слов для продвижения!)
UPD. 1) Для промотки хорошо бы таймкоды добавлять в видео,
2) для значка бургера куда проще использовать “button>&# 9776;
Спасибо вам за ваш комментарий и предложения ) Они для меня очень важны)
Да, с символом бургера хорошая идея. Но с анимацией было бы удобно. Но для быстрого решения конечно подходит.
На мобильном если только с планшета :) Но бывает, что и. на компьютере уменьшают окно браузера и пользуются в мобильном режиме сайтом
Спасибо
Спасибо вам :)
спасибо! то что нужно! подскажи как сделать, чтобы бургер меню работало на мобилке при большой вложенности? заранее спасибо!
Здравствуйте, роман. Прошу прощения за долгий ответ. Думаю тут вопрос связан с конкретным примером ) Структуры шапок очень различаются по сложности
Всем привет! Подскажите, почему у меня может не работать св-во transform: transate;
Здравствуйте, тут много вариантов и причин. Без когда сложно разобраться
💥
Спасибо 🔥
42:18 я попробовал навесить листенер на клик по window и меню скрывается
Да, можно делать для body и для window событие клика. Все будет работать так же :)) Спасибо, что досмотрели до конца )
А почему бы не скрыть меню вверх?
Да, так было бы еще проще :)
Спасибо, интересно, понятно, но нужен чистый css по тз
Здравствуйте, спасибо :) Не уверен, что понял вопрос про чистый 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');
});
});
34:20 javascript
Возможно съел пару букв ):)
@@alex_dudukalo не, это таймкод )
Всё было хорошо, до того момента когда мы хотим скрыть меню. Этот способ не всегда подходит.
Большое спасибо за комментарий, прошу прощения за долгое ожидание ответа, не всегда есть возможность быстро ответить 🙈 В видеоролике показан один из способов, наверное один из самых простых, для того, чтобы ускорить скрытие меню и не усложнять это, но вы правы, у этого способа есть некоторые нюансы)
Кнопку можно 20 на 20 а остальное падинги 😏😏😏
Да :) Но в любом случае позиционирование внутри абсолютное у спанов )) паддинги не сильно будут на них влиять. Но идея для варианта решения хорошая :)
Много байта на лайки, хотя я ещё до показа кода его ставлю)))
)) Да, может в самом начале будет достаточно )) Но лайки правда нужны. Спасибо, что оставляете их :)
@@alex_dudukalo по коду было бы ещё возможно кому-то интересно, как заблокировать скрол и разблокировать его при клике на ссылку в меню, и так же закрывать это меню при клике на ссылку)))
Дякую відео допомогло
Спасибо вам :)
У меня меню уезжает вправо, и занимает место, хоть и становится невидимым из-за visibility:hidden. Из-за этого появляется полоса прокрутки, что является помехой. Получилось от этого избавиться удалением параметра visibility у элемента, и установкой другого параметра overflow-x: hidden; для враппера страницы.
Да, это рабочее решение :) Я рад ,что вы смогли это сделать. Примерно это же я показываю в этом ролики. Спасибо вам )
Получилось очень полезно, спасибо!
Рад, что видео было полезным :) Спасибо