Бургер меню без библиотек на чистом JavaScript + плавный скролл к ссылкам

  Рет қаралды 14,218

Прокашев Даниил

Прокашев Даниил

Күн бұрын

Привет! Сегодня мы будем с нуля делать бургер-меню, которое будет отлично смотреться на любом устройстве, от десктопов до мобильных устройств. Мы полностью напишем функционал на языке JavaScript, дополним наше меню дополнительными фишками, а также разберем 2 варианта внешнего вида нашего меню. Приятного просмотра!
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Ссылки:
Архив с результатом - drive.google.com/file/d/1OcUd...
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Соцсети:
Telegram: t.me/prokashev_daniil
Github: github.com/flizerzet
Рекомендую подписаться на мой канал Душевная Верстка: t.me/frontweb_notes
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Таймкоды:
00:00 - Введение
01:07 - Начинаем
01:36 - Пишем разметку
03:53 - Стилизуем десктоп
05:00 - Делаем мобильное меню
11:32 - Пишем скрипты
17:28 - Плавный скролл
21:20 - Разбираем другие варианты меню
24:25 - Конгратюлэйшн
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Теги:
#webdev
#верстка
#layout

Пікірлер: 69
@demianamnel01
@demianamnel01 Жыл бұрын
Один из лучших видосов по теме бургер меню, у многих не рассматривается переход по ссылкам, только верстка, а тут с этим очень помогли)
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю! рад стараться :)
@MrBenemon
@MrBenemon Жыл бұрын
Спасибо, крутой контент. Все четко подано, как мини туториал. Мне так легче воспринимать, чем сухую теорию. Добавил в закладки. И конечно в своем портфолио сделал по аналогии с видео, работает )
@sad_gary
@sad_gary 6 ай бұрын
блин даниил!! какое же огромное спасибо тебе!! я 3 дня мучался по видосам других блогеров и не получалось(( ппц как ты просто выручил! огромное спасибо! 😭
@jasonborn4373
@jasonborn4373 Жыл бұрын
Респект большое спасибо! Крутяк! Ты большой молодец!
@ironXmen
@ironXmen Жыл бұрын
Спасибо, очень понятно и доступно👍 Процветания каналу!!!
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю!
@evgenenterprises4933
@evgenenterprises4933 Жыл бұрын
Классно рассказываешь, структурированная и понятная подача информации. Спасибо за твой труд!
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю! рад стараться
@alexdrumer5933
@alexdrumer5933 8 ай бұрын
Отличный урок, долго искал меню с переходом по ссылкам, выручил меня братан! Желаю каналу много подписчиков! Естественно подписался!
@awesomedud
@awesomedud Жыл бұрын
обалденный видос. коротко и по делу)
@pinnikolay
@pinnikolay 2 жыл бұрын
Обязан написать комментарий, чтобы поддержать тебя. Отличное видео без воды, чётко и по делу. Спасибо
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
спасибо за приятный фидбэк!)
@olgapedashenko3930
@olgapedashenko3930 Жыл бұрын
Спасибо! Очень помогли)
@musicalfounder
@musicalfounder 6 ай бұрын
спасибо, крутой шаблон ❤
@Svetkachalina
@Svetkachalina 2 жыл бұрын
Беру в копилочку, спасибо! 🤩
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
это правильно:)
@mxate5598
@mxate5598 Жыл бұрын
Благодарю, хорошо и четко объяснил. Искал бургер меню, без всяких лишних jquery, и ненужных функции. Всё прекрасно!
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю!)
@katerynat691
@katerynat691 Жыл бұрын
Как же вы классно объясняете. Снимайте, пожалуйста, еще видео
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю!
@noze3459
@noze3459 Жыл бұрын
@@user-yd1tk2ix6f а последнее видео пол года назад(( как так?
@user-lm9ee1gn5p
@user-lm9ee1gn5p Жыл бұрын
Класс, спасибо
@vesnanervah
@vesnanervah Жыл бұрын
Просто лучший
@marylis4895
@marylis4895 Жыл бұрын
Спасибо!
@meles-GG
@meles-GG 2 жыл бұрын
Топчик!))спс
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
благодарю!
@user-rashid-mamyrov
@user-rashid-mamyrov 2 жыл бұрын
Отлично! 👍
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
спасибо!
@alexeytsvirkun1363
@alexeytsvirkun1363 Жыл бұрын
Спасибо большое) Очень круто
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю!
@alexeytsvirkun1363
@alexeytsvirkun1363 Жыл бұрын
@@user-yd1tk2ix6f Только есть один вопрос. Когда ширина меню не 100%, то черная область выдвигается вместе со списком меню при нажатии на бургер. А вариант, когда эта черная область появляется независимо от списка меню можно сделать посредством добавления блока, который по z-index будет между самим списком и непосредственно контентом сайта?
@alexdreamer11
@alexdreamer11 Жыл бұрын
Тоже искал, спасибо
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
пожалуйста!)
@ioannis2000
@ioannis2000 5 ай бұрын
Nice video. Which plug in you used to extract class names from HTML to css file?
@miramir9216
@miramir9216 Жыл бұрын
ты самый лучший из 1234567890- видео что я видел !!!! спасибо старый
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
спасибо)
@salovbokah
@salovbokah Жыл бұрын
Отличный видос, подписался. Будет ли реакт, тс, редакс/ртк (ну и вот эти вот все высокотехнологичные плюшки) в будущем?
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
пока не знаю, в ближайшее время точно нет)
@user-ii9uk5sh7w
@user-ii9uk5sh7w Жыл бұрын
Спасибо. Покажи ещё пожалуйста как в этом меню можно делать подменю
@prostojerk9861
@prostojerk9861 2 жыл бұрын
Сделай пожалуйста видео, с версткой больших макетов, с добавлением дополнительных файлов как css так и html. Уверен это будет полезно новичкам, ведь не каждый понимает при открытие проекта, почему там вместо одного файла index.html ещё кучу других файлов. Это видео получилось довольно полезным, надеюсь увидишь мой комментарий.
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
хорошо, сделаю! спасибо за фидбек :)
@prostojerk9861
@prostojerk9861 2 жыл бұрын
@@user-yd1tk2ix6f спасибо вам за видеоролики )
@derebko95
@derebko95 Жыл бұрын
классное информативное видео молодец! сделал все как в видео, но скажи пожалуйста, я вот под классом .menu__body добавить другой блок с классом .square__btn с кнопками, и мне нужно чтобы при 767px у меня открывалось меню бургер только c классом .menu__list как у тебя в видео, чтобы .square__btn был виден на header, а вот на 497px (допустим) у меня меню бургер открывалась вместе с .menu__list и с моими кнопками .square__btn . как это можно сделать, подскажите?
@ASMR-Bodya
@ASMR-Bodya Жыл бұрын
Здравствуйте, я дошёл до этого момента 6:54. На этом моменте вы демонстрируете что у вас получилось 3 полоски. Я повторил те же действия, повторял всё точ в точ, но у меня почему-то 2 полоски.. у вас есть мысли почему так ? :(
@romanchugunov1959
@romanchugunov1959 Жыл бұрын
Почему может не работать плавный скролл в хроме? код 1 в 1 несколько раз проверил
@user-sp4kx8bo4i
@user-sp4kx8bo4i Жыл бұрын
Видос топовый Спасибо большое за полезную информацию ! Но у меня возникла не состыковочка ))) Подскажите , что это может быть У меня не появляется скролл на 16:15 минуте Делаю все тоже самое , но его нет Единственное что помогает , для того чтобы появился скролл в .menu__bodu { overflow: auto padding -bottom: 100px (тире) 300px (Добавляю и все работает ) } Не могу понять почему так ???((
@bake5448
@bake5448 Жыл бұрын
Бро какой у тебя в Vs code встроенный шрифт стоит?
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
вроде Consolas
@sean1000
@sean1000 2 ай бұрын
0:42 есть видео или исходники по этим сайтам?
@dimafomaa
@dimafomaa Жыл бұрын
Подскажи, а зачем делать запись в js для скрола , если просто в css можно прописать scroll-behavior->smooth Или это другое ?
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
это нужно для поддержки старыми версиями браузеров
@dimafomaa
@dimafomaa Жыл бұрын
@@user-yd1tk2ix6f понял, спасибо 😉
@zelenyigor6919
@zelenyigor6919 Жыл бұрын
В хроме плавный скролл, почему-то, не работает (
@MrBenemon
@MrBenemon Жыл бұрын
Справа если сделать меню, появляется прокрутка в ширину
@olesyamakarova997
@olesyamakarova997 Жыл бұрын
Эх, на первый взгляд очень полезное видео, но по факту для олдов оно явно не особо актуальное, а для таких новичков как я, слишком много пропущенного и непонятного. :( К примеру: "тут у меня стоит полезный плагин, я его применил вот вуаля!" (какой плагин - фиг его знает), "я тут предварительно настроил себе страницу, то чего мы не будем касаться" (при этом всё пролистывается так быстро, что дабы повторить я раз пять пыталась словить момент, когда код мелькает на экране). Думаю, если Вы ориентированы на таких нубов, как я, то стоило б хотя бы на пару тройку секунд показывать и обозначить код, что присутствует в файле, пусть и не играет особой роли для раскрытия темы. Просто, чтоб все желающие успели при необходимости нажать на паузу и переписать себе в тренировочный файл)) В итоге пришлось идти смотреть два других видео, сделав на их основе бургер, а потом только вернуться к Вашему, чтоб подсмотреть момент с появлением меню на экране. В общем, желаю дальнейшего совершенствования и много-много подписчиков)
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
благодарю за замечания! напиши, пожалуйста, тайм-код, про какой плагин я говорил? скорее всего про ecsstractor, я в самом начале сказал про него. про страницу, там были стили только для секций, чтобы были большие заголовки и разные фоны, поэтому я не стал заострять на этом внимание. но я учту все замечания и пожелания, большое спасибо!
@romanchugunov1959
@romanchugunov1959 Жыл бұрын
как можно исправить проблему адаптива? при сужении экрана примерно с 460px начинает все секции ломаться и вместо их заданного цвета рядом появляется еще белый
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
возможно, эта проблема была из-за большого размера шрифта в секциях
@olmoney1479
@olmoney1479 2 жыл бұрын
Добрый вечер! Если не секрет где учились?
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
привет! много где. ютуб, курсы на площадках, интенсивы. в основном ютуб
@olmoney1479
@olmoney1479 2 жыл бұрын
@@user-yd1tk2ix6f Интересно было бы послушать твой путь.👍
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
@@olmoney1479 спасибо за идею :)
@H0OliGAN
@H0OliGAN 2 жыл бұрын
Начал учить фронтенд, дайте совет как легче учить, а то мозг варится
@user-yd1tk2ix6f
@user-yd1tk2ix6f 2 жыл бұрын
привет! сначала советую выучить хорошо верстку, так как не все фронты умеют хорошо верстать, а это достаточно важный навык. потом учи js, как только выучишь его на хорошем уровне - можно будет переходить к фреймворкам
@H0OliGAN
@H0OliGAN 2 жыл бұрын
@@user-yd1tk2ix6f спасибо
@crylaught7283
@crylaught7283 Жыл бұрын
4:22 что это за символы? $&
@user-yd1tk2ix6f
@user-yd1tk2ix6f Жыл бұрын
& - это символ вложенности, доступный в sass (scss) $ в этом куске нет
@crylaught7283
@crylaught7283 Жыл бұрын
@@user-yd1tk2ix6f понял. Спасибо за гайд. Правда, мне пришлось в голове переводить все это в обычный ксс, но я все равно собирался изучать scss, так что спасибо
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 104 МЛН
Получилось у Вики?😂 #хабибка
00:14
ХАБИБ
Рет қаралды 5 МЛН
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 6 МЛН
Build a Slide out Hamburger Menu with HTML, CSS & JavaScript
16:27
Tyler Potts
Рет қаралды 111 М.
Простое модальное окно на JS - ничего лишнего!
24:48
Прокашев Даниил
Рет қаралды 5 М.
Как быстро стать JUNIOR frontend разработчиком | Что нужно знать | Roadmap 2024
18:14
Frontend Fundamentals | Александр Караджиков
Рет қаралды 2,2 М.
Выпадающее меню на CSS + адаптив под тачскрины
32:46
Фрілансер по життю
Рет қаралды 144 М.
Фронтенд и моё первое тестовое задание - прожарка, анализ ошибок.
16:53
Александр Ламков — Friendly Frontend
Рет қаралды 12 М.
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 104 МЛН