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