Делаем адаптивное меню для сайта

Рет қаралды 11,719

3 жыл бұрын

Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео я рассказываю, как сделать адаптивное выпадающее мегаменю, чтобы им было возможно адекватно пользоваться.
В следующих видео будет верстка сайта на 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
#обучение #адаптивнаяверстка #адаптивноеменю

Пікірлер: 40

@kerusdc8322 3 жыл бұрын

спасибо! одноуровневых менюшек оч много на ютубе а многоуровневых + адаптив в мобайл версию прям не хватало 👍

@maxgraph 3 жыл бұрын

Рад помочь))

@user-ti1em8jo2w 3 жыл бұрын

Давно искал реализацию такого многоуровневого адаптивного меню и НАШЁЛ!) Мужик однозначно жму 🤝, продолжай дальше пилить такой годный контент👍

@maxgraph 3 жыл бұрын

Спасибо))

@tovjukov 3 жыл бұрын

Спасибо за урок, ждем продолжений.

@user-dx4cp2gv4z 3 жыл бұрын

Как всегда - мега полезно и супер понятно) спасибо за видео👍

@maxgraph 3 жыл бұрын

Спасибо)

@PychevAnatoliy 3 жыл бұрын

Благодарю, очень познавательно. Просьба увеличивать размер шрифта в редакторе.

@alexeyponomarev3241 3 жыл бұрын

Очень круто! Спасибо!

@user-tt3hr1pn9d 3 жыл бұрын

Спасибо огромное!!! то что я и просил ))

@world_of_facts_shorts 2 жыл бұрын

То что надо! Отличный и просто и информативно и понятно

@maxgraph 2 жыл бұрын

👍

@summersbyy 3 жыл бұрын

Классное меню!) Но еще было бы здорово показать, как реализовать саму навигацию по якорям, иначе ну реализовали мы это меню, ну прилепили к ссылкам и разделам соответствующие ID, потом заходим в меню, жмем на нужный пункт и перехода не происходит, надо что мудрить или перелопачивать stackoverflow. И так во всех видео на ютубе про верстку мобильных меню

@maxgraph 3 жыл бұрын

Тут задумка именно про разные страницы, поэтому якорь не показывал Но вообще да, сделаю =)

@summersbyy 3 жыл бұрын

@@maxgraph Ааа, тогда хорошо)

@juliasergeeva1513 2 жыл бұрын

Максим, Вы святой человек))

@maxgraph 2 жыл бұрын

Спасибо))

@6ev 3 жыл бұрын

слишком круто!

@maxgraph 3 жыл бұрын

спасибо)

@jslover3687 Жыл бұрын

Ошибочка на 15:00. У первого айтема не исчез левый паддинг, потому что first-child в этом родительском блоке является ссылка "назад". P. S. Блин супер приятно увидеть этот способ показа выпадающего меню через visibility и opacity, когда раньше делал это через display: none/block. Не можем повесить transition на дисплей, из-за чего получается резко, а тут красота, спасибо)

@maxgraph Жыл бұрын

Пожалуйста) Да, ошибки бывают))

@Alexus1504 3 жыл бұрын

Супер!

@maxgraph 3 жыл бұрын

Спасибо)

@Krivoruchko 3 жыл бұрын

Пушка.

@maxgraph 3 жыл бұрын

Спасибо)

@BMikel 3 жыл бұрын

ТОП контент. Еще и с подменю. А не будет интеграции в WP?

@maxgraph 3 жыл бұрын

Не знаю даже, можно попробовать)

@DoSmth 3 жыл бұрын

@@maxgraph Было бы круто))

@r.h._vid 3 жыл бұрын

Вот бы ещё сделать так что бы работало и с третьим и последующим уровнями

@BMikel 2 жыл бұрын

А как добавить еще один уровень вложенности?

@BMikel 3 жыл бұрын

А будет когда-то адаптивное МЕГА меню? Толковых видео нет в ЮТ на эту тему

@maxgraph 3 жыл бұрын

А это что, если не оно?)

@enfllome8830 3 жыл бұрын

Здравствуйте! Подскажите, а как можно наследовать ховер, если навести курсор на подменю, чтобы цвет у элемента "Каталог" и "Xiaomi" выделялся?

@maxgraph 3 жыл бұрын

Здравствуйте, только через js

@ThePatosha 2 жыл бұрын

А логотип не входит в навигацию? Нажимая на него, мы переходим на главную страницу.

@maxgraph 2 жыл бұрын

Это не всегда так, особенно на лендингах

@SuperRAilya 10 ай бұрын

11:41 27:10 30:31 33:12 комментарий для себя

@kerusdc8322 3 жыл бұрын

на ширине экрана от 768 до 992px при наведении на Каталог, подменю улетело влево и все не помещается чтоб затронуть только этот пункт, добавил ему отдельный клас и поставил "right: -250px" .nav__list--dropdown.many-columns +media-breakpoint-down(md) right: -250px или есть другое решение?

@maxgraph 3 жыл бұрын

Да в принципе можно и так