Выпадающее меню на CSS + адаптив под тачскрины

Выпадающее меню и выпадающие элементы очень часто используются в верстке. В этом выпуске покажу технику обычного выпадающего меню на CSS а также реализацию под тачскрины мобильных экранов и планшетов на JS
👉 Адаптивное меню "бургер": • Правильное адаптивное ...
👉 Геометрические фигуры на CSS: • Геометрические фигуры ...
👉 Поставил лайк? Держи архив с результатом: fls.guru/howtodoit/howtodoit_...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@alinafitisova3176]

Женечка, дай Бог тебе здоровья и твоей семье! Обожаю тебя и твои уроки, благодарю 👏👏👏

[@bigthinks2290]

Спасибо Жень! Твои уроки - меняют мою жизнь к лучшему!

[@VitaliiMaevskii]

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

[@user-jh2fj1ki8w]

Очень полезное видео. Да ещё - скорость с которой ты кодишь - это вообще очень круто! Надеюсь со временем хотя бы на 50% от твоей выйти. Спасибо за твой труд в нашем ученическом просвещении!

[@FreelancerLifeStyle]

Спасибо!

[@FreelancerLifeStyle]

Лайк или ошибка в коде! :) Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

[@user-jz5cd5uu8w]

Добрый день! Благодарю, Женя, за полезное видео! Четко, быстро, понятно! Успешной реализации планов, мира, благополучия! 👍🤝🙂

[@zzzzzzzvvvvvvvv]

Учитель от Бога! Подписалась не задумываясь. Спасибо за урок!!!! :-)

[@denhost5033]

Мужик!!!! Лучшее видео в интернете!!!! Закрыл очень много вопросов :)))) я давно искал что-то подобное, без лишних библиотек и пустых скриптов. Спасибо огромное!!!

[@FreelancerLifeStyle]

Я рад! Пожалуйста!

[@Coldarinn]

Только вчера думал:"Эх, жалко, что у тебя нет видео про выпадающее меню. Ты так понятно объясняешь, а этого очень не хватает". И вот сегодня ты заливаешь видео про адаптивное меню Я в шоке Спасибо

[@FreelancerLifeStyle]

Я читаю мысли)))

[@user-wf4np1ne2c]

на то он и сенсей))

[@AlexZHIMuk]

А я сегодня до ума доводил меню-бургер с подменю и матерился что нет путних мануалов по таким случаям. Щас погляжу и глядишь переверстаю всё заново.

[@user-vx2kx6oe6l]

Большое спасибо Вам за видео. В Болгарии тоже смотрим Ваши уроки. Быть здоровым ... :)

[@user-nb8ex1tq6r]

Спасибо за труд, отличное видео! Особенно понравился лайфхак с padding для выпадающего блока из-за того, что при hover родителю сбивалось открытие.

[@Hottabov]

Отличный урок! Выполнял его больше четырех часов. Жека, ну у тебя и скорость!

[@FreelancerLifeStyle]

Спасибо!

[@LordOzzy1986]

аналогично, на урок в 35-40 минут, уходит 4-5 часов), но мы только учимся)

[@daniyaribrayev7370]

Очень круто делаете, продолжайте в том же духе!

[@user-ij8fq7un3q]

Огромное спасибо Вам за видео урок, вы максимально понятно и приятно объясняете. Доходить даже до таких деревьев как я. Теперь я Ваша фанатка, вы супер, еще раз огромное спасибо)

[@FreelancerLifeStyle]

Хех, пожалуйста!

[@armenakcomp]

Спасибо, отличное видео все по делу и ничего лишнего. Большущий лайк .

[@user-ed5jf2eg6b]

Очень полезное и информативное видео. До просмотра, думал выпадающие списки делаются онли через details. Спасибо за такой контент! ❤

[@Artem-bt1cx]

привет, ещё раз большое спасибо за контент, использовал этот материал на своём макете)

[@user-vg6ok9uw1b]

Поскорее бы уроки по JS, спасибо тебе за внятное объяснения!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@alexviman]

Отличный урок! Классно все изложено.

[@artyomvoytenko1237]

Видео - топчик) А главное - очень полезно) Спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@roman-_-novikov]

Кажется, что все достаточно просто, но есть нюансы ) Спасибо за урок.

[@user-rv1gn7qn3s]

Жека ты гений, про тебя надо рассказывать всем, слишком мало просмотров для такого годного контента

[@JoSmith0]

Офигенный монтаж и материал!

[@user-qj6op7db5d]

круто! спасибо! Это то что нужно, мало того что понятно, все очень логично и в дальнейшем не возникнет проблем с добавлением новых элементов меню или под меню(с этим много проблем)! еще раз спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@yudeval1647]

очень годный видос, благодарю!

