Меню бургер на чистом JavaScript. Многоуровневое меню и плавная прокрутка к разделу на HTML CSS JS
Вставка
- Опубліковано 31 тра 2024
- Как сделать правильное адаптивное меню бургер на чистом JS, навигацию на странице с плавной прокруткой к нужному разделу а также многоуровневое меню смотрите в новом выпуске "Как это сделать?"
🔝 Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф:
firstvds.ru/s/freelancer1703.
Инсайдерская инфа: тариф за 90 рублей скоро закончится, успевайте!
🤟Скачать архив с результатом (патреон): / 48896262
Меню бургер на HTML CSS и jQuery: • Правильное адаптивное ...
Геометрические фигуры на HTML и CSS: • Геометрические фигуры ...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В выпуске
01:04 - РЕКЛАМА
02:24 - Подготовка к работе
02:51 - Верстка контента
05:15 - Верстка шапки
11:13 - Верстка и программирование подменю
26:00 - Плавная прокрутка к нужному разделу
33:25 - Меню бургер на JS
54:29 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Что еще снять?
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Уроки по javascript). А точнее DOM, события и т.д, а потом хотелось бы практики, например, сделать табы или аккордеон
Добрый день! Интересно увидеть как делается пагинация, как показывать контент частями при клике
Было бы интересно посмотреть как правильно вставлять видео в верстку.
Слайдер )
@@dennisfisher2684 Есть же видео такое
А представьте не было бы таких людей, сколько десятков часов мы бы убивали на банальные вещи. Спасибо.
Пожалуйста! Рад что полезно!
Делаю сейчас закрытие меню-бургер по щелчку на ссылку в меню. Никак не работает. За примером далеко ходить не надо.
Он был бы немного беднее))
Спасибо! периодически заглядываю в твои туториалы, чтобы вспомнить как делаются некоторые штуки, которые давно не делал!
У Жени скоро 200 тыс. подписчиков, а я до сих пор читаю поздравления с первой сотней)
Удачи тебе, Женя, спасибо за твои классные уроки, если чего-то не пойму или не хватит мотивации, стану твоим патроном.
Для меня ты единственный человек, которому хочется задонатить, тем более это заслуженно.
К концу года наберешь 500 тыс?))
Вопрос к тем, кто ставит дизлайки на видео... Ребята, за что? Человек старается, делает всё ради нас, получает с канала копейки (по меркам больших каналов). Он мог бы и кривлять рожи на видео и грести бабло, но он ставит моральные ценности выше денег. Он делится бесценным опытом, который вы не купите даже в Скиллбоксах и тому подобных.
Наш сенсей как всегда лучший!!!
Спасибо!)
Конечно, отлично сказано
Представь - 10 минут назад сел смотреть предыдущий видос про бургер, а сам себе думаю - наверное, посмотрю и сам соображу, как это сделать на чистом JS. И тут открываю почту ииииии..... Женя как всегда - лучший!
Ахах, спасибо!
Очень редко ставлю лайки и пишу комментарии, но большое, просто огромное вам спасибо. Благодаря вашим подобным видео я начинаю понимать всю взаимосвязь html/css/JS и видеть использование всего этого на реальном проекте. Спасибо, ваши видео очень мотивируют продолжать заниматься этим.
я так уже за год, вырос с твоих уроков, но начинал с них.)) как вырос, смотрю иногда, чтоб что-то вспомнить, ну и лайк поставить за труды. спасибо!
если позволишь, поделюсь своим не большим опытом.))))
1) лучше классы добавлять на li а не на ссылку! это важно, ибо в большинстве CMS, при натяжке такой верстке, проклянут, просто там на li класс можно прописать при инициализации меню к примеру в вордпресс, это гипер важно и будет попа боль... может кому пригодиться во классы вордпресса по умолчанию: nav-menu - этот класс ставиться на ul , menu-item - это класс пункта меню (li), 2) я бы вместо span сделал button причем с текстом внутри, только тексту задал бы нулевой размер, это поможет людям с инвалидностью, да и так верно по семантике, у нас там не декоративная стрелочка, а все-же это позиционируется как кнопка. но это не обязательно, можно так и не делать.))
3) кнопка бургера, это тоже кнопка а не блок! да, это не критично и плевать как делать, но корректно, когда кнопка, это все-же кнопка а не что-то другое. опять же, проблема будет у людей с инвалидностью.
4) не помешало бы честь тот факт, что клиент в будущем может добавить новый пункт меню, и наша верстка полетит в тар тарары.... я тоже сейчас сел себе писать подобное, для проектов, и вот как раз это одна из причин, по которой решил написать адаптивное меню.)))
5) я бы шапку не делал фиксированной с самого начала, не всегда оно уместно. как по мне, лучше сделать ее фиксированной после прокрутки к примеру 200-300px. это добавит адаптивности.
6) это уже мелочи, но лучше все обернуть сначала в - "window.addEventListener("DOMContentLoaded", () =>{}", как миним поможет людям с инвалидностью. есть еще пара мелких моментов, которые тоже часто могут вызвать боль в очень больших проектах, но не критично.))) к пример, лучше проверить сразу, а создалось ли меню и наши основные классы. потому что не мы будем создавать меню а php к примеру, он баганул и наш js пошел гулять ошибками по консоле.)))
Я кстати всегда ставлю классы на всё. Будь то p, strong, и на a в li и на li в a
@@Roderen li в а? 🙈
можешь объяснить, зачем надо код писать в DOMContentLoaded? Интересно
@@miraigrafit7865 "Заговорился")
@@user-fs3yr9yk6n ну бывает такое, что есть вещи, которые загружаются асинхронно, или строятся js кодом, в таком случает твоя логика поиска элементов через querySelector-ы будет работать неправильно, так как страница загрузиться, начнется работа условно твоего скрипта, он не сможет найти какой нибудь условный селектор типа body.main, потому что класс main навешивается скриптом другого js, который отрабатывает после твоего, и следовательно document.querySelector('body.main') будет null, ну а ты же для чего то делал этот поиск, чтобы для чего то использовать, следовательно логика твоей программы будет рушится.
Так грамотно и понятно преподносить информацию это настоящий талант! Спасибо вам!
Большое спасибо за такой подробный урок! У вас отличная подача и очень понятные объяснения 👍
Евгений, Вы просто супер!!! Я влюбилась в js, когда так четко, последовательно и доступно все излагается. И результат - выше всех похвал))))
Словами не передать насколько полезное и нужное видео, тяжело как новичку понять Java запросы но думаю со временем и этот язык подтяну, спасибо тебе большое!
Отличное начало дня!
Женя, благодарочка!!!😎
Просто шикарный урок ) СПАСИБООО)! Невероятная подача))
Супер! Спасибо за видео)! Очень ждал его!
Женя, спасибо тебе большое!!! Как всегда, твой контент спасает 🤝
Как всегда - высший пилотаж! Спасибо! На вопрос о том, что еще снять - продолжать уроки по js. Без него никуда, я уж по вашим объяснениям начинаю ориентироваться в jquery :-)
Решил разобрать всю инфу в ролике детально и писать следом за тобой, Жека, но прочность осмысленно.
Итог: в период с 00:00 по 1:38 я просмотрел и полностью "впитал" первые 23 минуты ролика.
Большое спасибо за сей труд. Каждый твой ролик наполнен тонной нужной, полезной, а главное актуальной информацией, так же присутвует большое колличество советов, фич, которые нельзя прочесть в документации, ибо они нарабатываются лишь на практике при работе с проектом.
Еще раз большое спасибо!! Вы помогаете людям становиться лучше и речь не только об навыках в Frontend'e. ))
Ты просто мега-крут, как раз то над чем я мучался последнии 2 дня, а ты решил мои проблемы за пару минут и научил многому новому! Спасибо, что ты есть, пожалуйста продолжай!
Женя, прям не знаю, какие слова благодарности писать! СПАСИБО за крутой контент! миллион лайков! Было бы здорово еще про WP уроки сделать;)
Спасибо большое за такой развернутый мануал! Просидел пол дня, но все сделал под себя!
Очень благодарен за мануал!
Супер. Жень спасибо тебе что показываеш и рассказываешь мелкие детали которые очень важны. Жду не дождусь видео по jS.
Спасибо за видео, Жень! Посмотрел и все сделал. Все работает как надо!
Теперь на реальном проекте буду нарабатывать практику)) Будь здоров!
Я в повному захваті від відео, якісно, доступно ще й цікаво! Година перегляду на одному диханні! Ви крутий!
Это один из тех уроков, после которого смотришь на результат работы и не можешь перестать радоваться, спасибо большое за знания и хорошее настроение!
Это просто бомба, пушка, ракета. Спасибо Женя, низкий поклон.
Боже, шикарный видос! Спасибо. Все так просто и красиво)
делаю сайт для портфолио, по твоему видосу сделала меню-бургер, все получилось, ураааа! огромная благодарность за твой труд!
Спасибо большое за ролик, очень помог в многих моментах! Будет круто еще показать как сделать на мобилках открытие меню свайпом, какие есть библиотеки для этого или вообще проще без них на чистом js
Спасибо! Взял несколько моментов на вооружение :)
Крутой канал!
like нужно ставить еще перед просмотром)))легко, понятно, доступно и очень качественно. нет слов)))))ЛУЧШИЙ КАНАЛ!!!!!!!!!!!!!!!субьективно-обьективное мнение)))Жека - сенсей))))))))нужно прописать snipet "Спасибо". так будет проще)))))))))
Интересно было посмотреть, спасибо! Добавил бы, что при использовании опции behavior со значением "smooth" в js нужно использовать полифил или бейбел. Ведь если я не ошибаюсь, то отвалится львиная доля safari браузеров и ie11(если его еще кто-то поддерживает).
И отдельно хочу поблагодарить за твой труд! Получив базовые знания html css js было много нюансов с которыми было тяжело и долго реализовывать реальные проекты. Я хотел максимально быстро выйти на фриланс и уже в процессе разбираться с тонкостями разработки. И в этом мне нереально помог твой стартовый шаблон! Он закрывал большую часть проблем и нюансов возникающих в разработке. И даже когда я сталкивался с трудностями, о решении которых не говорилось в видосе по стартовому шаблону, я не бежал сразу в гугл за решением, а начинал копаться в сборке и в большинстве случаев находил там решение! Огромное спасибо!
Только подумал о бургер меню на чистом js и сразу вышло это видео. Женя ты читаешь мысли ? )). Вообщем я хочу сказать большое спасибо за твои труды 👍
просто кайфанул с результатов!!)) спасибо за уроки))
Спасибо вам Евгений, за качественный контент.
Ваше умение качественно доносить информацию, очень ценно.
Успехов вам!
Спасибо, рад что полезно!
Здравствуйте! Огромное спасибо за Ваш Труд!!! Урок отличный. Объяснение доходчивое и понятное даже новичку. Еще раз Большое Спасибо!!!!
Спасибо большое за урок! js только изучаю, но даже просто повторение помогает!
Спасибо тебе за твои бесценные уроки 🔥🔥🔥
вряд ли кто-нибудь еще сможет так хорошо объяснить, Спасибо, Жека
Как хорошо, что я зашла на ваш канал!!! Столько полезной информации, рабочие и доступные скрипты. Для меня, как начинающего верстальщика это просто находка! Спасибо за ваш труд🙏
А про слайдер есть контент?
Женя, огромное человеческое спасибо! Столько фишек, так все подробно рассказано! Мегаполезно! Жаль, нельзя поставить 10 лайков...
Обучение на высшем уровне! Большое спасибо.
Спасибо за видос. К сожалению, смогу посмотреть только завтра. Лайк-авансом!
Спасибо, Жека, просто большое спасибо)
Многому научился именно от тебя)
Пожалуйста!
Жека как всегда лучше всех !!! спасибо братка!
Круто! Я тоже делал наподобие меню, неокторые моменты также реализовал (некоторые иначе, более сложным способом), но вот плавный скролл сделал с помощью свойства scroll-behavior: smooth; На jquery принципиально не делал, так как не хотелось ради этого тащить целую библиотеку, но вот не знал как сделать это же на чистом js (хотя и догадывался, что надо со смещениями работать и задействовать getBoundingClientRect, в одной статье подсмотрел). Теперь буду знать знать как это реализуется. У вас все это очень понятно выглядит, спасибо! Также было в новинку увидеть определение в js класс устройств (я только начинаю изучать js), надо будет тоже у себя так попробовать. Очень познавательно!!!
Росту на твоих роликах, просто лучший!
Иногда не верится, что такой контент с крутой подачей дают бесплатно)
Спасибо!
"То что нужно", как и все остальные ролики. Лайк до прсомотра.
Огромное спасибо за знание которую ты нам даешь!!!
СПАСИБО!!!!! Как всегда, то что нужно доступным языком!!!
Пожалуйста!
Спасибо, тебе большое! Очень помогает твой контент!
Спасибо, как всегда всё качественно и понятно.
Спасибо большое за вашу подачу материала!
Спасибо! ты один из тех, благодаря кому я получил работу в front end !!!! спасибо огромное!!!!!!!!!!!!!!!!!!! вчера приняли на работу!!!
Хах, а вот тут я тебя уже опередил, насмотревшись твоих видео, я начал верстать макеты и в процессе верстки вывел похожий способ делать меню-бургер)) Твои труды не прошли напрасно, спасибо тебе огромное
Я рад
Круто. Очень понравилось. Взял себе на заметку
Спасибо за интересный контент. Учусь на твоих "видосиках". Будь здоров!!!
Спасибо за твои классные уроки!!!
Крутейшее видео!!! Спасибо большое!
Всё легко когда ты знаешь, что делаешь. Поистине полезный урок. Спасибо!
Пожалуйста!
В самом начале по изучению css) Просто лайк зашёл поставить)
Спасибо. Очень все подробно и доступно! =)
Один из не многих обучающих блогеров которому лайк можно ставить не глядя. Спасибо Джексон!
Я рад!
@@FreelancerLifeStyle видео по jQuery есть на канале ? Вроде пролистал не нашёл. Если нет, то будет ли? Заранее благодарен!
Очень понравился урок Бургер меню, все доступно и понятно. идем дальше
отличное видео, спасибо тебе) Ты лучший!
Позитив и настроение Евгения. Блеск в глазах. Как это заряжает и заражает позитивом и желанием учиться. Прямо какая то Вёрсточная лихорадка начинается. Однозначно Гранд Мерси. Респект и Уважуха.
Спасибо!
Лайк не глядя!
Особенно за плавную прокрутку к нужной секции.
Эх, такие бы уроки да по фреймворку, хотя бы по одному. Мол чтоб сделать вот так и вот так, мы будем использовать это и это и давайте же узнаем что это такое и сделаем наше задание
Велика подяка! Чудовий урок!!
Канал Евгения настоящая сокровищница 👍👍👍
Дуже дякую! Жека - ти найкращий! Тобі добре вдається доносити інформацію!
І головне - тепер ми знаємо, як це зробити!)))
Огромное спасибо! Очень крутой урок получился, много полезного, особенно порадовали "мелочи". Именно таких моментов не хватает, из-за малого опыта =) Жаль только, что прокрутка не работает ( нашла в другом месте - прикрутила, заработало). Так и не поняла, в чем была проблема. Проверила вроде все до буковки раз десять.
Дякую за урок! Ця годинна була дуже цікавою та інформативною!
Ну как . КААААААААААААААААААААААК! так круто можно делать . Молодец . Спасибо ))
перший раз я не зробила якусь помилку, і не шукала її 2 години😝
дякую за суперське відео🙏🏼
Респект вам, Евгений!Теперь всем знакомым,желающим научиться делать классные сайты, после прохождения простейших курсов html/css/js рекомендую смотреть вас, идеальный следующий уровень.Спасибо!
Спасибо!
Крутое видео! Офигенный материал!))
Спасибо большое!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Спасибо огромное за ваш труд !!!
Классные уроки, большое спасибо!
Очень интересно и полезно:) спасибо!
Дякую за контент. Уже другий день шукаю подібну інформацію, а тут все роз'яснено чітко і зрозуміло. Ще раз дякую.
ДААА!!)) Наконец-то!!!))) Спасибо, Жека!!!))))
Пожалуйста!
Большое спасибо за ролик! Ну очень помог
Спасибо за однозначно годный контент. Думаю, было бы крайне неплохо, если бы ты запилил побольше видео с разработкой различных вещей с использованием именно ванильного JS'a, поскольку JQuery уже морально устарел, а вот ванилла будет жить, пока востребован веб:)
Ты реально круто подходишь к своему материалу
Спасибо, стараюсь)
Очень качественный урок, спасибо!
Пожалуйста!
Ох напряжненько, но оч познавательно😮
Спасибо большое, приблизится бы на процентов 30 % к такому уровню.
только практика приблизит тебя к такому уровню
Відразу лайк перед переглядом. Круто як завжди. Жень, зроби відос про активний пункт меню при переході та при скролі на чистому js.
Как всегда очень полезно и доходчиво. Может ещё потом покажешь как сделать выделение пунктов меню при скроллинге и переходе на раздел на чистом JS?
Женя, большое спасибо за видео!
Пожалуйста!
Дякую за чудовий контент. Дуже класна подача інформації, нічого зайвого. Вчуся за вашими уроками. Поставив би більше вподобайок, якщо можна було б. Дякую вам велике за вашу працю 🙂
Волнительно, ну что ж погнали):))) ЖЕКА ЛУЧШИЙ!
Фуууух чётко!
Всё сработало спасибо! Патрон в теме:)
Огонь! Жека ты волшебник из страны ОЗ)))Все доступно и прозрачно понятно, обожаю твои ролики, мира и чистого неба вам над головой🤝👍🙏
Ты как всегда лучший!!! Спасибо!!!
Пожалуйста!
Очень круто! Спасибо!👍
Пожалуйста!
Не ожидал такого нужного контента. Поставил лайк за смелую верстку. Мне не хватило смелости на адаптив. Меня извиняет только то что я не верстальщик. Но теперь думаю хватит. Хорошо бы еще добавить bar с иконками слева вместо меню (как вариант продолжения развития меню бургер проекта). Интересно как Жека решал проблему с history по кнопке Назад в браузере.
pointer-events не использовал ранее, теперь буду, спасибо !
Очень полезное видео! С меня лайк =D. Было бы интересно (по крайней мере мне), если бы ты запил ролик, как сделать адаптивный touch слайдер. Когда у меня появилась такая задача, без подключения доп. библиотек, я пошёл шерстить инет. В итоге я решил задачу, однако, как мне кажется тот цыганский фокус на 670 строк, который у меня получился, это не самое правильное решение) Был бы рад увидеть правильное исполнение.
Как всегда ТОП!
супер огонь, просто адово пламя!🔥🔥🔥