Выпадающее меню на CSS + адаптив под тачскрины
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- Выпадающее меню и выпадающие элементы очень часто используются в верстке. В этом выпуске покажу технику обычного выпадающего меню на CSS а также реализацию под тачскрины мобильных экранов и планшетов на JS
👉 Адаптивное меню "бургер": • Правильное адаптивное ...
👉 Геометрические фигуры на CSS: • Геометрические фигуры ...
👉 Поставил лайк? Держи архив с результатом: fls.guru/howto...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
![เปิดใจ "อาจารย์เบียร์ คนตื่นธรรม" อดีตเคยสุดทุกทาง ถ้าใช้หนี้หมดไปบวชแน่ l [Nickynachat]](http://i.ytimg.com/vi/IxeE0xVhy08/mqdefault.jpg)
Женечка, дай Бог тебе здоровья и твоей семье! Обожаю тебя и твои уроки, благодарю 👏👏👏
Очень полезное видео. Да ещё - скорость с которой ты кодишь - это вообще очень круто! Надеюсь со временем хотя бы на 50% от твоей выйти. Спасибо за твой труд в нашем ученическом просвещении!
Спасибо!
Отличный урок, спасибо. По традиции за твой труд моя минимальная благодарность, лайк и комментарий.
Мужик!!!! Лучшее видео в интернете!!!! Закрыл очень много вопросов :)))) я давно искал что-то подобное, без лишних библиотек и пустых скриптов. Спасибо огромное!!!
Я рад! Пожалуйста!
Спасибо Жень! Твои уроки - меняют мою жизнь к лучшему!
Отличный урок! Выполнял его больше четырех часов. Жека, ну у тебя и скорость!
Спасибо!
аналогично, на урок в 35-40 минут, уходит 4-5 часов), но мы только учимся)
Учитель от Бога! Подписалась не задумываясь. Спасибо за урок!!!! :-)
Только вчера думал:"Эх, жалко, что у тебя нет видео про выпадающее меню. Ты так понятно объясняешь, а этого очень не хватает". И вот сегодня ты заливаешь видео про адаптивное меню
Я в шоке
Спасибо
Я читаю мысли)))
на то он и сенсей))
А я сегодня до ума доводил меню-бургер с подменю и матерился что нет путних мануалов по таким случаям. Щас погляжу и глядишь переверстаю всё заново.
Огромное спасибо Вам за видео урок, вы максимально понятно и приятно объясняете. Доходить даже до таких деревьев как я. Теперь я Ваша фанатка, вы супер, еще раз огромное спасибо)
Хех, пожалуйста!
Поскорее бы уроки по JS, спасибо тебе за внятное объяснения!!!
Пожалуйста!
Я совсем недавно начал знакомиться с HTML и CSS, смотря видеокурсы в интернете. На ваш канал наткнулся впервые. Тему с выпадающим меню понял плохо, посмотрев ваше видео (закончив просмотр на адаптации, ибо я еще только сегодня начал знакомиться), я как раз-таки понял как это работает, спасибо!
Пожалуйста!
Спасибо за труд, отличное видео! Особенно понравился лайфхак с padding для выпадающего блока из-за того, что при hover родителю сбивалось открытие.
Жека ты гений, про тебя надо рассказывать всем, слишком мало просмотров для такого годного контента
Добрый день! Благодарю, Женя, за полезное видео! Четко, быстро, понятно! Успешной реализации планов, мира, благополучия! 👍🤝🙂
да ты просто МАГ по верстке, обожаю тебя. и кстати ты забыл сказать "Обучайся, развивайся и помни: живи, а работай в свободное время! "
Кажется, что все достаточно просто, но есть нюансы ) Спасибо за урок.
круто! спасибо! Это то что нужно, мало того что понятно, все очень логично и в дальнейшем не возникнет проблем с добавлением новых элементов меню или под меню(с этим много проблем)!
еще раз спасибо!
Пожалуйста!
Очень полезное и информативное видео. До просмотра, думал выпадающие списки делаются онли через details. Спасибо за такой контент! ❤
Большое спасибо Вам за видео. В Болгарии тоже смотрим Ваши уроки. Быть здоровым ... :)
дякую за урок, корисний матеріал і все доступно та зрозуміло пояснено )
привет, ещё раз большое спасибо за контент, использовал этот материал на своём макете)
Лучший!!! Огромное спасибо!
Все будет круто и классно!!! Учимся! Полет нормальный! Жека - the best!
Дуже дякую за урок. Реально допоміг вирішити проблему
Будь ласка!
Видео просто супер!
Помогли разобраться и дописать свой скрипт.
Большое спасибо :)))
Пожалуйста!
Видео - топчик) А главное - очень полезно) Спасибо!
Спасибо!
А как сделать чтобы, при открытии меню первого уровня, ранее открытое меню (тоже первого уровня) закрывалось?
Народ не забываем лайк, поддержка комментарием и просмотр видео, иначе ни чего не поймете) P.s. жаль что не получится совместить осенние курсы и свою работу но к такому учителю надо попасть!
Очень круто делаете, продолжайте в том же духе!
Стопервое ОГРОМНОЕ СПАСИБО!!
Пожалуйста!
Спасибо, отличное видео все по делу и ничего лишнего. Большущий лайк .
Офигенный монтаж и материал!
Дизы ставят ленивые люди, потому что их нервируют те, кто вопреки всему чего-то добился в жизни :)
P.S. музыкальное сопровождение канала мне очень нравится, четкая музыка!)
Спасибо большое!
Женя сделай пожалуйста (перед тем как переходить на js или php) выпуск как правильно делать многостраничники, чтоб каждый раз не грузить полностью новую страницу с дублированием кода, как вообще это правильно делать (иерархия самих файлов, переходы, как файлы со стилями для других страниц подключить и где они должны лежать, подгрузка контента и тд). И еще по pop up (особенно всплывашки после отправки формы посредством ajax, без перезагрузки страницы), пожалуйста
Хорошо
react router в помощь)
Спасибо за урок. А где ссылка на js? В описании нет.
Блин ты меня напугал, когда попросил подписаться! Пришлось подписаться. )))
Лайк или ошибка в коде! :)
Получить доступ к плюшкам + поддержать канал: 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/
Отличный урок! Классно все изложено.
Класс, учусь после работы, мозг конечно уже не свеж, и притормаживаю, но качество высочайшее, хочется учиться).
мне понравилось
такой вопрос:
если я сделал выпадение меню по клику, то как сделать чтобы оно закрывалось при клике за его пределами?
Если под меню будет текст, то он будет уезжать вниз, когда выпадает меню. Это тоже нужно предусмотреть.
огромное спасибо за такие обучающие видосики
Пожалуйста!
Подскажите пожалуйста, сделала меню боковое всплывающее, а у меня в шапке стоит изображение. Меню не работает на изображении. Оно просто открытым держится. Как исправить?
Здравствуйте, подскажите пожалуйста, а что сделать, чтобы клик распространялся не только на стрелочку, но и на ссылку тоже?
Ура!!! Вот прям таки то что ждал!!! Спасибо!!!
Пожалуйста!
Добротное видео. Все предельно ясно, до момента с JS. Незнание этого языка немного заводит в тупик, но не умаляет при этом полезности самого видео. Лайк и спасибо автору!!
Рад что полезно!
Здравствуй ,добрый человек! Открой тайну,почему не бьёт ошибку js ,ведь в цикле for надо ставить (let i; ....и т.д), подскажи пожалуйста)
Привет! У меня почему-то стрелочку не видно(( Если сделать div или перед span поставить br, тогда она внизу появляется..уже очень долго мучаюсь. не знаешь, почему так? P.S. Когда сделала абсолютное позиционирование, стрелка появилась. В общем, ответишь или нет - не особо важно, в любом случае огромное спасибо! Еще в перспективе можно сделать, чтобы когда одно подменю открывается, другое открытое закрывалось, а то бывает, что они налазят друг на друга..ну и проверку, выйдет ли открывшееся подменю за границы экрана, чтобы открыть в другую сторону. Попробую сама сделать...
ну всё!!! завтра первое меню сверстаю!!!! спасибо за видео! ну на очень простом языке! все ясно!
Смотреть не начал сразу лайк ))) А кто дизы ставит чтоб у тебя палец сломался )))
Спасибо!
Согласен, чтоб сломался ... по самые уши !!!!! ;-)
Привет!) Спасибо за меню, сейчас как раз мучаюсь с подобным, там немного сложнее ТЗ, но инфа полезна 100%) смотрю тебя и подписан почти с момента появления канала.Очень надоедает постоянное F5 в браузере, сейчас пишу в саблайне. Напомни, плз, в каком видео у тебя инструкция по локал серверу для автообновлнеия страницы. раньше пользовался Денвером, хочется чем то попроще в настройке) Лайк поставил, жду JS)И, кстати, почему то не работает Color HighLighter. Поставил, есть в меню, но не работает( Кстати, по звукам у тебя механическая клавиатура, это удобно для работы или просто?)
Спасибо огромное! Успехов вам!
Подскажите пожалуйста, мне выдает ошибку (Uncaught ReferenceError: i is not defined), все перепробовал! не могу понять!
спасибо за то что ты есть
Пожалуйста!
а как доделать что бы когда меню упирается в правую область экрана 2 3 уровень переносился на левую сторону а не правую не вмещаясь в контейнер?
Чудовий приклад! Переробив на CSS.
Подскажите по блокировке скрола . Есть один неприятный момент.
Добавил .lock
html, body {
// оба , иначе не работает на андроиде моем
&.lock {
overflow: hidden;
так вот, в хроме , просто узком окне ( а не мобиле) , справа есть широкий скрол. А при открытии меню, этот скрол исчезает, и боди меняет ширину и все немного скачет, раньше чем анимация развернет меню.
Можно как-то скрол не убирать, а дисаблить?
Спасибо за урок!
Пожалуйста!
Вышло новое видео...сразу зашла, поставила лайк, а понимать и разбираться буду потом)))
Спасибо большое! 👍
Супер!. Но есть вопросы. Например меню в всю ширину контейнера (1024) и на последнем элементе есть подменю, а экран пользователя 1200. И уменьшать контейнер не слишком будет круто и через абсолюта подменю будет вылезать за пределы экрана. Как тогда быть?
Размещать не слева left а справа right
@@FreelancerLifeStyle Тогда аналогичная проблема будет слева. Или через джс вищитывать выйдет ли или нет?
Однозначно, ЗАЧЁТ!!!
Спасибо!
Проблему перепрыгивания подменю, когда пользователь неумышленно задевает курсором соседний пункт, в момент движения курсора по диагонали в низ подменю, как то решаешь?
Спасибо за информационный выпуск. Только вот спустя почти год нет ссылки в описании на переменную).
Она скорее всего на патреоне. Я переписал самостоятельно с видео. Уважаю труд, Евгения, поэтому не буду выкладывать )) Извините
Евгений, привет!
Может кто-то уже спрашивал (пролистав быстро комментарии, не нашёл), а как сделать, чтобы список первого уровня плавно выезжал сверху вниз и также плавно скрывался в обратном направлении???
у меня вышло добавить плавное появление, но не сверху вниз правда. через opacity и visibility. убрав при этом display: none/ block. вы нашли решение?
Спасибо большое за все, что ты делаешь)))
С твоей помощью, за два месяца, я почти полностью освоил новую профессию)))
И конечно же за плюшки на патроне))
Супер! Я очень рад!
На мой взгляд, меню еще можно доработать. Стрелочки должны быть и у пунктов меню на десктопной версии, чтобы было понятно, что там есть подменю. А еще выпадающее подменю третьего уровня смещается только вправо, соответственно, иногда может не помещаться в ширину страницы и вылезать за ее пределы. Тут можно было бы сделать проверку, что если подменю не помещается, то смещать его не в левую, а в правую сторону.
Отлично! Дорабатывай!
@@FreelancerLifeStyle Обязательно ))
дякую за цю працю !!!
Урок хороший, спасибо. Но есть одна деталь которую не понял: зачем включать стрелку именно на тачскринах, когда с точки зрения интерфейса она должна быть и на декстопах тоже? Без нее же не будет видно где есть выпадающее меню, а где нету, только если все меню - это не один выпадающий список как в магазинах, к примеру.
очень годный видос, благодарю!
Огромнейшее спасибо! Вы мне очень помогли!
Спасибо за разъяснения по JS. Евгений, ты единственный из всех просмотренных мной видео по дроп-меню, кто грамотно применил скрипт.
Отсюда такой вопрос:
Допустим у нас меню должно выпадать не по ховеру, а по активу (ну или с тачем та же проблема будет).
И возникает такой ньюанс: если пользователь открыл первое меню и не закрыл его, потом кликнул на второе -оно тоже открылось, перекрывая первое и так далее...в общем получается не очень красивая картинка.
Как сделать, что бы при клике на следующее меню предыдущее автоматически закрывалось?
Я так мыслю, что как-то нужно снимать навешанные классы активности всем элементам, кроме текущего (того, по которому кликнули).
Как эту логику реализовать в JS?
Можно конечно при событии click принудительно сначала снять у всех элементов навешанные классы, а только потом навешивать текущие. Но может быть есть более изящное решение?
Попробовал при событии click принудительно снять у всех элементов навешанные классы активности - не работает. Вернее работает, но этот же алгоритм снимает навешенные позже классы активности и с текущего выбранного элемента тоже. поэтому ничего не происходит - класс навешивается и мгновенно снимается.
Посему вопрос остается: как реализовать логику "все кроме выбранного".
Спасибо за ролик! Побольше бы таких авторов на Ютубе) ещё и без рекламных интеграций
Пожалуйста!
А если сделать такое меню без джавасрипта, через медиазапрос @media (pointer: coarse), (pointer: fine) and (hover: none) { стили для всех типов сенсорных экранов}?
А почему не дать паддинг FirsChild`y ? Да и вообще обратиться к любому li через этот псевдокласс?
Очень доходчиво!
Очень полезное видео. и реально хорошо сделано но у меня есть идея, почему нельзя применить mobile-first с стрелкой и все что вышел 992px(вроде это точка разделение тачскринов и не тачскринов) сделать .arrow{display:none} верстка вроде не сломается от этого, но зато избавимся от кучи строк и не нужен будет js код. Возможно у этого метода есть подводные камни о которых я просто не знаю но если это не так то мне кажется этот вариант намного лучше, можете ответить так ли это?
Привет Жека! Отличный урок. В интернет такого не нашел. Удачи тебе.
Как разрулить 2 вопросика:
1) Hover: Если дать какой-то цвет для hover-a, при переходе с одного уровня на другой - цвет ховера пропадает (на предыдущем)
2) Menu: на мобильных (где стрелки) - при нажатии на одной потом на второй - открывается ОБА меню второго уровня. Как избежать этого?
За ранее благодарен. Если есть ответ в каком-то видео - напишите , пожалуйста ссылку и желательно время по timeline
Спасибо большое. Видео крутейшее, как и подача, в прочем как всегда)) Однозначно лайк!
Спасибо!
Большое спс! Есть вопрос: как быть если у выпадающего меню есть конкретный размер? Ведь тогда будет заметно, что фон верхней границы меню налазит на перыый уровень.
Что делать если "второй уровень " только первому уровню на этой же позиций?
Например нужно сделать второй уровень для 5 ссылки первого уровня но "второй уровень " присваивается на место где находилось предыдущее
остался открытым вопрос: как сделать ховер пункта меню второго уровня при наведении на его потомков (пункты третьего уровня))
уже кучу времени потратил, но по какой-то причине не получается.
Лайк поставил)
А что за плагин такой, копируешь сточку html в css и вставляются одни классы?
eCSStractor
@@gvitoss спасибо)
Тут настройка редактора th-cam.com/video/xWhTf_o86Lg/w-d-xo.html
Что делать, если из за того, что под одним элементом список все остальные сдвигаются вправо на ширину списка?
Отличное видео. Как раз необходимо было такое меню. Скажи что за хоткей в sublime ты нажимаешь что бы скопировать все классы выделенного HTML кода для дальнейшей вставки в css, надеюсь это хоткей а не то что ты обрезаешь видео. Спасибо за видос (лайк) и ответ на вопрос! 👍👍👍
Вот настройка редактора th-cam.com/video/xWhTf_o86Lg/w-d-xo.html
Фрилансер по жизни - IT и фриланс 👍👍👍 спасибо огромное, вот что бывает когда пропускаешь видос, мучаешься с ctrl+c (v) 🤦♂️
поскорее бы уроки по js
было бы круто если бы Вы сделали такой же плейлист как и с html
Будет
Наконец-то поняла, нужен перед селектором по классу пробел или нет, спасибо!
Жека, а для форм это можно использовать? В частности для select ?
Для select все немного сложнее, как-то покажу
А зачем wrapper-u padding??)
Крутое видео! Мне очень помогло.... спасибо!!!
Только у меня возникла такая бедулина, что, если нажимаю на пункт подменю, переходит по ссылке, но меню не сворачивается и стрелка не разворачивается обратно.... пришлось еще что то подписать🤣🤣🤣
Отлично, хорошо что всегда можно что-то подписать)
@@FreelancerLifeStyle 🤪🤪🤪плохо только, что я не очень уверена, что я правильно дописала....мало просто дописать, хочется же знать как правильно сделать
мама родная. да сколько же там у тебя мониторов! ЦУП НАСА, какой-то ))
Приветствую учитель! косяки с меню((( когда в мобильной версии когда в выпадающем меню со второго переходишь на третий и дпльше на второй второй все пропадает))) надеюсь понятно объяснил 3 день бьюсь)))😉😉😉
победил?
А как добавить анимацию, мне, кажется, с ней бы лучше смотрелось ?
Женя, планируешь ли видео про разработку под какую-либо CMS?
Да, будут видосы по интеграции верстки на CMS WordPress и другие
спасибо Женя!
Круто и легко на видео. Недавно начал изучать верстку сайтов. Самоучка и учусь делать для начала детали отдельно. Сейчас в плане научиться делать шапку сайта с выпадающими меню. Но посмотрев такие видео мозг посылает мысль, что у меня это не выйдет и нужно это бросить, но всячески пытаюсь пересилить себя. Если можешь, то подскажи пожалуйста, как сделать обучение легче?
Верстальщики не самоучки! Самоучка это когда без единого вспомогательного материала ты что-то научился.
Кстати как прогресс с версткой?
ребят еще недавно добавили тег , с помошью него можно сделать
Юджин, спасибо за очередной полезный урок!
Ты знаешь, всё на должном уровне, кроме одного несущественного недостатка: английского произношения. Этим грешат очень многие аитишники и не очень переживают по этому поводу.
Тем не менее, уже немного зная тебя и твое стремление делать всё по-взрослому, я рискну, будучи преподавателем английского языка, немного подкорректировать твое произношение. Например, вот здесь 4:23 правильно говорить "РЭлетив", а не "риЛЭИтив". Также в предыдущих уроках (этот ещё не досмотрел) у тебя мелькает "классическое" "враппер". "Рэппер" будет звучать намного ближе к английскому оригиналу.
В общем, при желании, прими это к сведению. Как по мне, то будешь звучать как "конфетка", то есть идеально. :)
PS Вот ссылки на произношение упомянутых мною слов:
dictionary.cambridge.org/dictionary/english/relative
dictionary.cambridge.org/dictionary/english/wrapper
Понял, спасибо!
Не обязательно придавать километры классов стилей, чтобы можно было стилизировать. Достаточно писать стили в виде вложений.
Также при абсолютном позиционировании субменю можно ставить top: auto - тогда оно расположиться прямо под меню.
Насчет тачскрина - спасибо. Только ссылки в описании на скрипт не увидел.
Можно, но это будет непонятно для новичка, плюс по БЭМ так делать правильно.
Неуверен что top: auto это кроссбраузерное решение.
@@FreelancerLifeStyle относительно top: auto не замечал проблем. Относительно БЭМ - система интересная, но именно длинные названия классов отталкивают. И еще один момент, почему предпочитаю обходиться минимумом классов в меню навигации - будут определенные сложности при программировании под CMS, ведь разные CMS придают свою систему классификации для меню
Но видео очень полезные, особенно для новичков. Для и для продвинутых тоже полезно. Я например для себя открыл препроцессоры. Не было времени изучить, а тут все понятно. Спасибо за полезный контент.
Спасибище!!!!!
Второй день пляшу с бубном!
И тут вспоминаю, что Фрилансер по жизни уже все разжевал, показал, и адаптировал для тачскрина!!!
Работаю над внедрением в проект)))
P.S. Женя, твоих рук не видно))) Это не самое главное, конечно))) Но на мой, сугубо личный и предвзятый взгляд, смотрится не очень)))
Понял, буду что-то думать)
Спасибо большое за урок. Вопрос как в адаптиве сделать чтобы выпадали пункты меню и нажимая на пункт меню, а не только на треугольник ? Заранее благодарна
Нужно переложить события на пункты
Спасибо