[@lenaplay3884]

Все будет круто и классно!!! Учимся! Полет нормальный! Жека - the best!

[@user-di6ls9sq2l]

Видео просто супер! Помогли разобраться и дописать свой скрипт. Большое спасибо :)))

[@FreelancerLifeStyle]

Пожалуйста!

[@DmitryKvasnikov]

Лучший!!! Огромное спасибо!

[@Fufafacts]

да ты просто МАГ по верстке, обожаю тебя. и кстати ты забыл сказать "Обучайся, развивайся и помни: живи, а работай в свободное время! "

[@user-re3tm7ts9i]

огромное спасибо за такие обучающие видосики

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ku9nn4hr1l]

Огромнейшее спасибо! Вы мне очень помогли!

[@nurgisazhumashev1275]

Спасибо огромное! Успехов вам!

[@user-br1ml9hd3w]

Я совсем недавно начал знакомиться с HTML и CSS, смотря видеокурсы в интернете. На ваш канал наткнулся впервые. Тему с выпадающим меню понял плохо, посмотрев ваше видео (закончив просмотр на адаптации, ибо я еще только сегодня начал знакомиться), я как раз-таки понял как это работает, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@alex45779]

Стопервое ОГРОМНОЕ СПАСИБО!!

[@FreelancerLifeStyle]

Пожалуйста!

[@ViacheslavM3192]

Спасибо за урок!

[@FreelancerLifeStyle]

Пожалуйста!

[@viatchk8838]

Очень доходчиво!

[@contacttrade5688]

Блин ты меня напугал, когда попросил подписаться! Пришлось подписаться. )))

[@annagrigorewa]

Вышло новое видео...сразу зашла, поставила лайк, а понимать и разбираться буду потом)))

[@FreelancerLifeStyle]

Спасибо большое! 👍

[@ZPUA24]

Привет!) Спасибо за меню, сейчас как раз мучаюсь с подобным, там немного сложнее ТЗ, но инфа полезна 100%) смотрю тебя и подписан почти с момента появления канала.Очень надоедает постоянное F5 в браузере, сейчас пишу в саблайне. Напомни, плз, в каком видео у тебя инструкция по локал серверу для автообновлнеия страницы. раньше пользовался Денвером, хочется чем то попроще в настройке) Лайк поставил, жду JS)И, кстати, почему то не работает Color HighLighter. Поставил, есть в меню, но не работает( Кстати, по звукам у тебя механическая клавиатура, это удобно для работы или просто?)

[@mr.zxzxzxz3816]

спасибо Женя!

[@user-ic5vg6ki4i]

А как сделать чтобы, при открытии меню первого уровня, ранее открытое меню (тоже первого уровня) закрывалось?

[@user-ml8hn5kg9e]

Спасибо!!!! за видео

[@alexmart6968]

спасибо за то что ты есть

[@FreelancerLifeStyle]

Пожалуйста!

[@yurapekach7550]

дякую за урок, корисний матеріал і все доступно та зрозуміло пояснено )

[@LordOzzy1986]

Класс, учусь после работы, мозг конечно уже не свеж, и притормаживаю, но качество высочайшее, хочется учиться).

[@outofrange9100]

Наконец-то поняла, нужен перед селектором по классу пробел или нет, спасибо!

[@oleksandrpushkar9306]

Дуже дякую за урок. Реально допоміг вирішити проблему

[@FreelancerLifeStyle]

Будь ласка!

[@user-ty6fq9os9k]

Если под меню будет текст, то он будет уезжать вниз, когда выпадает меню. Это тоже нужно предусмотреть.

[@alekseybodrov9038]

Большое спс! Есть вопрос: как быть если у выпадающего меню есть конкретный размер? Ведь тогда будет заметно, что фон верхней границы меню налазит на перыый уровень.

[@Desnica96]

Спасибо за информационный выпуск. Только вот спустя почти год нет ссылки в описании на переменную).

[@user-us4xy2rx2s]

Она скорее всего на патреоне. Я переписал самостоятельно с видео. Уважаю труд, Евгения, поэтому не буду выкладывать )) Извините

[@user-yz1lf2pw5v]

Добротное видео. Все предельно ясно, до момента с JS. Незнание этого языка немного заводит в тупик, но не умаляет при этом полезности самого видео. Лайк и спасибо автору!!

[@FreelancerLifeStyle]

Рад что полезно!

[@trueroman4558]

Спасибо за ролик! Побольше бы таких авторов на Ютубе) ещё и без рекламных интеграций

[@FreelancerLifeStyle]

Пожалуйста!

[@user-um5vx4ez1p]

Ура!!! Вот прям таки то что ждал!!! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@ulvenrain4295]

Спасибо большое. Видео крутейшее, как и подача, в прочем как всегда)) Однозначно лайк!

