Бургер меню - просто. HTML + CSS + JS
HTML-код
- Опубликовано: 19 окт 2022
- Мобильное меню с анимацией - быстро и просто. HTML + CSS и совсем немного Javascript.
👁🗨 Исходники кода в телеграм канале: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend_du2
👁🗨 Дзен: dzen.ru/frontend_it
У вас отличные способности доходчиво объяснять сложные вещи! Получается лучше чем у раскрученных каналов.
многотысячно плюсую, всякие "Фрилансер по жизни" и рядом не стоят
Спасибо большое ща ваше сообщение. Я буду стараться делать лучше. И большое роликов. Вы вдохновляете.
Улыбнулся, мне очень приятно :)
Золотой человек, спасибо Вам огромное!!! Процветания и роста Вашему каналу)) Про меню справа будет очень полезно узнать!
Здравствуйте, спасибо за ваш теплый комментарий. Рад, что видео пригодилось. Да да, я уже получил несколько комментариев про меню справа. Ставлю в план :)
Спасибо вам большое! Я прямо счастлива, от того, что получилось наконец-то))) Вчера делала по уроку из курса... У вас талант, объяснять просто и выбирать самое простое решение.
Спасибо, автор. Редко бывает, что человек в чём-то разбирается и может этому научить. У вас талант и в первом, и во втором.
Спасибо большое! Все подробно с объяснением шагов, 🤩🤩🤩очень круто, что после каждого действия показываете, что произошло с элементом в итоге.
Я рад, что в этом видео вы смогли раскрыть для себя эту тему и разобраться со мной в создании меню. Буду учитывать это в следующих видео и чаще показывать браузер ) Спасибо :)
Огромная благодарность Александру за самое понятное объяснение! Однозначно подписка и лайк!
Спасибо от всей души! Просмотрела много разных видео на эту тему, но только с вами в итоге все получилось!
Спасибо большое, мне так легче учиться, когда смотрю вас. Вы очень хорошо учите и показываете, спасибо вам за такой великолепный труд!
Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны 🤗
Урок максимально понятный. Столкнулась с необходимостью создать адаптив и меню бургер. Страшно даже было начинать, не знала, за что браться. С вашим уроком все получилось с первого раза! Спасибо))
Большое спасибо за ваш отзыв ) Попытался в этом ролике разобрать все. Анимацию, верстку, адаптивность и немного JS. Очень рад, что видео вам помогло. Надеюсь и другие ролики будут для вас полезны )
Александр не останавливайся. Только вперед! Разжевывай подробнее и будет те подписота, если будешь показывать наглядно. Здоровья те!
Да, буду работать. Надеюсь )) По крайней мере это интересно ) Спасибо, и тебе здоровья :)
Огромная вам благодарность!! Объяснили так понятно, как никто не объяснял. Буду смотреть и другие ролики. Подписалась 🤍
Александр, вы самый хороший человек на свете.
Какой приятнейший комментарий от вас. Трудно не улыбаться. Спасибо вам за настроение :)
Посмотрел, офигел и понял сколько всему еще учится)
Видео, в любом случае очень полезное, особенно для таких как я. Спасибо вам!
Спасибо за комментарий. Здорово , что материал полезный. Я тоже учусь делать ролики для ютуба. Спасибо за поддержку :)
Александр, круто получилось! Желаю процветания вашему каналу!
Спасибо большое. И за такие слова тоже. Желаю каналу крутых видео и таких же хороших подписчиков :)
Это великолепно, и больше никаких слов
Спасибо за ваш приятный комментарий. Я рад, что ролик вам понравился)
Много смотрел видео, это единственное по которому получилось сделать, поэтому лайк сразу
Спасибо за просмотр, лайк и конечно за крутой комментарий. Наверное я делаю что то правильно)
Отличный урок, спасибо большое. Вы так понятно обьясняете. Рада, что нашла ваш канал!)
Ваша поддержка очень мотивирует🤗 спасибо!) оставайтесь на канале 😊
Александр, спасибо огромное за ваши видео. Вы очень просто и понятно объясняете. Если есть возможность снять видео про табы, свайпер и аккордеон. Удачи вам и процветания🙌
Здравствуйте, Юлия. Спасибо вам за вашу поддержку. Я очень рад, что ролики вам нравятся и, что они помогают задачу. По табам планирую, а по Свайперу как раз сегодня опубликовал: ruclips.net/video/HKdFemmXtpU/видео.html
Надеюсь понравится :)
Очень полезное видео, как и всегда!!! Спасибо, Александр 😉
Спасибо за ваш отклик :) И за поддержку
Огонь 🔥, спасибо большое, очень хорошо интересно и понятно всё! Ещё раз спасибо
Отличное видео!все чётко,по полочкам и без воды.Так держать!👍🏻
Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны))
Спасибо, что вы все так подробно объясняете. Для новичков это действительно важно. Я горжусь, что у меня такой классный куратор 😊
Спасибо вам за приятнейший комментарий. Мне это очень приятно и это мотивирует. Особенно приятно читать утром. Заряжает :)
Я теперь тоже к нему хочууууу😪
Спасибо огромное!замечательное видео.перелопатила просто кучу материала-Ваше просто лучшее!)да.снимите пожалуйста видео где меню справа.подписалась на Ваш канал.буду с удовольствием смотреть Ваши видео и учиться))
Спасибо) Полезнейший комментарий от вас. Да, есть запрос на такой ролик. В течении недели обязательно запишу такое видео :)
Все было доступно и понятно! Смогла внедрить в свой проект, большое спасибо за такой замечательный урок ❤
Очень рад, что все получилось :) Спасибо за ваш приятный комментарий )
спасибо за видео мне было очень нужно было это код, удачи следующых видео
Спасибо! Всё, оказывается, очень просто, если, конечно, находится человек, который умеет доходчиво объяснить.
)) Спасибо вам за такой комментарий) Вначале работы с версткой меню меня устрашало. Но стоит сделать его пару раз, то все становится простым )
Как всегда КЛАСС!!!👏👏👏 Спасибо за Вашу работу!!! Жду нового контента!!!!👍
Спасибо за обратную связь 🤗 ваша поддержка вдохновляет но новые видео))
Спасибо за ролик! Наверное, самый полезный из актуальных на RUclips!
Большое спасибо за теплый комментарий от вас )
Суперское видео, четко, понятно и по делу, спасибо большое
Очень классно объясняете. Спасибо!
Спасибо за ваш комментарий. Мне их приятно читать :)
Все очень доступно и понятно! Порадовали попутно дополнительные "фишечки" работы с VSCode
Спасибо за Ваш отзыв))Да, хочется конечно записать отдельный ролик по инструментам VSCode и рассказать больше про настройку редактора кода))
Спасибо за видео, цель к Новому году, вижу, выполнена на ютубе)
Да 🙈 большое спасибо за Вашу поддержку, к сожалению не всегда получается быстро ответить
- По программируем?
- Не волнуйтесь, будет не страшно. Все будет быстро!
Определенно лайк!😄
))) Капелька оптимизма не помешает, когда речь идет про программирование ))
Спасибо тебе за видео, очень круто и четко объяснил!
Благодарю, ждем видео бургер справа)
Спасибо вам :) Да, хочется такое меню тоже сделать :)
Просто, эффективно, понятно. Спасибо большое!
Спасибо за ваш комментарий ) Именно так хотелось показать такое меню :)
Большое спасибо за понятные разъяснения. Отличный пример как сделать бургер-меню)
Большое спасибо за ваш отзыв :)
Отличный контент, удачи тебе в Новом Году!
Большое спасибо. Буду работать. Удачи нам всем :)
Красавчик, именно на твоем видео пришло осознание как работает бургер меню.
Благодарю , круто прокачался в приятной атмосфере
Спасибо вам :) Да, мне кажется видео получилось хорошим. Но буду стараться лучше ):
Благодарю! Отличное объяснение!
Здравствуйте, Яна. Спасибо за ваш комментарий :)
спасибо большое! Самое понятное объяснение на просторах ютуба
Спасибо большое, круто получилось)
Спасибо вам :)
Хорошее видео. Спасибо вам.
Спасибо за видео! Очень круто, интересно и самое главное понятно 😊
Спасибо за Ваш отзыв)) надеюсь и другие видео курса будут вам полезны)))
Спасибо большое за информацию!😉🤝
Спасибо вам за комментарий)
Александр, спасибо за видео. По методологии БЭМ очень нужно видео и как можно подробнее. Буду очень ждать. Заранее спасибо Вам!
Спасибо за комментарий. Да да, я готовлю материал. Тема не простая. Надо подготовить много графики, что бы показать все наглядно :) Видео в плане )
Да наконец-то кто-то нормально объяснил, как это делается!
большое спасибо за видео! очень полезно и понятно)
Спасибо за комментарий ) Я очень рад, что видео вам было интересно
Все очень доходчиво и понятно ВООЩЕ СУПЕРРР
Большое вам спасибо за такой комментарий :)
Огромное спасибо!:)
Спасибо за ваш комментарий 🤗🔥 оставайтесь на канале))
Спасибо. Очень доходчиво и понятно объяснили .
Спасибо вам за комментарий ): Не всегда получается быстро ответить (
Дякую, було легше ніж я думав
Спасибо вам большое за это видео!
Спасибо за вашу поддержку :)
Спасибо за подробный и понятный ролик. Запишите, пожалуйста, ролик, как делать бургер справа.
Понятно, что базово отличий будет не много, но интересно тоже!!!
Спасибо!
Спасибо за ваш отклик и предложение. Да, уже поставил в план. Получил несколько комментариев с этим предложением. Буду записывать про меню справа )
Ты великолепен, спасибо большое, очень помог
Очень приятно читать такой комментарий :) Большое спасибо
Супер-круто! отличная музычка
)) Спасибо :) Надеюсь музыка не сильно отвлекает от основного контента
@@alex_dudukalo всё отлично
Александр, пожалуйста видео в студию *бургер с правой части сайта*. Спасибочки🤗
Это видео Огонь!🤩
Спасибо за отклик в видео комментария :) Да, пожалуй я соберу все такие моменты и запишу по ним ролик, Бургер справа туда тоже обязательно войдет :)
Видео супер! просто и доходчиво🤜
Спасибо 🔥 надеюсь и другие видео на канале будут вам полезны))
все просто и доступно, не то что некоторые. спасибо
Спасибо вам :)
@@alex_dudukalo только вот одна незадача, когда обновляешь страницу , страница загружается с открытым бургер меню, подскажите как поправить
Круто. 5 из 5, ни одного вопроса не осталось, по текущему уроку!
Спасибо за видео, но мы всё ещё очень ждём курс по JS))
Спасибо за каш комментарий. Не всегда успевается быстро отвечать(( Работаю над материалом. Скоро будет что то)
Александр, все отлично, но единственное замечание это - некорректное подключение файла js'a, ведь сначала сайт должен сканировать всю разметку и стилизацию, а только потом сами скрипты, то есть нужно подключать в конце body, так производительность сайта увеличится и не будет выдавать ошибки
p.s об атрибуте я не знал)
Здравствуйте, спасибо за ваш комментарий и поддержку. Да, для правильного подключения, используется обработчик события, который сработает, когда вся страница будет загружена. DOMContentLoaded. Так же в подключении есть атрибут defer, который делает тоже самое :)
Классное видео, спасибо. Хотелось бы увидеть как сделать закрытие меню при клике на ссылку и при клике за контент за выплывающим меню.
Если цель есть, значит будет у тебя 2к подписоты)) А вот про бургер, я бы уменьшил время транзишена на непрозрачность что бы центральная линия быстрее скрывалась. И еще момент, ты прозрачный цвет заливки бургера поставил не по активному классу а по умолчанию)) Ну и спасибо за ролик конечно!))
Да, я буду стараться ) Главное поставил цель ))) Не поверишь, но перед записью видео я готовился и сделал так, как ты сказал с скоростью изменения прозрачности. Но при записи забыл про это)) Про прозрачность кнопки надо посмотреть, как буду за компьютером :) Спасибо тебе. За то, что посмотрел полностью ))
Не знаю что еще тут можно написать, поэтому - спасибо!
Спасибо за крутейщее объяснение!!
Можете ли бы вы обьяснить как можно сделать, что бы меню выезжало только при нажатии на него ?
Буду вам очень благодарен
Александр МОГЕТ !!!
Спасибо за поддержку и что вы со мной :)
Приветствую, спасибо за видеою. Хотелось бы увидеть видео про БЭМ
Спасибо вам за комментарий :) Буду работать над новым роликом по БЭМ
Видео, как всегда, на высшем уровне. Сделайте пожалуйста видео по БЭМ
Валерий, спасибо за ваш отзыв. Да, готовлю БЭМ. Давно хочу сделать ) Тема не простая )
Спасибо большое !
И вам :)
спасибо! круто получилось
Спасибо за вашу поддержку :)
Отличное обучающее видео, доступно и понятно, спасибо! Подскажите, пожалуйста, вы подключили скрипт в хэд, но многие подключают его в конец боди. Какой вариант и в каких условиях лучше использовать?
Прошу прощения за долгий ответ. Я бы подключал внизу для безопасности и что бы в старых браузерах все работает хорошо. Но в целом сейчас это особого значения не имеет :)
Большое спасибо за видео
Шлю взаимное спасибо :)
Спасибо за урок, подписка однозначно. Хороший урок, но хорошо было бы продолжить урок, так как нужно доработать код JS для самого мобильного меню, к примеру добавить скрытия меню при переходе по ссылке, добавить выпадающий список в двухуровневом меню. К стати хорошо бы еще добавить функцию определения с какого устройства зашел пользователь, чтобы определить как будет работать выпадающий список подменю по наведению мышки или нажатию на экран.
Спасибо за ваш комментарий. Да, я думаю сделать такой ролик. Получится длиннее, но зато разберу все детали такого меню. Ведь, показать меню одно. Что дальше, при клике, при прокрутке. Думаю, получится интеренсо :)
А что дописать в js, что бы при клике на меню в бургер - бургер закрывался?
А также при клике на любое поле (body) также закрывался бургер.
Спасибо за урок🔥
Спасибо вам за комментарий)
Спасибо за видео, ищу альернативы как бургер сделать через SVG, и у меня с правой стороны бургер меню, с левой стороны чуть понятней стало как сделать по вашему примеру. Пойду дальше искать как сделать бургер с правой стороны :)
Спасибо вам. Бургер svg у меня еще пока нет. Но ролик с бургер справа есть 😇 Правое бургер меню - подробное объяснение. HTML + CSS + JS
ruclips.net/video/mAJQKqO8-rc/видео.html
на счёт меню справа 11:00 , было бы здорово т.к. слева часто есть текст, и это меню закрывает текст. С этим конечно жить можно но не очень практично и удобно если смотреть с точки зрения пользователя...
А на счёт самого объяснения, очень доходчиво и просто, спасибо)
Отличное видео, я по нему почти что смогла сделать бургер справа) От горизонтального скролла избавиться пока не получилось, не понимаю, куда overflow прописывать, так что видео по правому бургеру тоже очень жду)
Да да, уже есть много запросов на такое меню :) Обязательно сделаю его :)
@@alex_dudukalo та же история) если указываю мобильное расширение, меню висит справа от верстки( overflow при этом пофиг)
Автор, спасибо тебе огромное и успехов в развитии канала. Можете пожалуйста подсказать, сделал бургер по Вашему видео, но мне нужно теперь сделать так, чтоб при нажатии на любую ссылку в меню, а также в любую другую область экрана - меню также плавно скрывалась.
Спасибо вам за ваш комментарий. Ваш вопрос - это тема для отдельного ролика. Думаю я скоро запишу такой
@@alex_dudukalo Обязательно сделайте, буду рад)
Боже, спасибо, что ты есть Санечек...
Спасибо за видео!
Спасибо за ваш комментарий )
Благодаря этому видео я научился делать бургер меню с помощью js. 🎉🎉🎉🎉🎉
Очень рад, что видео вам помогло сделать бургер )) Приятно, быть полезынм
привет. крутой видос. покажи еще как реализовать меню с выездом справа, а бургер кнопка была разных размеров спан и как эти спаны потом превращаются в крестик
Спасибо вам :) Да, много запросов по этому видео. Думаю в течении 5 дней сделаю такой ролик :)
Александр, сделайте пожалуйста видео, как объединить сразу два меню в бургере:)) то есть где верхнее и нижнее хэдер меню
Да, я понимаю о чем вы говорите. Интересный пример. Тут просто нужно решить, что будет контейнером меню. В блок menu должно входить верхнее и нижнее меню. Я подумаю, как это видео оформить. Пример интересный :)
Александр, очень хотелось бы курс по JS!!! Пожалуйста, запишите, будем очень признательны🙏🙏🙏!!!! Вы умничка, продолжайте в том же духе!
Спасибо большое за вашу поддержу :) Я уже работаю над этим ) не так быстро, как хотелось бы. Но скоро что то из этого будет
@@alex_dudukalo спасибо спасибо!!!
красава все четко объяснил!!!
Спасибо 🔥 надеюсь и другие видео канала будут вам полезны 😊
лучший
Спасибо вас за ваш комментарий :)
Спасибо с 1го раза всё получилось!очень доходчиво!буду рад если ответите на вопрос?можно же меню прятать вместо отрицательного left просто задать display none,а при клике display block??????так ведь проще и всё равно с какой стороны бургер делать??или не сработает??
Спасибо. Я рад, что ролик помог вам )) да, конечно можно сделать так. Но только не получится сделать анимацию ( блок будет просто появляться и исчезать )
@@alex_dudukalo да понял!!спасибо!
Большое спасибо за видео!
Подскажите пожалуйста, как вставить хоть какой-нибудь логотип? Видимо из-за различных свойств, которые я пока не до конца понял, не могу вставить логотип на то место где у вас стоит " верстка". Возможно ли не ломая данной конфигурации меню, вставить туда логотип?
Здравствуйте, спасибо за ваш отзыв. Да, изменить логотип можно, изменив путь к изображению в атрибуте src у тега img. Все должно пройти гладко. Возможно где-то придется немного поправить размеры и отступы в CSS
Всё прекрасна
Всё ясно ❤❤❤
Большое спасибо вам :)
подскажите, а как сделать так, чтобы при уменьшении размеров страницы меню сразу само не выезжало, а только по нажатии кнопки?
Доходчиво и просто
Большое спасибо за ваш комментарий)
Если есть возможность расскажите пожалуйста как сделать слайдер где вместо картинок перемещается фон
урааа спасибо!!!!
Спасибо за ваш отклик :)
Здравствуйте, а что делать, если выдает ошибку Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLButtonElement?
Спасибо!
Спасибо за ваш комментарий 🤗
Интересный подход со спанами внутри кнопки, для создания бургера. Я обычно делаю псевдоэлементом и к нему два box-shadow. А недавно делал тестовое и там все линии бургера были разной длины и я, чтобы не заморачиваться сделал svg-картинкой в html. Интересно насколько это правильно использовать svg для бургера?
Спасибо за ваш комментарий. В этом видео я хотел показать простой способ реализации кнопки бургера, что бы не запутать зрителя. Да, конечно псевдоэлементами тоже можно, но а таком случае уже css будет выглядеть чуть сложнее, чем html :) svg по мне не очень удобно использовать для таких простых элементов, как бургер :) Хотя допустимо
@@alex_dudukalo Понял Саш, спасибо за ответ. Отличный канал, продолжай в том же духе.😃
Спасибо за видео! А как таком коде сделать stop-scroll во время открытия меню? Когда уменьшаешь разрешение экрана, автоматом выдвигается меню. И стоп-скролл не срабатывает.
Спасибо вам :) Стоп скролл можно сделать добавлением класса для body. В классе нужно прописать overflow-y: hidden; Рекомендую этот класс создавать в медиа запросе мобильной версии. Если у вас в html коде в шапке добавлен класс open, то его нужно убрать. Он будет добавляться кодом при нажатии на бургер сам)