Меню бургер за 10мин для начинающих! Очень простой способ. Мобильное меню. Код из видео в описании)
HTML-код
- Опубликовано: 22 янв 2023
- Материалы урока: t.me/frontend_case
Чат Фронтендеров в Telegram (помощь новичкам): t.me/frontend_case_chat
Если ты изучаешь HTML, CSS, JS, то тебе надо практиковаться!
В этом видео мы сделаем очень простое бургер-меню для сайта, которое в дальнейшем вы сможете стилизовать и улучшать по своему усмотрению. Меню адаптируется под мобильные устройства. Анимируется сама иконка, из бургера она превращается в крестик. Навигация всегда прижата к верхней стороне браузера, что удобно для пользователей.
Подробное объяснение на практике.
Удачи!
Господи, как же этот видеоролик мне помог! Чтобы вы понимали, до того, как посмотреть этот ролик и посмотрел ещё два ролика от Фрилансера по Жизни, что на jQuery, что на чистом JS и у меня ничего не получилось, здесь же я чуток намудрил с z-index'ом и анимацией, но в последствии исправил
Большое спасибо. Про неровный крестик, не усложняйте жизнь расчетами снизу и сверху, просто в одном месте посчитайте и будет вам ровный крестик
&::before {
top: 50%;
transform: translateY(-50%);
transform: rotate(45deg);
}
&::after {
top: 50%;
transform: translateY(-50%);
transform: rotate(-45deg);
}
Класс, спасибо! Быстро и наглядно, что бы освежить память 👍 Ждём следующего видео :)
Есть разные видео. Одни смотришь и напрягаешься. Другие смотришь и расслабляешься. А именно это видео можно охарактеризовать словами-смотришь и кайфуешь. Спасибо тебе. Покайфовал. Да еще и новые знания почерпнул! Это точно твоё.
Очень круто!!!! Спасибо большое.
Довольно приятная анимация)
Отличное виде, подписался! Спасибо за контент) Меню работает)
Чудесное видео. Спасибо вам большое
Очень классный момент, когда то объяснял про active! Объяснений таких вещей иногда очень не хватает. У тебя классный контент)
Спасибо)
Спасибо вам огромное, использовал эту деталь в конкурсной работе
Отличный ролик. Очень полезно, получилось применить в своём проекте)
Спасибо. Подписался. Стал тысячным)
Спасибо братишка 💪
💯💯💯 как всегда все на высоте!
Спасибо)
поддерживаю
Спасибо большее очень полезно
wow nice , thx bro =)
Спасибо! Только я в активных псевдоэлементах сделал transform(0, -70%) и transform(0, 70%) соответственно, так крестик более ровный получается
можно не дисплей нон для меню прописать, а например лефт минус 1000, а для класса опен лефт 0 и тогда оно будет плавно выплывать сбоку
nice very nice thank you bro
зачем в .nav при медиа запросе задавать флекс и потом флекс - дирешин если элементы li и так стоят колону?
супер отлична
Здравствуйте! Подскажите, пожалуйста, класс .open нужно добавить к ?
тебе в html добавлять его не надо, он добавляется за счет скрипта при клике
Not bad 👍
Дружище, а подскажи как сделать чтобы когда я стили изменял браузер сам обновлялся сразу, как у тебя сделано? Чтобы каждый раз не обновлять страницу.
Установи плагин в vscode, который называется live server
Подскажи как якоря сделать на ссылках бургера, что бы при нажатии на ссылку, бургер автоматически закрывался и плавно скролился на нужный блок контента если это лендинг
Привет, заходи к нам в телеграмм чат @frontend_case будем решать твой вопрос!
@@frontend_case спасибо, уже!
Супер крутой урок, но есть вопрос. Бургер открывается при клике на абсолютно любую область Html,а не только по иконке бургера. Как это можно исправить?
У меня очень большие проблемы кто разбирается помогите!!!!!!
Когда я открываю бургер меню все элемен открывается сзади картинок и зоголовок что мне сделать ???
z-index чтоб какой то контент был выше другого чекни документацию
у меня почему то в крестик не плавно переход
почему-то при клике на бургер - меню появляется, но крестик пропадает и нет возможности закрыть меню. и при клике на пункт меню переход видно что происходит, но меню все перекрывает. и хотелось бы не использовать !important - слышала, что это нехорошая практика... 🤔как-то недопилен урок
что такое клас open?
автор, где код!! в названий четко написанно что в описаний есть код, но его там нету! добавь туда код пожалуйста автор
Не написал что это с меню с JS
названия музыка
у меня не работает что делать
Автор, меню прикольно получилось 😅 Все действительно работает . Но к сожалению это слишком сложно для новичков 😢
Я скопировал твой код , у меня все получилось, все работает . Но вот когда сам написал , от своей балды , то ничего не работает вообще 😅
песня
ничего не работает
все работает
Щас бы объяснять то, как тоглить значение по нажатию на кнопку. Ахаххахахаха, кринж...
Дякую, хедер на адаптиві досить довго робити по часу!