[@FreelancerLifeStyle]

Спасибо!

[@user-bw8eh1dm9t]

Однозначно, ЗАЧЁТ!!!

[@FreelancerLifeStyle]

Спасибо!

[@vadimsib3378]

Женя сделай пожалуйста (перед тем как переходить на js или php) выпуск как правильно делать многостраничники, чтоб каждый раз не грузить полностью новую страницу с дублированием кода, как вообще это правильно делать (иерархия самих файлов, переходы, как файлы со стилями для других страниц подключить и где они должны лежать, подгрузка контента и тд). И еще по pop up (особенно всплывашки после отправки формы посредством ajax, без перезагрузки страницы), пожалуйста

[@FreelancerLifeStyle]

Хорошо

[@yuriiliso9731]

react router в помощь)

[@dennik4932]

Смотреть не начал сразу лайк ))) А кто дизы ставит чтоб у тебя палец сломался )))

[@FreelancerLifeStyle]

Спасибо!

[@nicosotnik5225]

Согласен, чтоб сломался ... по самые уши !!!!! ;-)

[@ttorb2268]

Красава!

[@anscar8045]

Народ не забываем лайк, поддержка комментарием и просмотр видео, иначе ни чего не поймете) P.s. жаль что не получится совместить осенние курсы и свою работу но к такому учителю надо попасть!

[@inksmart]

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

[@kirillriman3611]

Женя, планируешь ли видео про разработку под какую-либо CMS?

[@FreelancerLifeStyle]

Да, будут видосы по интеграции верстки на CMS WordPress и другие

[@user-vm9du7kd3q]

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

[@veaceslavbalanetchi8347]

Топ!!!)))

[@FreelancerLifeStyle]

Спасибо!

[@ea5970]

круто, продолжай в том же духе. Отличная понятная подача

[@FreelancerLifeStyle]

Спасибо!

[@daniyaribrayev7370]

Подписка и лайк сразу же)

[@bondbond9517]

Чудовий приклад! Переробив на CSS.

[@teymurabasli6915]

спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@letsplay6285]

Здравствуй ,добрый человек! Открой тайну,почему не бьёт ошибку js ,ведь в цикле for надо ставить (let i; ....и т.д), подскажи пожалуйста)

[@muhammetturnikmen3010]

Музыка в конце качает

[@ram655]

Классный видос! А будет ли видео по bootstrap? Хотелось бы посмотреть обучающий ролик именно от вас :)

[@FreelancerLifeStyle]

Думаю будет!

[@mrchubaka9413]

Спасибо большое за все, что ты делаешь))) С твоей помощью, за два месяца, я почти полностью освоил новую профессию))) И конечно же за плюшки на патроне))

[@FreelancerLifeStyle]

Супер! Я очень рад!

[@alexandersharshavin8217]

Как всегда - топ! Благодарю за урок!

[@FreelancerLifeStyle]

Спасибо!

[@user-nb8ex1tq6r]

Дизы ставят ленивые люди, потому что их нервируют те, кто вопреки всему чего-то добился в жизни :) P.S. музыкальное сопровождение канала мне очень нравится, четкая музыка!)

[@FreelancerLifeStyle]

Спасибо большое!

[@harinbarin]

остался открытым вопрос: как сделать ховер пункта меню второго уровня при наведении на его потомков (пункты третьего уровня)) уже кучу времени потратил, но по какой-то причине не получается.

[@brodyagaPATY]

Спасибо за новый выпуск👍🔥

[@FreelancerLifeStyle]

Спасибо!

[@egor243]

Здравствуйте, подскажите пожалуйста, а что сделать, чтобы клик распространялся не только на стрелочку, но и на ссылку тоже?

[@user-ut8kv1nk3s]

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

[@timurk149]

Что делать если "второй уровень " только первому уровню на этой же позиций? Например нужно сделать второй уровень для 5 ссылки первого уровня но "второй уровень " присваивается на место где находилось предыдущее

[@ploxer9915]

поскорее бы уроки по js было бы круто если бы Вы сделали такой же плейлист как и с html

[@FreelancerLifeStyle]

Будет

[@alexmalyshev7247]

А как сделать так,чтобы при открытии второго sub-menu либо клике на свободное пространство первое sub-menu (в т.ч. sub-sub-menu) пропадало?

[@nadejda_num5803]

дякую за цю працю !!!

[@AntonOpolko]

мне понравилось такой вопрос: если я сделал выпадение меню по клику, то как сделать чтобы оно закрывалось при клике за его пределами?

[@sina3975]

Спасибо большое за урок! Вы просто отлично объясняете :)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ri1ry7sx6p]

Жека, а для форм это можно использовать? В частности для select ?

[@FreelancerLifeStyle]

