Выпадающее меню на CSS + адаптив под тачскрины
HTML-код
- Опубликовано: 29 янв 2020
- Выпадающее меню и выпадающие элементы очень часто используются в верстке. В этом выпуске покажу технику обычного выпадающего меню на 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
🤟 Живи, а работай в свободное время! ©
Женечка, дай Бог тебе здоровья и твоей семье! Обожаю тебя и твои уроки, благодарю 👏👏👏
Спасибо Жень! Твои уроки - меняют мою жизнь к лучшему!
Отличный урок, спасибо. По традиции за твой труд моя минимальная благодарность, лайк и комментарий.
Очень полезное видео. Да ещё - скорость с которой ты кодишь - это вообще очень круто! Надеюсь со временем хотя бы на 50% от твоей выйти. Спасибо за твой труд в нашем ученическом просвещении!
Спасибо!
Лайк или ошибка в коде! :)
Получить доступ к плюшкам + поддержать канал: 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/
Добрый день! Благодарю, Женя, за полезное видео! Четко, быстро, понятно! Успешной реализации планов, мира, благополучия! 👍🤝🙂
Учитель от Бога! Подписалась не задумываясь. Спасибо за урок!!!! :-)
Мужик!!!! Лучшее видео в интернете!!!! Закрыл очень много вопросов :)))) я давно искал что-то подобное, без лишних библиотек и пустых скриптов. Спасибо огромное!!!
Я рад! Пожалуйста!
Большое спасибо Вам за видео. В Болгарии тоже смотрим Ваши уроки. Быть здоровым ... :)
Только вчера думал:"Эх, жалко, что у тебя нет видео про выпадающее меню. Ты так понятно объясняешь, а этого очень не хватает". И вот сегодня ты заливаешь видео про адаптивное меню
Я в шоке
Спасибо
Я читаю мысли)))
на то он и сенсей))
А я сегодня до ума доводил меню-бургер с подменю и матерился что нет путних мануалов по таким случаям. Щас погляжу и глядишь переверстаю всё заново.
Спасибо за труд, отличное видео! Особенно понравился лайфхак с padding для выпадающего блока из-за того, что при hover родителю сбивалось открытие.
Отличный урок! Выполнял его больше четырех часов. Жека, ну у тебя и скорость!
Спасибо!
аналогично, на урок в 35-40 минут, уходит 4-5 часов), но мы только учимся)
Очень круто делаете, продолжайте в том же духе!
Огромное спасибо Вам за видео урок, вы максимально понятно и приятно объясняете. Доходить даже до таких деревьев как я. Теперь я Ваша фанатка, вы супер, еще раз огромное спасибо)
Хех, пожалуйста!
Спасибо, отличное видео все по делу и ничего лишнего. Большущий лайк .
Очень полезное и информативное видео. До просмотра, думал выпадающие списки делаются онли через details. Спасибо за такой контент! ❤
привет, ещё раз большое спасибо за контент, использовал этот материал на своём макете)
Поскорее бы уроки по JS, спасибо тебе за внятное объяснения!!!
Пожалуйста!
Отличный урок! Классно все изложено.
Видео - топчик) А главное - очень полезно) Спасибо!
Спасибо!
Кажется, что все достаточно просто, но есть нюансы ) Спасибо за урок.
Жека ты гений, про тебя надо рассказывать всем, слишком мало просмотров для такого годного контента
Офигенный монтаж и материал!
круто! спасибо! Это то что нужно, мало того что понятно, все очень логично и в дальнейшем не возникнет проблем с добавлением новых элементов меню или под меню(с этим много проблем)!
еще раз спасибо!
Пожалуйста!
очень годный видос, благодарю!
Все будет круто и классно!!! Учимся! Полет нормальный! Жека - the best!
Видео просто супер!
Помогли разобраться и дописать свой скрипт.
Большое спасибо :)))
Пожалуйста!
Лучший!!! Огромное спасибо!
да ты просто МАГ по верстке, обожаю тебя. и кстати ты забыл сказать "Обучайся, развивайся и помни: живи, а работай в свободное время! "
огромное спасибо за такие обучающие видосики
Пожалуйста!
Огромнейшее спасибо! Вы мне очень помогли!
Спасибо огромное! Успехов вам!
Я совсем недавно начал знакомиться с HTML и CSS, смотря видеокурсы в интернете. На ваш канал наткнулся впервые. Тему с выпадающим меню понял плохо, посмотрев ваше видео (закончив просмотр на адаптации, ибо я еще только сегодня начал знакомиться), я как раз-таки понял как это работает, спасибо!
Пожалуйста!
Стопервое ОГРОМНОЕ СПАСИБО!!
Пожалуйста!
Спасибо за урок!
Пожалуйста!
Очень доходчиво!
Блин ты меня напугал, когда попросил подписаться! Пришлось подписаться. )))
Вышло новое видео...сразу зашла, поставила лайк, а понимать и разбираться буду потом)))
Спасибо большое! 👍
Привет!) Спасибо за меню, сейчас как раз мучаюсь с подобным, там немного сложнее ТЗ, но инфа полезна 100%) смотрю тебя и подписан почти с момента появления канала.Очень надоедает постоянное F5 в браузере, сейчас пишу в саблайне. Напомни, плз, в каком видео у тебя инструкция по локал серверу для автообновлнеия страницы. раньше пользовался Денвером, хочется чем то попроще в настройке) Лайк поставил, жду JS)И, кстати, почему то не работает Color HighLighter. Поставил, есть в меню, но не работает( Кстати, по звукам у тебя механическая клавиатура, это удобно для работы или просто?)
спасибо Женя!
А как сделать чтобы, при открытии меню первого уровня, ранее открытое меню (тоже первого уровня) закрывалось?
Спасибо!!!! за видео
дякую за урок, корисний матеріал і все доступно та зрозуміло пояснено )
спасибо за то что ты есть
Пожалуйста!
Класс, учусь после работы, мозг конечно уже не свеж, и притормаживаю, но качество высочайшее, хочется учиться).
Дуже дякую за урок. Реально допоміг вирішити проблему
Будь ласка!
Наконец-то поняла, нужен перед селектором по классу пробел или нет, спасибо!
Если под меню будет текст, то он будет уезжать вниз, когда выпадает меню. Это тоже нужно предусмотреть.
Большое спс! Есть вопрос: как быть если у выпадающего меню есть конкретный размер? Ведь тогда будет заметно, что фон верхней границы меню налазит на перыый уровень.
Добротное видео. Все предельно ясно, до момента с JS. Незнание этого языка немного заводит в тупик, но не умаляет при этом полезности самого видео. Лайк и спасибо автору!!
Рад что полезно!
Спасибо за информационный выпуск. Только вот спустя почти год нет ссылки в описании на переменную).
Она скорее всего на патреоне. Я переписал самостоятельно с видео. Уважаю труд, Евгения, поэтому не буду выкладывать )) Извините
Спасибо за ролик! Побольше бы таких авторов на Ютубе) ещё и без рекламных интеграций
Пожалуйста!
Ура!!! Вот прям таки то что ждал!!! Спасибо!!!
Пожалуйста!
Спасибо большое. Видео крутейшее, как и подача, в прочем как всегда)) Однозначно лайк!
Спасибо!
Однозначно, ЗАЧЁТ!!!
Спасибо!
Женя сделай пожалуйста (перед тем как переходить на js или php) выпуск как правильно делать многостраничники, чтоб каждый раз не грузить полностью новую страницу с дублированием кода, как вообще это правильно делать (иерархия самих файлов, переходы, как файлы со стилями для других страниц подключить и где они должны лежать, подгрузка контента и тд). И еще по pop up (особенно всплывашки после отправки формы посредством ajax, без перезагрузки страницы), пожалуйста
Хорошо
react router в помощь)
Красава!
Смотреть не начал сразу лайк ))) А кто дизы ставит чтоб у тебя палец сломался )))
Спасибо!
Согласен, чтоб сломался ... по самые уши !!!!! ;-)
Проблему перепрыгивания подменю, когда пользователь неумышленно задевает курсором соседний пункт, в момент движения курсора по диагонали в низ подменю, как то решаешь?
Народ не забываем лайк, поддержка комментарием и просмотр видео, иначе ни чего не поймете) P.s. жаль что не получится совместить осенние курсы и свою работу но к такому учителю надо попасть!
Женя, планируешь ли видео про разработку под какую-либо CMS?
Да, будут видосы по интеграции верстки на CMS WordPress и другие
круто, продолжай в том же духе. Отличная понятная подача
Спасибо!
ну всё!!! завтра первое меню сверстаю!!!! спасибо за видео! ну на очень простом языке! все ясно!
Топ!!!)))
Спасибо!
Подписка и лайк сразу же)
Чудовий приклад! Переробив на CSS.
спасибо большое!
Пожалуйста!
Здравствуй ,добрый человек! Открой тайну,почему не бьёт ошибку js ,ведь в цикле for надо ставить (let i; ....и т.д), подскажи пожалуйста)
Музыка в конце качает
Спасибо большое за все, что ты делаешь)))
С твоей помощью, за два месяца, я почти полностью освоил новую профессию)))
И конечно же за плюшки на патроне))
Супер! Я очень рад!
Как всегда - топ! Благодарю за урок!
Спасибо!
Классный видос! А будет ли видео по bootstrap? Хотелось бы посмотреть обучающий ролик именно от вас :)
Думаю будет!
Дизы ставят ленивые люди, потому что их нервируют те, кто вопреки всему чего-то добился в жизни :)
P.S. музыкальное сопровождение канала мне очень нравится, четкая музыка!)
Спасибо большое!
Спасибо за новый выпуск👍🔥
Спасибо!
остался открытым вопрос: как сделать ховер пункта меню второго уровня при наведении на его потомков (пункты третьего уровня))
уже кучу времени потратил, но по какой-то причине не получается.
Здравствуйте, подскажите пожалуйста, а что сделать, чтобы клик распространялся не только на стрелочку, но и на ссылку тоже?
Что делать, если из за того, что под одним элементом список все остальные сдвигаются вправо на ширину списка?
Что делать если "второй уровень " только первому уровню на этой же позиций?
Например нужно сделать второй уровень для 5 ссылки первого уровня но "второй уровень " присваивается на место где находилось предыдущее
поскорее бы уроки по js
было бы круто если бы Вы сделали такой же плейлист как и с html
Будет
А как сделать так,чтобы при открытии второго sub-menu либо клике на свободное пространство первое sub-menu (в т.ч. sub-sub-menu) пропадало?
дякую за цю працю !!!
мне понравилось
такой вопрос:
если я сделал выпадение меню по клику, то как сделать чтобы оно закрывалось при клике за его пределами?
Спасибо большое за урок! Вы просто отлично объясняете :)
Пожалуйста!
Жека, а для форм это можно использовать? В частности для select ?
Для select все немного сложнее, как-то покажу
Спасибо за урок. А где ссылка на js? В описании нет.
Урок хороший, спасибо. Но есть одна деталь которую не понял: зачем включать стрелку именно на тачскринах, когда с точки зрения интерфейса она должна быть и на декстопах тоже? Без нее же не будет видно где есть выпадающее меню, а где нету, только если все меню - это не один выпадающий список как в магазинах, к примеру.
Лайк поставил)
А что за плагин такой, копируешь сточку html в css и вставляются одни классы?
eCSStractor
@@gvitoss спасибо)
Тут настройка редактора ruclips.net/video/xWhTf_o86Lg/видео.html
Подскажите по блокировке скрола . Есть один неприятный момент.
Добавил .lock
html, body {
// оба , иначе не работает на андроиде моем
&.lock {
overflow: hidden;
так вот, в хроме , просто узком окне ( а не мобиле) , справа есть широкий скрол. А при открытии меню, этот скрол исчезает, и боди меняет ширину и все немного скачет, раньше чем анимация развернет меню.
Можно как-то скрол не убирать, а дисаблить?
А почему не дать паддинг FirsChild`y ? Да и вообще обратиться к любому li через этот псевдокласс?
ребят еще недавно добавили тег , с помошью него можно сделать
а как доделать что бы когда меню упирается в правую область экрана 2 3 уровень переносился на левую сторону а не правую не вмещаясь в контейнер?
Просто респкт)
Спасибо. Хорошая реализация. Лайк однозначно!
Пожалуйста!
Евгений, привет!
Может кто-то уже спрашивал (пролистав быстро комментарии, не нашёл), а как сделать, чтобы список первого уровня плавно выезжал сверху вниз и также плавно скрывался в обратном направлении???
у меня вышло добавить плавное появление, но не сверху вниз правда. через opacity и visibility. убрав при этом display: none/ block. вы нашли решение?
Спасибо Евгений за видео.
Пожалуйста!
На мой взгляд, меню еще можно доработать. Стрелочки должны быть и у пунктов меню на десктопной версии, чтобы было понятно, что там есть подменю. А еще выпадающее подменю третьего уровня смещается только вправо, соответственно, иногда может не помещаться в ширину страницы и вылезать за ее пределы. Тут можно было бы сделать проверку, что если подменю не помещается, то смещать его не в левую, а в правую сторону.
Отлично! Дорабатывай!
@@FreelancerLifeStyle Обязательно ))
Спасибо за разъяснения по JS. Евгений, ты единственный из всех просмотренных мной видео по дроп-меню, кто грамотно применил скрипт.
Отсюда такой вопрос:
Допустим у нас меню должно выпадать не по ховеру, а по активу (ну или с тачем та же проблема будет).
И возникает такой ньюанс: если пользователь открыл первое меню и не закрыл его, потом кликнул на второе -оно тоже открылось, перекрывая первое и так далее...в общем получается не очень красивая картинка.
Как сделать, что бы при клике на следующее меню предыдущее автоматически закрывалось?
Я так мыслю, что как-то нужно снимать навешанные классы активности всем элементам, кроме текущего (того, по которому кликнули).
Как эту логику реализовать в JS?
Можно конечно при событии click принудительно сначала снять у всех элементов навешанные классы, а только потом навешивать текущие. Но может быть есть более изящное решение?
Попробовал при событии click принудительно снять у всех элементов навешанные классы активности - не работает. Вернее работает, но этот же алгоритм снимает навешенные позже классы активности и с текущего выбранного элемента тоже. поэтому ничего не происходит - класс навешивается и мгновенно снимается.
Посему вопрос остается: как реализовать логику "все кроме выбранного".
Можно дополнить тем что чтобы сделать красивый разрыв между пунктами выпадающего меню нужно на .menu li добавить margin в 1px
спасибо
Жека жжёт!
Очень полезное видео. и реально хорошо сделано но у меня есть идея, почему нельзя применить mobile-first с стрелкой и все что вышел 992px(вроде это точка разделение тачскринов и не тачскринов) сделать .arrow{display:none} верстка вроде не сломается от этого, но зато избавимся от кучи строк и не нужен будет js код. Возможно у этого метода есть подводные камни о которых я просто не знаю но если это не так то мне кажется этот вариант намного лучше, можете ответить так ли это?