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

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

[@user-yz9sz6xe8l]

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

[@MarselNz]

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

[@user-hf4fo8xe4y]

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

[@user-iq5wx7qq4v]

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

[@user-iu1wc9rh3y]

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

[@frontend_case]

Спасибо)

[@elsa_m8214]

О боже, думала не сработает но нет все отлично работает, спасибо большое вам

[@razmik803]

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

[@ВпоискахСвоегоМеста]

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

[@ivan4486]

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

[@Tehnokrott]

Класс!

[@StonHenge]

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

[@Nazarkkk-eh1qk]

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

[@Drab-vq9bt]

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

[@frontend_case]

Спасибо)

[@user-lm9ee1gn5p]

поддерживаю

[@tazorprod.934]

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

[@imITshnik]

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

[@jakefrost1967]

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

[@evgeniypopenko8705]

А можно как-нибудь добавить плавность при не только при открытии окна с nav, а и с закрытием?

[@user-yy4lm3zd6c]

Спасибо братишка 💪

[@karatsergio4472]

wow nice , thx bro =)

[@user-lm9ee1gn5p]

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

[@ismailpro4232]

nice very nice thank you bro

[@bekgoziesbolov3837]

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

[@epicshorsviral]

Not bad 👍

[@annazharkova8801]

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

[@megavanchik228]

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

[@tiktoktrends926]

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

[@deterkot]

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

[@knocker6970]

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

[@senianga1]

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

[@grizllywhite6004]

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

[@frontend_case]

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

[@justfisher2920]

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

[@frontend_case]

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

[@justfisher2920]

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

[@ner0667]

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

[@user-be8dy2lw3n]

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

[@mishachubenko3394]

Дякую, хедер на адаптиві досить довго робити по часу!

[@mylife1615]

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

[@user-bp3mx5id2z]

Не написал что это с меню с JS

[@artemasante9442]

названия музыка

[@Vsfrcode777]

у меня не работает что делать

[@masumitakaragawa4145]

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

[@user-jf2ui2qy1y]

песня

[@user-hn2qq6wp4r]

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

[@user-hn2qq6wp4r]

ничего не работает

[@fifages]

все работает

[@ivanvagabund4876]

Щас бы объяснять то, как тоглить значение по нажатию на кнопку. Ахаххахахаха, кринж...