Делаем адаптивное меню для сайта
HTML-код
- Опубликовано: 9 июл 2020
- Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео я рассказываю, как сделать адаптивное выпадающее мегаменю, чтобы им было возможно адекватно пользоваться.
В следующих видео будет верстка сайта на vw, а так же просто практика адаптивной верстки.
• Верстка сайта с нуля д... - марафон верстки
• Лучший слайдер для сай... - слайдер на мобильных устройствах
• Как натянуть верстку н... - про то, какие проблемы бывают с натяжкой на WordPress
clck.ru/PbZCJ - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #адаптивнаяверстка #адаптивноеменю
Давно искал реализацию такого многоуровневого адаптивного меню и НАШЁЛ!) Мужик однозначно жму 🤝, продолжай дальше пилить такой годный контент👍
Спасибо))
спасибо!
одноуровневых менюшек оч много на ютубе
а многоуровневых + адаптив в мобайл версию прям не хватало 👍
Рад помочь))
Спасибо за урок, ждем продолжений.
Как всегда - мега полезно и супер понятно) спасибо за видео👍
Спасибо)
Благодарю, очень познавательно.
Просьба увеличивать размер шрифта в редакторе.
Спасибо огромное!!! то что я и просил ))
Очень круто! Спасибо!
То что надо! Отличный и просто и информативно и понятно
👍
Максим, Вы святой человек))
Спасибо))
слишком круто!
спасибо)
Супер!
Спасибо)
Пушка.
Спасибо)
Классное меню!) Но еще было бы здорово показать, как реализовать саму навигацию по якорям, иначе ну реализовали мы это меню, ну прилепили к ссылкам и разделам соответствующие ID, потом заходим в меню, жмем на нужный пункт и перехода не происходит, надо что мудрить или перелопачивать stackoverflow. И так во всех видео на ютубе про верстку мобильных меню
Тут задумка именно про разные страницы, поэтому якорь не показывал
Но вообще да, сделаю =)
@@maxgraph Ааа, тогда хорошо)
Ошибочка на 15:00. У первого айтема не исчез левый паддинг, потому что first-child в этом родительском блоке является ссылка "назад".
P. S. Блин супер приятно увидеть этот способ показа выпадающего меню через visibility и opacity, когда раньше делал это через display: none/block. Не можем повесить transition на дисплей, из-за чего получается резко, а тут красота, спасибо)
Пожалуйста)
Да, ошибки бывают))
ТОП контент. Еще и с подменю. А не будет интеграции в WP?
Не знаю даже, можно попробовать)
@@maxgraph Было бы круто))
А как добавить еще один уровень вложенности?
Вот бы ещё сделать так что бы работало и с третьим и последующим уровнями
Здравствуйте! Подскажите, а как можно наследовать ховер, если навести курсор на подменю, чтобы цвет у элемента "Каталог" и "Xiaomi" выделялся?
Здравствуйте, только через js
А будет когда-то адаптивное МЕГА меню? Толковых видео нет в ЮТ на эту тему
А это что, если не оно?)
А логотип не входит в навигацию? Нажимая на него, мы переходим на главную страницу.
Это не всегда так, особенно на лендингах
11:41
27:10
30:31
33:12
комментарий для себя
на ширине экрана от 768 до 992px
при наведении на Каталог, подменю улетело влево и все не помещается
чтоб затронуть только этот пункт, добавил ему отдельный клас и поставил "right: -250px"
.nav__list--dropdown.many-columns
+media-breakpoint-down(md)
right: -250px
или есть другое решение?
Да в принципе можно и так