Мужик!!!! Лучшее видео в интернете!!!! Закрыл очень много вопросов :)))) я давно искал что-то подобное, без лишних библиотек и пустых скриптов. Спасибо огромное!!!
Очень полезное видео. Да ещё - скорость с которой ты кодишь - это вообще очень круто! Надеюсь со временем хотя бы на 50% от твоей выйти. Спасибо за твой труд в нашем ученическом просвещении!
Огромное спасибо Вам за видео урок, вы максимально понятно и приятно объясняете. Доходить даже до таких деревьев как я. Теперь я Ваша фанатка, вы супер, еще раз огромное спасибо)
Я совсем недавно начал знакомиться с HTML и CSS, смотря видеокурсы в интернете. На ваш канал наткнулся впервые. Тему с выпадающим меню понял плохо, посмотрев ваше видео (закончив просмотр на адаптации, ибо я еще только сегодня начал знакомиться), я как раз-таки понял как это работает, спасибо!
круто! спасибо! Это то что нужно, мало того что понятно, все очень логично и в дальнейшем не возникнет проблем с добавлением новых элементов меню или под меню(с этим много проблем)! еще раз спасибо!
Народ не забываем лайк, поддержка комментарием и просмотр видео, иначе ни чего не поймете) P.s. жаль что не получится совместить осенние курсы и свою работу но к такому учителю надо попасть!
Женя сделай пожалуйста (перед тем как переходить на js или php) выпуск как правильно делать многостраничники, чтоб каждый раз не грузить полностью новую страницу с дублированием кода, как вообще это правильно делать (иерархия самих файлов, переходы, как файлы со стилями для других страниц подключить и где они должны лежать, подгрузка контента и тд). И еще по pop up (особенно всплывашки после отправки формы посредством ajax, без перезагрузки страницы), пожалуйста
Только вчера думал:"Эх, жалко, что у тебя нет видео про выпадающее меню. Ты так понятно объясняешь, а этого очень не хватает". И вот сегодня ты заливаешь видео про адаптивное меню Я в шоке Спасибо
Добротное видео. Все предельно ясно, до момента с JS. Незнание этого языка немного заводит в тупик, но не умаляет при этом полезности самого видео. Лайк и спасибо автору!!
Спасибо большое за все, что ты делаешь))) С твоей помощью, за два месяца, я почти полностью освоил новую профессию))) И конечно же за плюшки на патроне))
На мой взгляд, меню еще можно доработать. Стрелочки должны быть и у пунктов меню на десктопной версии, чтобы было понятно, что там есть подменю. А еще выпадающее подменю третьего уровня смещается только вправо, соответственно, иногда может не помещаться в ширину страницы и вылезать за ее пределы. Тут можно было бы сделать проверку, что если подменю не помещается, то смещать его не в левую, а в правую сторону.
Дизы ставят ленивые люди, потому что их нервируют те, кто вопреки всему чего-то добился в жизни :) P.S. музыкальное сопровождение канала мне очень нравится, четкая музыка!)
Урок хороший, спасибо. Но есть одна деталь которую не понял: зачем включать стрелку именно на тачскринах, когда с точки зрения интерфейса она должна быть и на декстопах тоже? Без нее же не будет видно где есть выпадающее меню, а где нету, только если все меню - это не один выпадающий список как в магазинах, к примеру.
Привет!) Спасибо за меню, сейчас как раз мучаюсь с подобным, там немного сложнее ТЗ, но инфа полезна 100%) смотрю тебя и подписан почти с момента появления канала.Очень надоедает постоянное F5 в браузере, сейчас пишу в саблайне. Напомни, плз, в каком видео у тебя инструкция по локал серверу для автообновлнеия страницы. раньше пользовался Денвером, хочется чем то попроще в настройке) Лайк поставил, жду JS)И, кстати, почему то не работает Color HighLighter. Поставил, есть в меню, но не работает( Кстати, по звукам у тебя механическая клавиатура, это удобно для работы или просто?)
Крутое видео! Мне очень помогло.... спасибо!!! Только у меня возникла такая бедулина, что, если нажимаю на пункт подменю, переходит по ссылке, но меню не сворачивается и стрелка не разворачивается обратно.... пришлось еще что то подписать🤣🤣🤣
@@FreelancerLifeStyle 🤪🤪🤪плохо только, что я не очень уверена, что я правильно дописала....мало просто дописать, хочется же знать как правильно сделать
Привет Жека! Отличный урок. В интернет такого не нашел. Удачи тебе. Как разрулить 2 вопросика: 1) Hover: Если дать какой-то цвет для hover-a, при переходе с одного уровня на другой - цвет ховера пропадает (на предыдущем) 2) Menu: на мобильных (где стрелки) - при нажатии на одной потом на второй - открывается ОБА меню второго уровня. Как избежать этого? За ранее благодарен. Если есть ответ в каком-то видео - напишите , пожалуйста ссылку и желательно время по timeline
еще на мобилках можно навесить клик на документ чтобы если это не клик по меню то оно закрывалось document.addEventListener('click', (e) => { if(e.target.closest('.arrow')) return; arrow.forEach(arr => { arr.classList.remove('active'); arr.nextElementSibling.classList.remove('open'); }); })
Евгений, привет! Может кто-то уже спрашивал (пролистав быстро комментарии, не нашёл), а как сделать, чтобы список первого уровня плавно выезжал сверху вниз и также плавно скрывался в обратном направлении???
Подскажите по блокировке скрола . Есть один неприятный момент. Добавил .lock html, body { // оба , иначе не работает на андроиде моем &.lock { overflow: hidden; так вот, в хроме , просто узком окне ( а не мобиле) , справа есть широкий скрол. А при открытии меню, этот скрол исчезает, и боди меняет ширину и все немного скачет, раньше чем анимация развернет меню. Можно как-то скрол не убирать, а дисаблить?
Проблему перепрыгивания подменю, когда пользователь неумышленно задевает курсором соседний пункт, в момент движения курсора по диагонали в низ подменю, как то решаешь?
Подскажите пожалуйста, сделала меню боковое всплывающее, а у меня в шапке стоит изображение. Меню не работает на изображении. Оно просто открытым держится. Как исправить?
Очень полезное видео. и реально хорошо сделано но у меня есть идея, почему нельзя применить mobile-first с стрелкой и все что вышел 992px(вроде это точка разделение тачскринов и не тачскринов) сделать .arrow{display:none} верстка вроде не сломается от этого, но зато избавимся от кучи строк и не нужен будет js код. Возможно у этого метода есть подводные камни о которых я просто не знаю но если это не так то мне кажется этот вариант намного лучше, можете ответить так ли это?
Супер!. Но есть вопросы. Например меню в всю ширину контейнера (1024) и на последнем элементе есть подменю, а экран пользователя 1200. И уменьшать контейнер не слишком будет круто и через абсолюта подменю будет вылезать за пределы экрана. Как тогда быть?
Не обязательно придавать километры классов стилей, чтобы можно было стилизировать. Достаточно писать стили в виде вложений. Также при абсолютном позиционировании субменю можно ставить top: auto - тогда оно расположиться прямо под меню. Насчет тачскрина - спасибо. Только ссылки в описании на скрипт не увидел.
@@FreelancerLifeStyle относительно top: auto не замечал проблем. Относительно БЭМ - система интересная, но именно длинные названия классов отталкивают. И еще один момент, почему предпочитаю обходиться минимумом классов в меню навигации - будут определенные сложности при программировании под CMS, ведь разные CMS придают свою систему классификации для меню Но видео очень полезные, особенно для новичков. Для и для продвинутых тоже полезно. Я например для себя открыл препроцессоры. Не было времени изучить, а тут все понятно. Спасибо за полезный контент.
Большое спс! Есть вопрос: как быть если у выпадающего меню есть конкретный размер? Ведь тогда будет заметно, что фон верхней границы меню налазит на перыый уровень.
остался открытым вопрос: как сделать ховер пункта меню второго уровня при наведении на его потомков (пункты третьего уровня)) уже кучу времени потратил, но по какой-то причине не получается.
Что делать если "второй уровень " только первому уровню на этой же позиций? Например нужно сделать второй уровень для 5 ссылки первого уровня но "второй уровень " присваивается на место где находилось предыдущее
Женечка, дай Бог тебе здоровья и твоей семье! Обожаю тебя и твои уроки, благодарю 👏👏👏
Отличный урок, спасибо. По традиции за твой труд моя минимальная благодарность, лайк и комментарий.
Спасибо Жень! Твои уроки - меняют мою жизнь к лучшему!
Мужик!!!! Лучшее видео в интернете!!!! Закрыл очень много вопросов :)))) я давно искал что-то подобное, без лишних библиотек и пустых скриптов. Спасибо огромное!!!
Я рад! Пожалуйста!
Очень полезное видео. Да ещё - скорость с которой ты кодишь - это вообще очень круто! Надеюсь со временем хотя бы на 50% от твоей выйти. Спасибо за твой труд в нашем ученическом просвещении!
Спасибо!
Учитель от Бога! Подписалась не задумываясь. Спасибо за урок!!!! :-)
Добрый день! Благодарю, Женя, за полезное видео! Четко, быстро, понятно! Успешной реализации планов, мира, благополучия! 👍🤝🙂
Огромное спасибо Вам за видео урок, вы максимально понятно и приятно объясняете. Доходить даже до таких деревьев как я. Теперь я Ваша фанатка, вы супер, еще раз огромное спасибо)
Хех, пожалуйста!
Я совсем недавно начал знакомиться с HTML и CSS, смотря видеокурсы в интернете. На ваш канал наткнулся впервые. Тему с выпадающим меню понял плохо, посмотрев ваше видео (закончив просмотр на адаптации, ибо я еще только сегодня начал знакомиться), я как раз-таки понял как это работает, спасибо!
Пожалуйста!
Кажется, что все достаточно просто, но есть нюансы ) Спасибо за урок.
Лучший!!! Огромное спасибо!
Спасибо за труд, отличное видео! Особенно понравился лайфхак с padding для выпадающего блока из-за того, что при hover родителю сбивалось открытие.
круто! спасибо! Это то что нужно, мало того что понятно, все очень логично и в дальнейшем не возникнет проблем с добавлением новых элементов меню или под меню(с этим много проблем)!
еще раз спасибо!
Пожалуйста!
Большое спасибо Вам за видео. В Болгарии тоже смотрим Ваши уроки. Быть здоровым ... :)
Народ не забываем лайк, поддержка комментарием и просмотр видео, иначе ни чего не поймете) P.s. жаль что не получится совместить осенние курсы и свою работу но к такому учителю надо попасть!
Дуже дякую за урок. Реально допоміг вирішити проблему
Будь ласка!
Поскорее бы уроки по JS, спасибо тебе за внятное объяснения!!!
Пожалуйста!
Все будет круто и классно!!! Учимся! Полет нормальный! Жека - the best!
Очень полезное и информативное видео. До просмотра, думал выпадающие списки делаются онли через details. Спасибо за такой контент! ❤
дякую за урок, корисний матеріал і все доступно та зрозуміло пояснено )
Стопервое ОГРОМНОЕ СПАСИБО!!
Пожалуйста!
Отличный урок! Выполнял его больше четырех часов. Жека, ну у тебя и скорость!
Спасибо!
аналогично, на урок в 35-40 минут, уходит 4-5 часов), но мы только учимся)
Видео просто супер!
Помогли разобраться и дописать свой скрипт.
Большое спасибо :)))
Пожалуйста!
Спасибо, отличное видео все по делу и ничего лишнего. Большущий лайк .
Женя сделай пожалуйста (перед тем как переходить на js или php) выпуск как правильно делать многостраничники, чтоб каждый раз не грузить полностью новую страницу с дублированием кода, как вообще это правильно делать (иерархия самих файлов, переходы, как файлы со стилями для других страниц подключить и где они должны лежать, подгрузка контента и тд). И еще по pop up (особенно всплывашки после отправки формы посредством ajax, без перезагрузки страницы), пожалуйста
Хорошо
react router в помощь)
Видео - топчик) А главное - очень полезно) Спасибо!
Спасибо!
привет, ещё раз большое спасибо за контент, использовал этот материал на своём макете)
Офигенный монтаж и материал!
Только вчера думал:"Эх, жалко, что у тебя нет видео про выпадающее меню. Ты так понятно объясняешь, а этого очень не хватает". И вот сегодня ты заливаешь видео про адаптивное меню
Я в шоке
Спасибо
Я читаю мысли)))
на то он и сенсей))
А я сегодня до ума доводил меню-бургер с подменю и матерился что нет путних мануалов по таким случаям. Щас погляжу и глядишь переверстаю всё заново.
да ты просто МАГ по верстке, обожаю тебя. и кстати ты забыл сказать "Обучайся, развивайся и помни: живи, а работай в свободное время! "
Однозначно, ЗАЧЁТ!!!
Спасибо!
Жека ты гений, про тебя надо рассказывать всем, слишком мало просмотров для такого годного контента
ну всё!!! завтра первое меню сверстаю!!!! спасибо за видео! ну на очень простом языке! все ясно!
Класс, учусь после работы, мозг конечно уже не свеж, и притормаживаю, но качество высочайшее, хочется учиться).
Очень круто делаете, продолжайте в том же духе!
спасибо за то что ты есть
Пожалуйста!
дякую за цю працю !!!
Добротное видео. Все предельно ясно, до момента с JS. Незнание этого языка немного заводит в тупик, но не умаляет при этом полезности самого видео. Лайк и спасибо автору!!
Рад что полезно!
Спасибо за урок. А где ссылка на js? В описании нет.
А как сделать чтобы, при открытии меню первого уровня, ранее открытое меню (тоже первого уровня) закрывалось?
Чудовий приклад! Переробив на CSS.
Ура!!! Вот прям таки то что ждал!!! Спасибо!!!
Пожалуйста!
Вышло новое видео...сразу зашла, поставила лайк, а понимать и разбираться буду потом)))
Спасибо большое! 👍
Отличный урок! Классно все изложено.
Если под меню будет текст, то он будет уезжать вниз, когда выпадает меню. Это тоже нужно предусмотреть.
огромное спасибо за такие обучающие видосики
Пожалуйста!
Спасибо за урок!
Пожалуйста!
Спасибо огромное! Успехов вам!
Огромнейшее спасибо! Вы мне очень помогли!
Спасибо за информационный выпуск. Только вот спустя почти год нет ссылки в описании на переменную).
Она скорее всего на патреоне. Я переписал самостоятельно с видео. Уважаю труд, Евгения, поэтому не буду выкладывать )) Извините
Спасибо большое за все, что ты делаешь)))
С твоей помощью, за два месяца, я почти полностью освоил новую профессию)))
И конечно же за плюшки на патроне))
Супер! Я очень рад!
Спасибо большое. Видео крутейшее, как и подача, в прочем как всегда)) Однозначно лайк!
Спасибо!
Наконец-то поняла, нужен перед селектором по классу пробел или нет, спасибо!
На мой взгляд, меню еще можно доработать. Стрелочки должны быть и у пунктов меню на десктопной версии, чтобы было понятно, что там есть подменю. А еще выпадающее подменю третьего уровня смещается только вправо, соответственно, иногда может не помещаться в ширину страницы и вылезать за ее пределы. Тут можно было бы сделать проверку, что если подменю не помещается, то смещать его не в левую, а в правую сторону.
Отлично! Дорабатывай!
@@FreelancerLifeStyle Обязательно ))
Дизы ставят ленивые люди, потому что их нервируют те, кто вопреки всему чего-то добился в жизни :)
P.S. музыкальное сопровождение канала мне очень нравится, четкая музыка!)
Спасибо большое!
очень годный видос, благодарю!
Очень доходчиво!
Блин ты меня напугал, когда попросил подписаться! Пришлось подписаться. )))
Спасибо за ролик! Побольше бы таких авторов на Ютубе) ещё и без рекламных интеграций
Пожалуйста!
ребят еще недавно добавили тег , с помошью него можно сделать
круто, продолжай в том же духе. Отличная понятная подача
Спасибо!
мне понравилось
такой вопрос:
если я сделал выпадение меню по клику, то как сделать чтобы оно закрывалось при клике за его пределами?
Урок хороший, спасибо. Но есть одна деталь которую не понял: зачем включать стрелку именно на тачскринах, когда с точки зрения интерфейса она должна быть и на декстопах тоже? Без нее же не будет видно где есть выпадающее меню, а где нету, только если все меню - это не один выпадающий список как в магазинах, к примеру.
Привет!) Спасибо за меню, сейчас как раз мучаюсь с подобным, там немного сложнее ТЗ, но инфа полезна 100%) смотрю тебя и подписан почти с момента появления канала.Очень надоедает постоянное F5 в браузере, сейчас пишу в саблайне. Напомни, плз, в каком видео у тебя инструкция по локал серверу для автообновлнеия страницы. раньше пользовался Денвером, хочется чем то попроще в настройке) Лайк поставил, жду JS)И, кстати, почему то не работает Color HighLighter. Поставил, есть в меню, но не работает( Кстати, по звукам у тебя механическая клавиатура, это удобно для работы или просто?)
Спасибо за новый выпуск👍🔥
Спасибо!
Спасибо Евгений за видео.
Пожалуйста!
Смотреть не начал сразу лайк ))) А кто дизы ставит чтоб у тебя палец сломался )))
Спасибо!
Согласен, чтоб сломался ... по самые уши !!!!! ;-)
Крутое видео! Мне очень помогло.... спасибо!!!
Только у меня возникла такая бедулина, что, если нажимаю на пункт подменю, переходит по ссылке, но меню не сворачивается и стрелка не разворачивается обратно.... пришлось еще что то подписать🤣🤣🤣
Отлично, хорошо что всегда можно что-то подписать)
@@FreelancerLifeStyle 🤪🤪🤪плохо только, что я не очень уверена, что я правильно дописала....мало просто дописать, хочется же знать как правильно сделать
Женя, планируешь ли видео про разработку под какую-либо CMS?
Да, будут видосы по интеграции верстки на CMS WordPress и другие
Здравствуйте, подскажите пожалуйста, а что сделать, чтобы клик распространялся не только на стрелочку, но и на ссылку тоже?
Топ!!!)))
Спасибо!
спасибо Женя!
Привет Жека! Отличный урок. В интернет такого не нашел. Удачи тебе.
Как разрулить 2 вопросика:
1) Hover: Если дать какой-то цвет для hover-a, при переходе с одного уровня на другой - цвет ховера пропадает (на предыдущем)
2) Menu: на мобильных (где стрелки) - при нажатии на одной потом на второй - открывается ОБА меню второго уровня. Как избежать этого?
За ранее благодарен. Если есть ответ в каком-то видео - напишите , пожалуйста ссылку и желательно время по timeline
Спасибо. Хорошая реализация. Лайк однозначно!
Пожалуйста!
еще на мобилках можно навесить клик на документ чтобы если это не клик по меню то оно закрывалось
document.addEventListener('click', (e) => {
if(e.target.closest('.arrow')) return;
arrow.forEach(arr => {
arr.classList.remove('active');
arr.nextElementSibling.classList.remove('open');
});
})
Спасибо Жень!!!! Бомбяо))
Супер! Я рад!
Евгений, привет!
Может кто-то уже спрашивал (пролистав быстро комментарии, не нашёл), а как сделать, чтобы список первого уровня плавно выезжал сверху вниз и также плавно скрывался в обратном направлении???
у меня вышло добавить плавное появление, но не сверху вниз правда. через opacity и visibility. убрав при этом display: none/ block. вы нашли решение?
Спасибо!!!! за видео
поскорее бы уроки по js
было бы круто если бы Вы сделали такой же плейлист как и с html
Будет
Можно дополнить тем что чтобы сделать красивый разрыв между пунктами выпадающего меню нужно на .menu li добавить margin в 1px
спасибо
Подскажите по блокировке скрола . Есть один неприятный момент.
Добавил .lock
html, body {
// оба , иначе не работает на андроиде моем
&.lock {
overflow: hidden;
так вот, в хроме , просто узком окне ( а не мобиле) , справа есть широкий скрол. А при открытии меню, этот скрол исчезает, и боди меняет ширину и все немного скачет, раньше чем анимация развернет меню.
Можно как-то скрол не убирать, а дисаблить?
Проблему перепрыгивания подменю, когда пользователь неумышленно задевает курсором соседний пункт, в момент движения курсора по диагонали в низ подменю, как то решаешь?
Спасибо большое за урок! Вы просто отлично объясняете :)
Пожалуйста!
Подскажите пожалуйста, сделала меню боковое всплывающее, а у меня в шапке стоит изображение. Меню не работает на изображении. Оно просто открытым держится. Как исправить?
Как всегда - топ! Благодарю за урок!
Спасибо!
нужно допилить урок, сделав такое меню для walker worspress
Очень полезное видео. и реально хорошо сделано но у меня есть идея, почему нельзя применить mobile-first с стрелкой и все что вышел 992px(вроде это точка разделение тачскринов и не тачскринов) сделать .arrow{display:none} верстка вроде не сломается от этого, но зато избавимся от кучи строк и не нужен будет js код. Возможно у этого метода есть подводные камни о которых я просто не знаю но если это не так то мне кажется этот вариант намного лучше, можете ответить так ли это?
Музыка в конце качает
Супер!. Но есть вопросы. Например меню в всю ширину контейнера (1024) и на последнем элементе есть подменю, а экран пользователя 1200. И уменьшать контейнер не слишком будет круто и через абсолюта подменю будет вылезать за пределы экрана. Как тогда быть?
Размещать не слева left а справа right
@@FreelancerLifeStyle Тогда аналогичная проблема будет слева. Или через джс вищитывать выйдет ли или нет?
Здравствуй ,добрый человек! Открой тайну,почему не бьёт ошибку js ,ведь в цикле for надо ставить (let i; ....и т.д), подскажи пожалуйста)
Привет из Киева! Понравились ваши видео. Буду пробовать.
Привет! Отлично!
Красава!
А почему не дать паддинг FirsChild`y ? Да и вообще обратиться к любому li через этот псевдокласс?
ну очень понятно обьясняешь. благодарю.
Пожалуйста!
Не обязательно придавать километры классов стилей, чтобы можно было стилизировать. Достаточно писать стили в виде вложений.
Также при абсолютном позиционировании субменю можно ставить top: auto - тогда оно расположиться прямо под меню.
Насчет тачскрина - спасибо. Только ссылки в описании на скрипт не увидел.
Можно, но это будет непонятно для новичка, плюс по БЭМ так делать правильно.
Неуверен что top: auto это кроссбраузерное решение.
@@FreelancerLifeStyle относительно top: auto не замечал проблем. Относительно БЭМ - система интересная, но именно длинные названия классов отталкивают. И еще один момент, почему предпочитаю обходиться минимумом классов в меню навигации - будут определенные сложности при программировании под CMS, ведь разные CMS придают свою систему классификации для меню
Но видео очень полезные, особенно для новичков. Для и для продвинутых тоже полезно. Я например для себя открыл препроцессоры. Не было времени изучить, а тут все понятно. Спасибо за полезный контент.
а как доделать что бы когда меню упирается в правую область экрана 2 3 уровень переносился на левую сторону а не правую не вмещаясь в контейнер?
Большое спс! Есть вопрос: как быть если у выпадающего меню есть конкретный размер? Ведь тогда будет заметно, что фон верхней границы меню налазит на перыый уровень.
остался открытым вопрос: как сделать ховер пункта меню второго уровня при наведении на его потомков (пункты третьего уровня))
уже кучу времени потратил, но по какой-то причине не получается.
Что делать если "второй уровень " только первому уровню на этой же позиций?
Например нужно сделать второй уровень для 5 ссылки первого уровня но "второй уровень " присваивается на место где находилось предыдущее
Жека жжёт!