Бургер меню - просто. HTML + CSS + JS
Мобильное меню с анимацией - быстро и просто. HTML + CSS и совсем немного Javascript.
👁🗨 Исходники кода в телеграм канале: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend_du2
👁🗨 Дзен: dzen.ru/frontend_it
Пікірлер: 263
У вас отличные способности доходчиво объяснять сложные вещи! Получается лучше чем у раскрученных каналов.
@javas206
Жыл бұрын
многотысячно плюсую, всякие "Фрилансер по жизни" и рядом не стоят
@alex_dudukalo
Жыл бұрын
Спасибо большое ща ваше сообщение. Я буду стараться делать лучше. И большое роликов. Вы вдохновляете.
@alex_dudukalo
Жыл бұрын
Улыбнулся, мне очень приятно :)
Спасибо вам большое! Я прямо счастлива, от того, что получилось наконец-то))) Вчера делала по уроку из курса... У вас талант, объяснять просто и выбирать самое простое решение.
Спасибо от всей души! Просмотрела много разных видео на эту тему, но только с вами в итоге все получилось!
Спасибо, автор. Редко бывает, что человек в чём-то разбирается и может этому научить. У вас талант и в первом, и во втором.
Золотой человек, спасибо Вам огромное!!! Процветания и роста Вашему каналу)) Про меню справа будет очень полезно узнать!
@alex_dudukalo
Жыл бұрын
Здравствуйте, спасибо за ваш теплый комментарий. Рад, что видео пригодилось. Да да, я уже получил несколько комментариев про меню справа. Ставлю в план :)
Спасибо большое! Все подробно с объяснением шагов, 🤩🤩🤩очень круто, что после каждого действия показываете, что произошло с элементом в итоге.
@alex_dudukalo
Жыл бұрын
Я рад, что в этом видео вы смогли раскрыть для себя эту тему и разобраться со мной в создании меню. Буду учитывать это в следующих видео и чаще показывать браузер ) Спасибо :)
Огромная благодарность Александру за самое понятное объяснение! Однозначно подписка и лайк!
Спасибо большое, мне так легче учиться, когда смотрю вас. Вы очень хорошо учите и показываете, спасибо вам за такой великолепный труд!
@alex_dudukalo
7 ай бұрын
Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны 🤗
Огромная вам благодарность!! Объяснили так понятно, как никто не объяснял. Буду смотреть и другие ролики. Подписалась 🤍
Урок максимально понятный. Столкнулась с необходимостью создать адаптив и меню бургер. Страшно даже было начинать, не знала, за что браться. С вашим уроком все получилось с первого раза! Спасибо))
@alex_dudukalo
10 ай бұрын
Большое спасибо за ваш отзыв ) Попытался в этом ролике разобрать все. Анимацию, верстку, адаптивность и немного JS. Очень рад, что видео вам помогло. Надеюсь и другие ролики будут для вас полезны )
Посмотрел, офигел и понял сколько всему еще учится) Видео, в любом случае очень полезное, особенно для таких как я. Спасибо вам!
@alex_dudukalo
Жыл бұрын
Спасибо за комментарий. Здорово , что материал полезный. Я тоже учусь делать ролики для ютуба. Спасибо за поддержку :)
Очень полезное видео, как и всегда!!! Спасибо, Александр 😉
@alex_dudukalo
Жыл бұрын
Спасибо за ваш отклик :) И за поддержку
Отличное видео!все чётко,по полочкам и без воды.Так держать!👍🏻
@alex_dudukalo
6 ай бұрын
Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны))
Отличный урок, спасибо большое. Вы так понятно обьясняете. Рада, что нашла ваш канал!)
@alex_dudukalo
8 ай бұрын
Ваша поддержка очень мотивирует🤗 спасибо!) оставайтесь на канале 😊
Огонь 🔥, спасибо большое, очень хорошо интересно и понятно всё! Ещё раз спасибо
Александр не останавливайся. Только вперед! Разжевывай подробнее и будет те подписота, если будешь показывать наглядно. Здоровья те!
@alex_dudukalo
Жыл бұрын
Да, буду работать. Надеюсь )) По крайней мере это интересно ) Спасибо, и тебе здоровья :)
Великолепное раскрытие темы! Огромная благодарность!❤
@alex_dudukalo
5 күн бұрын
Спасибо за такой приятный комментарий :)
Все было доступно и понятно! Смогла внедрить в свой проект, большое спасибо за такой замечательный урок ❤
@alex_dudukalo
Жыл бұрын
Очень рад, что все получилось :) Спасибо за ваш приятный комментарий )
Александр, круто получилось! Желаю процветания вашему каналу!
@alex_dudukalo
Жыл бұрын
Спасибо большое. И за такие слова тоже. Желаю каналу крутых видео и таких же хороших подписчиков :)
Как всегда КЛАСС!!!👏👏👏 Спасибо за Вашу работу!!! Жду нового контента!!!!👍
@alex_dudukalo
8 ай бұрын
Спасибо за обратную связь 🤗 ваша поддержка вдохновляет но новые видео))
Спасибо за ролик! Наверное, самый полезный из актуальных на KZread!
@alex_dudukalo
Жыл бұрын
Большое спасибо за теплый комментарий от вас )
Спасибо! Всё, оказывается, очень просто, если, конечно, находится человек, который умеет доходчиво объяснить.
@alex_dudukalo
Жыл бұрын
)) Спасибо вам за такой комментарий) Вначале работы с версткой меню меня устрашало. Но стоит сделать его пару раз, то все становится простым )
Спасибо, что вы все так подробно объясняете. Для новичков это действительно важно. Я горжусь, что у меня такой классный куратор 😊
@alex_dudukalo
Жыл бұрын
Спасибо вам за приятнейший комментарий. Мне это очень приятно и это мотивирует. Особенно приятно читать утром. Заряжает :)
@user-zo6rp1xn8i
Жыл бұрын
Я теперь тоже к нему хочууууу😪
Александр, вы самый хороший человек на свете.
@alex_dudukalo
Жыл бұрын
Какой приятнейший комментарий от вас. Трудно не улыбаться. Спасибо вам за настроение :)
Суперское видео, четко, понятно и по делу, спасибо большое
Александр, спасибо огромное за ваши видео. Вы очень просто и понятно объясняете. Если есть возможность снять видео про табы, свайпер и аккордеон. Удачи вам и процветания🙌
@alex_dudukalo
Жыл бұрын
Здравствуйте, Юлия. Спасибо вам за вашу поддержку. Я очень рад, что ролики вам нравятся и, что они помогают задачу. По табам планирую, а по Свайперу как раз сегодня опубликовал: kzread.info/dash/bejne/en-YqMemnbvaoLg.html Надеюсь понравится :)
спасибо за видео мне было очень нужно было это код, удачи следующых видео
Это великолепно, и больше никаких слов
@alex_dudukalo
Жыл бұрын
Спасибо за ваш приятный комментарий. Я рад, что ролик вам понравился)
Все очень доступно и понятно! Порадовали попутно дополнительные "фишечки" работы с VSCode
@alex_dudukalo
10 ай бұрын
Спасибо за Ваш отзыв))Да, хочется конечно записать отдельный ролик по инструментам VSCode и рассказать больше про настройку редактора кода))
Красавчик, именно на твоем видео пришло осознание как работает бургер меню.
Спасибо за видео, цель к Новому году, вижу, выполнена на ютубе)
@alex_dudukalo
10 ай бұрын
Да 🙈 большое спасибо за Вашу поддержку, к сожалению не всегда получается быстро ответить
Большое спасибо за понятные разъяснения. Отличный пример как сделать бургер-меню)
@alex_dudukalo
Жыл бұрын
Большое спасибо за ваш отзыв :)
Просто, эффективно, понятно. Спасибо большое!
@alex_dudukalo
Жыл бұрын
Спасибо за ваш комментарий ) Именно так хотелось показать такое меню :)
Спасибо огромное!замечательное видео.перелопатила просто кучу материала-Ваше просто лучшее!)да.снимите пожалуйста видео где меню справа.подписалась на Ваш канал.буду с удовольствием смотреть Ваши видео и учиться))
@alex_dudukalo
Жыл бұрын
Спасибо) Полезнейший комментарий от вас. Да, есть запрос на такой ролик. В течении недели обязательно запишу такое видео :)
Спасибо тебе за видео, очень круто и четко объяснил!
Очень классно объясняете. Спасибо!
@alex_dudukalo
Жыл бұрын
Спасибо за ваш комментарий. Мне их приятно читать :)
спасибо большое! Самое понятное объяснение на просторах ютуба
Благодарю , круто прокачался в приятной атмосфере
@alex_dudukalo
Жыл бұрын
Спасибо вам :) Да, мне кажется видео получилось хорошим. Но буду стараться лучше ):
Много смотрел видео, это единственное по которому получилось сделать, поэтому лайк сразу
@alex_dudukalo
Жыл бұрын
Спасибо за просмотр, лайк и конечно за крутой комментарий. Наверное я делаю что то правильно)
Спасибо за видео! Очень круто, интересно и самое главное понятно 😊
@alex_dudukalo
10 ай бұрын
Спасибо за Ваш отзыв)) надеюсь и другие видео курса будут вам полезны)))
Отличный контент, удачи тебе в Новом Году!
@alex_dudukalo
Жыл бұрын
Большое спасибо. Буду работать. Удачи нам всем :)
Да наконец-то кто-то нормально объяснил, как это делается!
Благодарю! Отличное объяснение!
@alex_dudukalo
Жыл бұрын
Здравствуйте, Яна. Спасибо за ваш комментарий :)
Спасибо большое за информацию!😉🤝
@alex_dudukalo
Жыл бұрын
Спасибо вам за комментарий)
Все очень доходчиво и понятно ВООЩЕ СУПЕРРР
@alex_dudukalo
Жыл бұрын
Большое вам спасибо за такой комментарий :)
Спасибо большое, круто получилось)
@alex_dudukalo
Жыл бұрын
Спасибо вам :)
большое спасибо за видео! очень полезно и понятно)
@alex_dudukalo
Жыл бұрын
Спасибо за комментарий ) Я очень рад, что видео вам было интересно
Хорошее видео. Спасибо вам.
Дякую, було легше ніж я думав
Благодарю, ждем видео бургер справа)
@alex_dudukalo
Жыл бұрын
Спасибо вам :) Да, хочется такое меню тоже сделать :)
Спасибо. Очень доходчиво и понятно объяснили .
@alex_dudukalo
Жыл бұрын
Спасибо вам за комментарий ): Не всегда получается быстро ответить (
Не знаю что еще тут можно написать, поэтому - спасибо!
Спасибо вам большое за это видео!
@alex_dudukalo
Жыл бұрын
Спасибо за вашу поддержку :)
Ты великолепен, спасибо большое, очень помог
@alex_dudukalo
Жыл бұрын
Очень приятно читать такой комментарий :) Большое спасибо
Спасибо за подробный и понятный ролик. Запишите, пожалуйста, ролик, как делать бургер справа. Понятно, что базово отличий будет не много, но интересно тоже!!! Спасибо!
@alex_dudukalo
Жыл бұрын
Спасибо за ваш отклик и предложение. Да, уже поставил в план. Получил несколько комментариев с этим предложением. Буду записывать про меню справа )
Супер-круто! отличная музычка
@alex_dudukalo
Жыл бұрын
)) Спасибо :) Надеюсь музыка не сильно отвлекает от основного контента
@user-ys2et3kc8c
Жыл бұрын
@@alex_dudukalo всё отлично
все просто и доступно, не то что некоторые. спасибо
@alex_dudukalo
Жыл бұрын
Спасибо вам :)
@user-pq6ex7ec1q
Жыл бұрын
@@alex_dudukalo только вот одна незадача, когда обновляешь страницу , страница загружается с открытым бургер меню, подскажите как поправить
Круто. 5 из 5, ни одного вопроса не осталось, по текущему уроку!
Спасибо за видео, но мы всё ещё очень ждём курс по JS))
@alex_dudukalo
Жыл бұрын
Спасибо за каш комментарий. Не всегда успевается быстро отвечать(( Работаю над материалом. Скоро будет что то)
Видео супер! просто и доходчиво🤜
@alex_dudukalo
7 ай бұрын
Спасибо 🔥 надеюсь и другие видео на канале будут вам полезны))
- По программируем? - Не волнуйтесь, будет не страшно. Все будет быстро! Определенно лайк!😄
@alex_dudukalo
Жыл бұрын
))) Капелька оптимизма не помешает, когда речь идет про программирование ))
Огромное спасибо!:)
@alex_dudukalo
7 ай бұрын
Спасибо за ваш комментарий 🤗🔥 оставайтесь на канале))
Александр, пожалуйста видео в студию *бургер с правой части сайта*. Спасибочки🤗 Это видео Огонь!🤩
@alex_dudukalo
Жыл бұрын
Спасибо за отклик в видео комментария :) Да, пожалуй я соберу все такие моменты и запишу по ним ролик, Бургер справа туда тоже обязательно войдет :)
Спасибо за урок, подписка однозначно. Хороший урок, но хорошо было бы продолжить урок, так как нужно доработать код JS для самого мобильного меню, к примеру добавить скрытия меню при переходе по ссылке, добавить выпадающий список в двухуровневом меню. К стати хорошо бы еще добавить функцию определения с какого устройства зашел пользователь, чтобы определить как будет работать выпадающий список подменю по наведению мышки или нажатию на экран.
@alex_dudukalo
8 ай бұрын
Спасибо за ваш комментарий. Да, я думаю сделать такой ролик. Получится длиннее, но зато разберу все детали такого меню. Ведь, показать меню одно. Что дальше, при клике, при прокрутке. Думаю, получится интеренсо :)
Александр, спасибо за видео. По методологии БЭМ очень нужно видео и как можно подробнее. Буду очень ждать. Заранее спасибо Вам!
@alex_dudukalo
Жыл бұрын
Спасибо за комментарий. Да да, я готовлю материал. Тема не простая. Надо подготовить много графики, что бы показать все наглядно :) Видео в плане )
Видео, как всегда, на высшем уровне. Сделайте пожалуйста видео по БЭМ
@alex_dudukalo
Жыл бұрын
Валерий, спасибо за ваш отзыв. Да, готовлю БЭМ. Давно хочу сделать ) Тема не простая )
Классное видео, спасибо. Хотелось бы увидеть как сделать закрытие меню при клике на ссылку и при клике за контент за выплывающим меню.
Приветствую, спасибо за видеою. Хотелось бы увидеть видео про БЭМ
@alex_dudukalo
Жыл бұрын
Спасибо вам за комментарий :) Буду работать над новым роликом по БЭМ
Александр МОГЕТ !!!
@alex_dudukalo
Жыл бұрын
Спасибо за поддержку и что вы со мной :)
Если цель есть, значит будет у тебя 2к подписоты)) А вот про бургер, я бы уменьшил время транзишена на непрозрачность что бы центральная линия быстрее скрывалась. И еще момент, ты прозрачный цвет заливки бургера поставил не по активному классу а по умолчанию)) Ну и спасибо за ролик конечно!))
@alex_dudukalo
Жыл бұрын
Да, я буду стараться ) Главное поставил цель ))) Не поверишь, но перед записью видео я готовился и сделал так, как ты сказал с скоростью изменения прозрачности. Но при записи забыл про это)) Про прозрачность кнопки надо посмотреть, как буду за компьютером :) Спасибо тебе. За то, что посмотрел полностью ))
Спасибо большое !
@alex_dudukalo
Жыл бұрын
И вам :)
Спасибо за урок🔥
@alex_dudukalo
Жыл бұрын
Спасибо вам за комментарий)
Отличное видео, я по нему почти что смогла сделать бургер справа) От горизонтального скролла избавиться пока не получилось, не понимаю, куда overflow прописывать, так что видео по правому бургеру тоже очень жду)
@alex_dudukalo
Жыл бұрын
Да да, уже есть много запросов на такое меню :) Обязательно сделаю его :)
@kwintessencia
Жыл бұрын
@@alex_dudukalo та же история) если указываю мобильное расширение, меню висит справа от верстки( overflow при этом пофиг)
спасибо! круто получилось
@alex_dudukalo
Жыл бұрын
Спасибо за вашу поддержку :)
Большое спасибо за видео
@alex_dudukalo
Жыл бұрын
Шлю взаимное спасибо :)
Спасибо за видео!
@alex_dudukalo
Жыл бұрын
Спасибо за ваш комментарий )
Спасибо за видео, ищу альернативы как бургер сделать через SVG, и у меня с правой стороны бургер меню, с левой стороны чуть понятней стало как сделать по вашему примеру. Пойду дальше искать как сделать бургер с правой стороны :)
@alex_dudukalo
8 ай бұрын
Спасибо вам. Бургер svg у меня еще пока нет. Но ролик с бургер справа есть 😇 Правое бургер меню - подробное объяснение. HTML + CSS + JS kzread.info/dash/bejne/n3V-s62qf5uTosY.html
Боже, спасибо, что ты есть Санечек...
Александр, все отлично, но единственное замечание это - некорректное подключение файла js'a, ведь сначала сайт должен сканировать всю разметку и стилизацию, а только потом сами скрипты, то есть нужно подключать в конце body, так производительность сайта увеличится и не будет выдавать ошибки p.s об атрибуте я не знал)
@alex_dudukalo
Жыл бұрын
Здравствуйте, спасибо за ваш комментарий и поддержку. Да, для правильного подключения, используется обработчик события, который сработает, когда вся страница будет загружена. DOMContentLoaded. Так же в подключении есть атрибут defer, который делает тоже самое :)
на счёт меню справа 11:00 , было бы здорово т.к. слева часто есть текст, и это меню закрывает текст. С этим конечно жить можно но не очень практично и удобно если смотреть с точки зрения пользователя... А на счёт самого объяснения, очень доходчиво и просто, спасибо)
красава все четко объяснил!!!
@alex_dudukalo
8 ай бұрын
Спасибо 🔥 надеюсь и другие видео канала будут вам полезны 😊
лучший
@alex_dudukalo
Жыл бұрын
Спасибо вас за ваш комментарий :)
Александр, очень хотелось бы курс по JS!!! Пожалуйста, запишите, будем очень признательны🙏🙏🙏!!!! Вы умничка, продолжайте в том же духе!
@alex_dudukalo
Жыл бұрын
Спасибо большое за вашу поддержу :) Я уже работаю над этим ) не так быстро, как хотелось бы. Но скоро что то из этого будет
@user-zo6rp1xn8i
Жыл бұрын
@@alex_dudukalo спасибо спасибо!!!
Спасибо за крутейщее объяснение!! Можете ли бы вы обьяснить как можно сделать, что бы меню выезжало только при нажатии на него ? Буду вам очень благодарен
Всё прекрасна Всё ясно ❤❤❤
@alex_dudukalo
11 ай бұрын
Большое спасибо вам :)
Доходчиво и просто
@alex_dudukalo
Жыл бұрын
Большое спасибо за ваш комментарий)
Благодаря этому видео я научился делать бургер меню с помощью js. 🎉🎉🎉🎉🎉
@alex_dudukalo
2 ай бұрын
Очень рад, что видео вам помогло сделать бургер )) Приятно, быть полезынм
урааа спасибо!!!!
@alex_dudukalo
Жыл бұрын
Спасибо за ваш отклик :)
Спасибо!
@alex_dudukalo
6 ай бұрын
Спасибо за ваш комментарий 🤗
привет. крутой видос. покажи еще как реализовать меню с выездом справа, а бургер кнопка была разных размеров спан и как эти спаны потом превращаются в крестик
@alex_dudukalo
Жыл бұрын
Спасибо вам :) Да, много запросов по этому видео. Думаю в течении 5 дней сделаю такой ролик :)
Отличное обучающее видео, доступно и понятно, спасибо! Подскажите, пожалуйста, вы подключили скрипт в хэд, но многие подключают его в конец боди. Какой вариант и в каких условиях лучше использовать?
@alex_dudukalo
Жыл бұрын
Прошу прощения за долгий ответ. Я бы подключал внизу для безопасности и что бы в старых браузерах все работает хорошо. Но в целом сейчас это особого значения не имеет :)
Мегахорош! Продолжай снимать и начни уже наконец с этого зарабатывать!
@alex_dudukalo
Жыл бұрын
Спасибо вам :))) И спасибо за коммент )) Как монетизировать - это уже хороший вопрос)) Думаю, что скоро в планах. Но хочется как то интересно это делать )
Автор, спасибо тебе огромное и успехов в развитии канала. Можете пожалуйста подсказать, сделал бургер по Вашему видео, но мне нужно теперь сделать так, чтоб при нажатии на любую ссылку в меню, а также в любую другую область экрана - меню также плавно скрывалась.
@alex_dudukalo
Жыл бұрын
Спасибо вам за ваш комментарий. Ваш вопрос - это тема для отдельного ролика. Думаю я скоро запишу такой
@user-ii7uy9ry3l
Жыл бұрын
@@alex_dudukalo Обязательно сделайте, буду рад)
А что дописать в js, что бы при клике на меню в бургер - бургер закрывался? А также при клике на любое поле (body) также закрывался бургер.
Можно ещё убирать меню при нажатии на ссылку или за пределами меню, затемнить бэкграунд, залочить скрол)
@alex_dudukalo
Жыл бұрын
Да конечно, так будет идеально. Это меню рассчитанного на ссылки, ведущие на другие страницы. При клике на них срабатывает переход и меню исчезает, так как загружается новая страница. В случае якорных ссылок, действительно меню Нужно скрывать :) думаю запишу более развернутое видео с вашими предложениями :)
Александр, сделайте пожалуйста видео, как объединить сразу два меню в бургере:)) то есть где верхнее и нижнее хэдер меню
@alex_dudukalo
Жыл бұрын
Да, я понимаю о чем вы говорите. Интересный пример. Тут просто нужно решить, что будет контейнером меню. В блок menu должно входить верхнее и нижнее меню. Я подумаю, как это видео оформить. Пример интересный :)
Как всегда все понятно, единственное конечно с js бы поподробнее, все останольное понятно, а вот с js пока не очень
@alex_dudukalo
Жыл бұрын
Спасибо за ваш комментарий. Да, js это отдельная больше тема) Стараюсь разбирать его в отдельном плейлисте))
Спасибо с 1го раза всё получилось!очень доходчиво!буду рад если ответите на вопрос?можно же меню прятать вместо отрицательного left просто задать display none,а при клике display block??????так ведь проще и всё равно с какой стороны бургер делать??или не сработает??
@alex_dudukalo
Жыл бұрын
Спасибо. Я рад, что ролик помог вам )) да, конечно можно сделать так. Но только не получится сделать анимацию ( блок будет просто появляться и исчезать )
@user-ei8ib3mq2q
Жыл бұрын
@@alex_dudukalo да понял!!спасибо!
Большое спасибо за видео! Подскажите пожалуйста, как вставить хоть какой-нибудь логотип? Видимо из-за различных свойств, которые я пока не до конца понял, не могу вставить логотип на то место где у вас стоит " верстка". Возможно ли не ломая данной конфигурации меню, вставить туда логотип?
@alex_dudukalo
7 ай бұрын
Здравствуйте, спасибо за ваш отзыв. Да, изменить логотип можно, изменив путь к изображению в атрибуте src у тега img. Все должно пройти гладко. Возможно где-то придется немного поправить размеры и отступы в CSS
ты лучший
@alex_dudukalo
Жыл бұрын
Спасибо :)) ❤️