Для select все немного сложнее, как-то покажу

[@user-pm3nl3fc4f]

Спасибо за урок. А где ссылка на js? В описании нет.

[@MilkyWaayCF]

Лайк поставил) А что за плагин такой, копируешь сточку html в css и вставляются одни классы?

[@gvitoss]

eCSStractor

[@MilkyWaayCF]

@@gvitoss спасибо)

[@FreelancerLifeStyle]

Тут настройка редактора kzbin.info/www/bejne/rojLhZmVpJ1pgsk

[@denvudd4492]

Урок хороший, спасибо. Но есть одна деталь которую не понял: зачем включать стрелку именно на тачскринах, когда с точки зрения интерфейса она должна быть и на декстопах тоже? Без нее же не будет видно где есть выпадающее меню, а где нету, только если все меню - это не один выпадающий список как в магазинах, к примеру.

[@mikech76]

Подскажите по блокировке скрола . Есть один неприятный момент. Добавил .lock html, body { // оба , иначе не работает на андроиде моем &.lock { overflow: hidden; так вот, в хроме , просто узком окне ( а не мобиле) , справа есть широкий скрол. А при открытии меню, этот скрол исчезает, и боди меняет ширину и все немного скачет, раньше чем анимация развернет меню. Можно как-то скрол не убирать, а дисаблить?

[@violentiner]

А почему не дать паддинг FirsChild`y ? Да и вообще обратиться к любому li через этот псевдокласс?

[@Beksultan_Omor]

ребят еще недавно добавили тег , с помошью него можно сделать

[@esp2644]

а как доделать что бы когда меню упирается в правую область экрана 2 3 уровень переносился на левую сторону а не правую не вмещаясь в контейнер?

[@vladislavbondarenko5190]

Просто респкт)

[@user-vn3oh5xb9f]

Евгений, привет! Может кто-то уже спрашивал (пролистав быстро комментарии, не нашёл), а как сделать, чтобы список первого уровня плавно выезжал сверху вниз и также плавно скрывался в обратном направлении???

[@raccoon1399]

у меня вышло добавить плавное появление, но не сверху вниз правда. через opacity и visibility. убрав при этом display: none/ block. вы нашли решение?

[@velessn]

Спасибо. Хорошая реализация. Лайк однозначно!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ve7tx3ud6n]

Спасибо Евгений за видео.

[@FreelancerLifeStyle]

Пожалуйста!

[@PalyufishkuRuSite]

На мой взгляд, меню еще можно доработать. Стрелочки должны быть и у пунктов меню на десктопной версии, чтобы было понятно, что там есть подменю. А еще выпадающее подменю третьего уровня смещается только вправо, соответственно, иногда может не помещаться в ширину страницы и вылезать за ее пределы. Тут можно было бы сделать проверку, что если подменю не помещается, то смещать его не в левую, а в правую сторону.

[@FreelancerLifeStyle]

Отлично! Дорабатывай!

[@PalyufishkuRuSite]

@@FreelancerLifeStyle Обязательно ))

[@KomanDante999]

Спасибо за разъяснения по JS. Евгений, ты единственный из всех просмотренных мной видео по дроп-меню, кто грамотно применил скрипт. Отсюда такой вопрос: Допустим у нас меню должно выпадать не по ховеру, а по активу (ну или с тачем та же проблема будет). И возникает такой ньюанс: если пользователь открыл первое меню и не закрыл его, потом кликнул на второе -оно тоже открылось, перекрывая первое и так далее...в общем получается не очень красивая картинка. Как сделать, что бы при клике на следующее меню предыдущее автоматически закрывалось? Я так мыслю, что как-то нужно снимать навешанные классы активности всем элементам, кроме текущего (того, по которому кликнули). Как эту логику реализовать в JS? Можно конечно при событии click принудительно сначала снять у всех элементов навешанные классы, а только потом навешивать текущие. Но может быть есть более изящное решение?

[@KomanDante999]

Попробовал при событии click принудительно снять у всех элементов навешанные классы активности - не работает. Вернее работает, но этот же алгоритм снимает навешенные позже классы активности и с текущего выбранного элемента тоже. поэтому ничего не происходит - класс навешивается и мгновенно снимается. Посему вопрос остается: как реализовать логику "все кроме выбранного".

[@tphl]

Можно дополнить тем что чтобы сделать красивый разрыв между пунктами выпадающего меню нужно на .menu li добавить margin в 1px

[@FreelancerLifeStyle]

спасибо

[@user-ls4gp3ww4z]

Жека жжёт!

[@user-tt8bf6yt6i]

Подскажите пожалуйста, сделала меню боковое всплывающее, а у меня в шапке стоит изображение. Меню не работает на изображении. Оно просто открытым держится. Как исправить?