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

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

[БаночкаТушёнки]

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

[MarselNz]

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

&::after {
top: 50%;
transform: translateY(-50%);
transform: rotate(-45deg);
}

[ИгорьХудолеев]

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

[ЕвгенийВовк-ыь]

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

[razmik]

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

[НиколайЧеботарь-щж]

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

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

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

[elsa_m]

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

[StonHenge]

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

[imITshnik]

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

[ivan]

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

[Nazarkkk-ehqk]

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

[mishachubenko]

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

[evgeniypopenko]

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

[IgorBobyrev]

Все конечно хорошо, но сейчас работодатели требуют организовывать бургеры без JS - только на CSS! И даже слайдеры :))))

[tiktoktrends]

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

[senianga]

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

[АннаГант-лб]

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

[ner]

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

[grizllywhite]

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