Меню бургер за 10мин для начинающих! Очень простой способ. Мобильное меню. Код из видео в описании)

Подписаться 2 тыс.

Просмотров 29 тыс.

50% 1

Материалы урока: t.me/frontend_case
Чат Фронтендеров в Telegram (помощь новичкам): t.me/frontend_case_chat
Если ты изучаешь HTML, CSS, JS, то тебе надо практиковаться!
В этом видео мы сделаем очень простое бургер-меню для сайта, которое в дальнейшем вы сможете стилизовать и улучшать по своему усмотрению. Меню адаптируется под мобильные устройства. Анимируется сама иконка, из бургера она превращается в крестик. Навигация всегда прижата к верхней стороне браузера, что удобно для пользователей.
Подробное объяснение на практике.
Удачи!

Опубликовано:

22 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

@user-yz9sz6xe8l 8 месяцев назад

Господи, как же этот видеоролик мне помог! Чтобы вы понимали, до того, как посмотреть этот ролик и посмотрел ещё два ролика от Фрилансера по Жизни, что на jQuery, что на чистом JS и у меня ничего не получилось, здесь же я чуток намудрил с z-index'ом и анимацией, но в последствии исправил

@MarselNz 8 месяцев назад

Большое спасибо. Про неровный крестик, не усложняйте жизнь расчетами снизу и сверху, просто в одном месте посчитайте и будет вам ровный крестик &::before { top: 50%; transform: translateY(-50%); transform: rotate(45deg); } &::after { top: 50%; transform: translateY(-50%); transform: rotate(-45deg); }

@user-iq5wx7qq4v 6 месяцев назад

Очень круто!!!! Спасибо большое. Довольно приятная анимация)

@razmik803 Год назад

Класс, спасибо! Быстро и наглядно, что бы освежить память 👍 Ждём следующего видео :)

@stasholmansky6579 Год назад

Отличное виде, подписался! Спасибо за контент) Меню работает)

@tazorprod.934 Год назад

Чудесное видео. Спасибо вам большое

@imITshnik 4 месяца назад

Спасибо вам огромное, использовал эту деталь в конкурсной работе

@StonHenge 7 месяцев назад

Отличный ролик. Очень полезно, получилось применить в своём проекте)

@user-iu1wc9rh3y Год назад

Очень классный момент, когда то объяснял про active! Объяснений таких вещей иногда очень не хватает. У тебя классный контент)

@frontend_case Год назад

Спасибо)

@jakefrost1967 9 месяцев назад

Спасибо. Подписался. Стал тысячным)

@user-hf4fo8xe4y 3 месяца назад

Есть разные видео. Одни смотришь и напрягаешься. Другие смотришь и расслабляешься. А именно это видео можно охарактеризовать словами-смотришь и кайфуешь. Спасибо тебе. Покайфовал. Да еще и новые знания почерпнул! Это точно твоё.

@Drab-vq9bt Год назад

💯💯💯 как всегда все на высоте!

@frontend_case Год назад

Спасибо)

@user-lm9ee1gn5p Год назад

поддерживаю

@user-lm9ee1gn5p Год назад

Спасибо большее очень полезно

@Nazarkkk-eh1qk Год назад

Спасибо! Только я в активных псевдоэлементах сделал transform(0, -70%) и transform(0, 70%) соответственно, так крестик более ровный получается

@karatsergio4472 10 месяцев назад

wow nice , thx bro =)

@ivan4486 Год назад

можно не дисплей нон для меню прописать, а например лефт минус 1000, а для класса опен лефт 0 и тогда оно будет плавно выплывать сбоку

@ismailpro4232 Год назад

nice very nice thank you bro

@senianga1 3 месяца назад

зачем в .nav при медиа запросе задавать флекс и потом флекс - дирешин если элементы li и так стоят колону?

@bekgoziesbolov3837 7 месяцев назад

супер отлична

@annazharkova8801 7 месяцев назад

Здравствуйте! Подскажите, пожалуйста, класс .open нужно добавить к ?

@megavanchik228 6 месяцев назад

тебе в html добавлять его не надо, он добавляется за счет скрипта при клике

@epicshorsviral Год назад

Not bad 👍

@ner0667 4 месяца назад

Супер крутой урок, но есть вопрос. Бургер открывается при клике на абсолютно любую область Html,а не только по иконке бургера. Как это можно исправить?

@justfisher2920 Год назад

Подскажи как якоря сделать на ссылках бургера, что бы при нажатии на ссылку, бургер автоматически закрывался и плавно скролился на нужный блок контента если это лендинг

@frontend_case Год назад

Привет, заходи к нам в телеграмм чат @frontend_case будем решать твой вопрос!

@justfisher2920 Год назад

@@frontend_case спасибо, уже!

@grizllywhite6004 Год назад

Дружище, а подскажи как сделать чтобы когда я стили изменял браузер сам обновлялся сразу, как у тебя сделано? Чтобы каждый раз не обновлять страницу.

@frontend_case Год назад

Установи плагин в vscode, который называется live server

@mylife1615 6 месяцев назад

у меня почему то в крестик не плавно переход

@user-be8dy2lw3n 4 месяца назад

почему-то при клике на бургер - меню появляется, но крестик пропадает и нет возможности закрыть меню. и при клике на пункт меню переход видно что происходит, но меню все перекрывает. и хотелось бы не использовать !important - слышала, что это нехорошая практика... 🤔как-то недопилен урок

@tiktoktrends926 Год назад

У меня очень большие проблемы кто разбирается помогите!!!!!! Когда я открываю бургер меню все элемен открывается сзади картинок и зоголовок что мне сделать ???

@deterkot Год назад

z-index чтоб какой то контент был выше другого чекни документацию

@user-hn2qq6wp4r Месяц назад

что такое клас open?

@masumitakaragawa4145 3 месяца назад

автор, где код!! в названий четко написанно что в описаний есть код, но его там нету! добавь туда код пожалуйста автор

@knocker6970 11 месяцев назад

Автор, меню прикольно получилось 😅 Все действительно работает . Но к сожалению это слишком сложно для новичков 😢 Я скопировал твой код , у меня все получилось, все работает . Но вот когда сам написал , от своей балды , то ничего не работает вообще 😅