Большая благодарность тебе за старания, уроки и знания. Для меня (начинающего фронтендера) эти знания очень ценны, придают уверенности и помогают в наборе знаний перед моей первой настоящей работой!
Я вручную переписывал код (да, мне так интереснее), но на деле у меня вверху страницы только широкая фиолетовая полоса, без каких либо меню... Почему так может произойти?
Супер. То, что я искал. Сравнительно коротко, ясно и без лишней воды. Спасибо огромное! Только почему-то крестик получился неровный, но во-первых это придает какой-то интересный визуальный эффект. Будто крестик повернут немного. Хз, может мне кажется. Но, а во-вторых лечится так: .hamb__field.active .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } Вместо -8deg прописываем -10deg
Здравствуйте, при использовании копирования функции js копируется на полноэкранный вариант (встает список копией рядом), а на медиа при клике попап выезжает пустой. В чём может быть проблема?
Куда уже больше объяснений, и так всё разжёвано именно для новичков. Точнее, для тех новичков, которые уже более-менее освоили синтаксис HTML и CSS. Тут даже JS понимать не надо, просто скопипастить его себе в js-файл, и не морочить голову - как это работает. А если новичок не понимает css и html, то сначала надо его поучить на более простых примерах. Это как изучение иностранного языка - пока не изучишь минимум слов на нём, на этом языке не заговоришь. Ссылки на учебу автор дал в рекомендации под видео.
Друзья, я совсем забыл .. Чтобы меню закрывалось при нажатии на ссылку добавьте код в JS-файл: const links = Array.from(menu.children); links.forEach((link) => { link.addEventListener("click", closeOnClick); }); function closeOnClick() { popup.classList.remove("open"); hamb.classList.remove("active"); body.classList.remove("noscroll"); }
hover для бургера не пишут,hover это наведение мышью,бургер пишут для телефона/планшета,там пользователь мышью не будет наводить,для бургера задают touch и куча прочих свойств,но не hover
Отлично изложено - просто и чётко. Лайк, однозначно. Только один недочет: не прописаны якоря, по которым можно спуститься/перейти из пункта меню к его разделу на странице в index.html. Соответственно, нет и js кода для плавного осуществления этих переходов. Надо бы поправить, а, автор?
Подскажите кто знает, сделал я копию этого меню, под каталог и разместил их как в строку , если один блок закомментирую то второй работает , а если два стоит то меню работает каталог нет(
Добрый день! :) Прописал в стилях: body.noscroll { overflow: hidden; } Прописал в скрипте: const body = document.body; body.classList.toggle("noscroll"); В итоге получил: невозможность скролла в мобильной версии. А когда запускаю бургер и вывожу меню, тогда скроллится. Как-то всё наоборот получилось у меня :)
привет, классное видео. большое тебе спасибо. есть вопрос: а как добавить активный класс, т.к. у нас лендинг, чтобы при нажатии на ссылку, срабатывает якорь, и ссылка эта при откритии повторного меню становится активной. буду очень благодарен. спасибо.
Привет, спасибо за отзыв! Не совсем понял, что нужно сделать. Тебе нужно стилизовать активную ссылку? Если да, то в CSS можно обратиться к ней так: .link:active , где .link - класс ссылки в меню.
Нет, смотри. У нас есть активная ссылка. Мы нажимаем на бургер, открывается меню, и когда мы нажимаем на ссылку, то бургер закрывается и мы переходим на нее. А как сделать, чтобы перед закрытием ещё и поменялась активная ссылка на ту, которую мы только что нажали. Чтобы при повторном открытии кнопки меню, у нас уже поменялась активная ссылка. Был к примеру, блок О нас, а теперь Контакты
@@swaytornado8327 кажется понял, смотри. В моем коде функция closeOnClick обрабатывает событие при нажатии на ссылку. Тебе нужно передать в функцию event. То есть написать так closeOnClick(e). После этого внутри функции работаешь с e.target - это по сути и должна быть выбранная ссылка (в консоль выведи на всякий случай). Если это и есть выбранная ссылка, то при нажатии на неё присваиваете ваш активный класс. Пусть это будет btn_active. Будет примерно так : e.target.classList.add("btn_active").
А можете подсказать как мне поместить кнопку если у меня она есть (к примеру кнопка скачать) в само меню или вместо кнопки логотип?) (если у меня меню на всю высоту экрана)
1.Создаете ссылку , в нее кладете саму кнопку (ваш button, который опишете далее в классе "класс-для-кнопки"), 2. Ссылку размещаете в меню вместо логотипа в файле index.html. 3. Cоздаете класс со стилями для кнопки ( "класс-для-кнопки"), прописываете его в ссылке. 4. Если нужно, чтобы этот элемент появлялся только в мобильном разрешении, то прописываете его брейкпойнте. Примерно так: Сама ссылка: < a href = "ссылка" class = "класс-для-кнопки">текст ссылки и/или картинка ссылки В брейпойнте: @media (max-width: 1000px){ .класс-для-кнопки{ ... стили для кнопки (длина, ширина, цвет и т.д.)... } } Вместо 1000px можно выбрать иной предел (например: 767px ), выше которого кнопка должна исчезнуть. Не забудьте описать стиль для этой кнопки в ситуациях ::hover, ::focus, ::active - если это вам нужно. Профит.
Видос помог, но объяснения просто ужасное, все очень быстро, а по js вообще ужас ничего не понятно, просто пишем, это делает то это то, просто ультра быстро, и ничего не понятно, а с айдишником для попапа заметил сразу, перед тем как начали писать код
Готовый код из урока (с объяснением) ➝ codelab.pro/prostoe-burger-menyu-na-chistom-javascript/
Большая благодарность тебе за старания, уроки и знания. Для меня (начинающего фронтендера) эти знания очень ценны, придают уверенности и помогают в наборе знаний перед моей первой настоящей работой!
Я вручную переписывал код (да, мне так интереснее), но на деле у меня вверху страницы только широкая фиолетовая полоса, без каких либо меню... Почему так может произойти?
Я повторил у меня все получилось, я сайт делаю все по кускам собираю) только учусь
Супер. То, что я искал. Сравнительно коротко, ясно и без лишней воды. Спасибо огромное! Только почему-то крестик получился неровный, но во-первых это придает какой-то интересный визуальный эффект. Будто крестик повернут немного. Хз, может мне кажется. Но, а во-вторых лечится так: .hamb__field.active .bar:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
Вместо -8deg прописываем -10deg
Самое лучшее видео по бургеру! Автору спасибо за видео.
Было бы хорошо заснять продолжение ,как и что делать, типо как в меню категории и их содержимое! А это видео все четко работает и все понятно!
Спасибо тебе большое, ты мне помог сделать мой первый бургер для коммерческого сайта))) Успехов тебе и миллион подписчиков!!
Все четко и отлично, все работает как надо!
Здравствуйте, при использовании копирования функции js копируется на полноэкранный вариант (встает список копией рядом), а на медиа при клике попап выезжает пустой. В чём может быть проблема?
Все классно, максимально по делу, единственное чего бы хотелось, больше объяснений, тогда и новичкам было бы больше пользы, а так супер, спасибо.
Куда уже больше объяснений, и так всё разжёвано именно для новичков. Точнее, для тех новичков, которые уже более-менее освоили синтаксис HTML и CSS. Тут даже JS понимать не надо, просто скопипастить его себе в js-файл, и не морочить голову - как это работает. А если новичок не понимает css и html, то сначала надо его поучить на более простых примерах. Это как изучение иностранного языка - пока не изучишь минимум слов на нём, на этом языке не заговоришь. Ссылки на учебу автор дал в рекомендации под видео.
@@СергейКудаев-в6ц
Я вижу ви умеете воспринимать критику 😆
Друзья, я совсем забыл .. Чтобы меню закрывалось при нажатии на ссылку добавьте код в JS-файл:
const links = Array.from(menu.children);
links.forEach((link) => {
link.addEventListener("click", closeOnClick);
});
function closeOnClick() {
popup.classList.remove("open");
hamb.classList.remove("active");
body.classList.remove("noscroll");
}
Уже хотел написать про закрытие при клике на ссылку... 🙂
Красава))
Не забывайте, что в хтмл нужно прописать
Большое спасибо за видео, как всегда все четко и понятно!
Uncaught TypeError: Cannot read properties of null (reading 'cloneNode') мой первый бургер не хочет работать...
Большое спасибо!
hover для бургера не пишут,hover это наведение мышью,бургер пишут для телефона/планшета,там пользователь мышью не будет наводить,для бургера задают touch и куча прочих свойств,но не hover
Спасибо за поправку, учту это в исходнике на гитхабе.
Отлично изложено - просто и чётко. Лайк, однозначно.
Только один недочет: не прописаны якоря, по которым можно спуститься/перейти из пункта меню к его разделу на странице в index.html. Соответственно, нет и js кода для плавного осуществления этих переходов. Надо бы поправить, а, автор?
А где достать reset css как у тебя?
github.com/toni-wheel/youtube-adaptive-header/blob/master/reset.css
@@codelab_channel Спасибо большое!
Подскажите кто знает, сделал я копию этого меню, под каталог и разместил их как в строку , если один блок закомментирую то второй работает , а если два стоит то меню работает каталог нет(
Очень сильно помог с домашкой :)
добрый день, подскажите как исправить код чтобы меню появлялось с верху в низ.
Добрый день! :)
Прописал в стилях:
body.noscroll { overflow: hidden; }
Прописал в скрипте:
const body = document.body;
body.classList.toggle("noscroll");
В итоге получил: невозможность скролла в мобильной версии. А когда запускаю бургер и вывожу меню, тогда скроллится. Как-то всё наоборот получилось у меня :)
красава! Успехов!
Спасибо :)
отличный ролик! большое спасибо!
Красава, всё понятно!
привет, классное видео. большое тебе спасибо. есть вопрос: а как добавить активный класс, т.к. у нас лендинг, чтобы при нажатии на ссылку, срабатывает якорь, и ссылка эта при откритии повторного меню становится активной. буду очень благодарен. спасибо.
Привет, спасибо за отзыв! Не совсем понял, что нужно сделать. Тебе нужно стилизовать активную ссылку? Если да, то в CSS можно обратиться к ней так:
.link:active , где .link - класс ссылки в меню.
Нет, смотри. У нас есть активная ссылка. Мы нажимаем на бургер, открывается меню, и когда мы нажимаем на ссылку, то бургер закрывается и мы переходим на нее. А как сделать, чтобы перед закрытием ещё и поменялась активная ссылка на ту, которую мы только что нажали. Чтобы при повторном открытии кнопки меню, у нас уже поменялась активная ссылка. Был к примеру, блок О нас, а теперь Контакты
@@swaytornado8327 кажется понял, смотри. В моем коде функция closeOnClick обрабатывает событие при нажатии на ссылку. Тебе нужно передать в функцию event. То есть написать так closeOnClick(e). После этого внутри функции работаешь с e.target - это по сути и должна быть выбранная ссылка (в консоль выведи на всякий случай).
Если это и есть выбранная ссылка, то при нажатии на неё присваиваете ваш активный класс. Пусть это будет btn_active. Будет примерно так :
e.target.classList.add("btn_active").
Огромное тебе спасибо. Сделаю, отпишусь. Всех благ тебе, и неимоверное количество подписчиков. Иду пробовать. Спасибо.
все понятно, не хватило только реализации перехода по ссылкам, что бы меню скрывалось , а так спасибо)
Это вы точно подметили, сделаю правки на Github'e. Спасибо!
У меня впорос
У меня скопированый код, но почему-то в попапе ничего не отображаеться((( Подскажите что можно сделать
Заранее спасибо
спасибо большое! все класс! тоько крестик жалко( кривой получился)))
исправил) поменял на 10px и крестик стал норм .hamb__field.active .bar:nth-child(1) {
transform: translateY(10px) rotate(45deg);
От души мне понравилось
А можете подсказать как мне поместить кнопку если у меня она есть (к примеру кнопка скачать) в само меню или вместо кнопки логотип?) (если у меня меню на всю высоту экрана)
1.Создаете ссылку , в нее кладете саму кнопку (ваш button, который опишете далее в классе "класс-для-кнопки"),
2. Ссылку размещаете в меню вместо логотипа в файле index.html.
3. Cоздаете класс со стилями для кнопки ( "класс-для-кнопки"), прописываете его в ссылке.
4. Если нужно, чтобы этот элемент появлялся только в мобильном разрешении, то прописываете его брейкпойнте.
Примерно так:
Сама ссылка: < a href = "ссылка" class = "класс-для-кнопки">текст ссылки и/или картинка ссылки
В брейпойнте:
@media (max-width: 1000px){
.класс-для-кнопки{
... стили для кнопки (длина, ширина, цвет и т.д.)...
}
}
Вместо 1000px можно выбрать иной предел (например: 767px ), выше которого кнопка должна исчезнуть.
Не забудьте описать стиль для этой кнопки в ситуациях ::hover, ::focus, ::active - если это вам нужно.
Профит.
Красавчик
у меня не получилось :(
Видос помог, но объяснения просто ужасное, все очень быстро, а по js вообще ужас ничего не понятно, просто пишем, это делает то это то, просто ультра быстро, и ничего не понятно, а с айдишником для попапа заметил сразу, перед тем как начали писать код
дай свой дс
Подскажите в чем может быть проблема? Если в попап добавить еще элементы, скролл не работает. То есть меню скролится, а все что идет ниже нет