Хороший урок, но есть неточность в горизонтальном меню Выдвижение второго подменю не сделано. Оно должно появляться не снизу как первое субменю, а сбоку.
Материал нужно уметь подавать. С десятого раза дошло как подменю скрывается и раскрывается. Сначала ты говоришь что дисплей:ноун плохое решение и временное, и я не обращал внимание на это. А в конце оказалось что дисплей:ноун - ключевой момент, он скрывает подменю. С самого начала ты сбил с толку. За видео спасибо, лайка не будет.
Чтобы комментарий выше не сбивал с толку тех, кто его прочтёт, продублирую ещё раз: дисплей: ноун - плохое решение. Как правильно, рассказывается отдельно, с десятой минуты. Что касается подачи, без проблем. Надеюсь, вы быстро найдёте канал, где для вас будет изложение понятнее. Благо, их на ютюбе хватает ;-)
Некорректное заявление что display: none мешает поисковикам так как из дом удаляется элемент. Он может и удаляется но в хтмл элемент все так же присутствует. а поисковики могут искать не в доме а в исходниках есть разные роботы. Возможно лучше опасити управлять. Предложенный же вариант с клипом мне кажется сложным.
@@JediCSS Здравствуйте, у меню следующий вопрос а как сделать так когда у тебя вертикальное меню и submenu раскрывался вниз сдвигая li менюшек вниз чтобы submenu не залезал на другие пункты меню, у вас саб меню раскрывается справа(left 100%) а мне надо бы вниз
@@sezarik1663 Тогда проще: не нужно никакого позиционирования вообще. Элементы будут в потоке. При появлении сабменю, все li, которые ниже, будут сдвигаться по-умолчанию. Сразу не увидел, что нужно сдвигать пункты, извините. Если непонятно объяснил, пишите) Сделаю демку
Не полноценное решение хоть и одно из самых грамотных из обучалок. Для мобилы допиливать не мало, а учитывая современный трафик это первостепенная задача. Но тем не менее лайк.
можете уточнить, что имеете ввиду под "допиливать не мало"? тк использую ровно такое же меню на всех проектах и ничего не допиливаю. Касательно разметки. Если речь о том, что нужно добавить CSS, то да и ниже в комментариях отвечал, почему в этом ролике таких стилей нет.
@@JediCSS 1- В вашем варианте при тычке в пункт сабменю на мобиле произойдет переход по ссылке, значит надо принять меры к тому, чтобы либо сначала открылось меню и только потом начала работать ссылка, либо вводить элемент отвечающий за открытие. 2- Нельзя в реальном проекте назначать на ul что-то в css, т.к. это затронет другие списки, значит этому ul нужен или класс, или обернуть его в класс, значит структура измениться и ваш css надо дописать.
@@point111 1. Не перейдёт ;-) В мобильных браузерах это учтено и по первому тапу откроется подменю, а по двойному - перейдёт по ссылке. Дополнительных действий не требуется 2. Про ul совершенно правильно, нужно навешивать класс. В целом, навешивать стили напрямую на теги - плохая практика. Спасибо за замечание, в будущем буду использовать код, максимально приближённый к реальным проектам, чтобы не вводить в заблуждение тех, кто только начинает изучать вёрстку и не знает базовых правил.
@@JediCSS я пробовал ваш код на мобиле - переход есть. 2-е, это может быть и не мобила а просто окно десктопа по какой-то причине в пол экрана (я кстати часто так браузер держу, чтобы читать статьи узкой колонкой)
@@point111 Действительно, переход есть, если кликать по ссылке. Иногда полезно перепроверять свои знания. Но в коде всё равно ничего менять не нужно, будет работать и с такой вёрсткой :-) Что ж, придётся делать второе видео про меню и адаптив)) Что касается второго пункта: так на десктопе и с малым окном браузера останется ховер, тут не принципиально.
Видео хорошее, но всегда было интересно, почему авторы многих обучающих уроков не показывают, что делать дальше на адаптиве. Ведь это самая важная и трудная часть для новичка и таким образом полезность таких видео стремится к нулю, начинающие просто не понимают, что делать дальше, а проектов без адаптива наверное на сегодняшний день уже и нет.. Речь даже не об этом конкретном видео, а в целом, об огромном количестве видео "Как сделать..."
Вопрос хороший. Могу ответить только за себя. На примере данного видео: моя цель - объяснить некую "глобальную" часть вёрстки. Вне зависимости от того, какой будет дизайн, принцип и поведение меню неизменно. Если у человека есть чёткое понимание, как что устроено, ему уже проще сориентироваться в нестандартной ситуации и найти подходящее решение конкретно для неё. Что касается адаптива - тут тоже нужно усвоить базовый принцип, единожды. Вне зависимости от того, это раскладка всей страницы, форма регистрации или выпадающее меню. То есть, правильнее будет посмотреть одно хорошее видео про принципы адаптива, нежели искать в видосах про меню, шапку и тд. Надеюсь, смог объяснить свою точку зрения :-) Если нет, пишите, дополню комментарий.
Чел отзовись!! Я учил в прошлом CSS, и думал что знаю его. Но сейчас, когда мне понадобилось сделать выпадающий список, мои полномочия все( Теперь я понял, что я никчемный верстальщик( Плак-плак( Подскажи толковую литературу на русском языке, не хочу умереть бездарем! ПАМАГИТИ!! ТОНУ!!
Разметка меню с выпадающим списком 0:00
Стилизация меню с выпадающим списком 1:19
Область клика пункта меню 2:56
Состояния пункта меню 3:20
Стилизация подменю 4:57
Отображение выпадающего меню 7:08
Правильное отображение выпадающего меню 10:09
Вертикальное меню с выпадающим списком 12:52
Увидел заставку, чуть со стула не упал. От смеха. Ещё видео не смотрел , но уже лайк от меня. 😂. Щас про смеюсь буду досматривать.
Господи, это идеально! Серьезно! Афигенно! Добавил в плейлист к себе)) ОЧ круто
Очень правильные акценты в вашем ролике.
То, что нужно новичкам. Желаю успехов каналу.
Спасибо!
Это лучшее объяснение выпадающего меню
Спасибо, очень помогли, не могла сделать сохранение ховер эффекта никак, и только вы показали как это делается )
Спасибо огромное! Чётко без воды. Супер!!!
Какое отличное видео. Спасибо, дружище!
Действительно классное видео. Все четко, по делу, без лишней воды.
Все доходчиво. Одно из лучших обьяснений по созданию меню. Ждем обещанного ролика про свойство "position"
что-то новенькое подвезли. заметен коммерческий опыт у автора.)) годнота! спасибо!
Обьясняете круто! Спасибо))) А за позишн...--- если ещё нету видео, пожалуйста, сделайте)))
Очень круто! То, что нужно новичку. Побольше бы таких полезных, качественных и понятных видео и про HTML и про CSS.
Большое спасибо! Доступно и понятно рассказано!
Очень годный контент, спасибо.
Я не знаю где таких рожают, но это явно прекрасное место. По части объяснения талант просто запредельный!
Контент огонь. Музыка огонь. Не бросай. Я даже готов донатить за такое. А я скупой xD. Успехов!!!!!!
Ого) очень подробно) спасибо.
рад, что понравилось )) спасибо за просмотр!
Круто!!!! Прям оч круто!!!
Только начинаю свой путь в вёрстке, 4 часа просидел над горизонтальным меню, перерыл кучу статей, а тут за 15 минут и на пальцах. Очень круто!!
Дружище, продолжай делать ролики по CSS!
Спасибо, продолжу ) Может, есть темы, на которые хотелось бы увидеть видео в первую очередь?
@@JediCSS GRID
Классное видео! Можно ещё про позиционирование рассказать) 👍
Красавчик
хороший материал
Спасибо!Полезное ролик!
Плавность появления меню без проблем можно добавить к clip?
Хороший урок, но есть неточность в горизонтальном меню Выдвижение второго подменю не сделано. Оно должно появляться не снизу как первое субменю, а сбоку.
Материал нужно уметь подавать. С десятого раза дошло как подменю скрывается и раскрывается. Сначала ты говоришь что дисплей:ноун плохое решение и временное, и я не обращал внимание на это. А в конце оказалось что дисплей:ноун - ключевой момент, он скрывает подменю. С самого начала ты сбил с толку. За видео спасибо, лайка не будет.
Чтобы комментарий выше не сбивал с толку тех, кто его прочтёт, продублирую ещё раз: дисплей: ноун - плохое решение. Как правильно, рассказывается отдельно, с десятой минуты.
Что касается подачи, без проблем. Надеюсь, вы быстро найдёте канал, где для вас будет изложение понятнее. Благо, их на ютюбе хватает ;-)
Вопрос. Зачем был введен класс menu? Он вообще нигде не используется.... Спасибо
про позишон расскажи подробнее. спасибо
ок, запишу ;-)
Ссылки на medium не предлагать - этот сервис не работает.
Недоделанное горизонтальное меню. Подменю 2 уровеня выпадает не с боку, а снизу. Плохо. Придётся искать другой урок.
Некорректное заявление что display: none мешает поисковикам так как из дом удаляется элемент. Он может и удаляется но в хтмл элемент все так же присутствует. а поисковики могут искать не в доме а в исходниках есть разные роботы. Возможно лучше опасити управлять. Предложенный же вариант с клипом мне кажется сложным.
А как сделать плавное выпадение мен. transition не работает
Брат, почему у меня меню сразу выпадает и даже не закрывается>?
а пример скачать?
Где курсы
было бы очень круто если бы вы выкладывали получившийся код.
если бы еще и код бы оставил цены не было бы
Обучаюсь на курсах и нам задали сделать многоуровн... выпадающее меню с помощью FLOAT то есть только его использовать. Мозг кипит ...
Будет почти так же, как в видео. Только вместо Флексов используешь Флоат для первого уровня списков.
@@JediCSS Здравствуйте, у меню следующий вопрос а как сделать так когда у тебя вертикальное меню и submenu раскрывался вниз сдвигая li менюшек вниз чтобы submenu не залезал на другие пункты меню, у вас саб меню раскрывается справа(left 100%) а мне надо бы вниз
@@sezarik1663 top 100%
@@Naykris а при этом сабменю будет налезать на меню , как сдвинуть меню ниже при раскрытии сабменю
@@sezarik1663 Тогда проще: не нужно никакого позиционирования вообще. Элементы будут в потоке. При появлении сабменю, все li, которые ниже, будут сдвигаться по-умолчанию.
Сразу не увидел, что нужно сдвигать пункты, извините.
Если непонятно объяснил, пишите) Сделаю демку
Не полноценное решение хоть и одно из самых грамотных из обучалок. Для мобилы допиливать не мало, а учитывая современный трафик это первостепенная задача. Но тем не менее лайк.
можете уточнить, что имеете ввиду под "допиливать не мало"?
тк использую ровно такое же меню на всех проектах и ничего не допиливаю. Касательно разметки.
Если речь о том, что нужно добавить CSS, то да и ниже в комментариях отвечал, почему в этом ролике таких стилей нет.
@@JediCSS 1- В вашем варианте при тычке в пункт сабменю на мобиле произойдет переход по ссылке, значит надо принять меры к тому, чтобы либо сначала открылось меню и только потом начала работать ссылка, либо вводить элемент отвечающий за открытие. 2- Нельзя в реальном проекте назначать на ul что-то в css, т.к. это затронет другие списки, значит этому ul нужен или класс, или обернуть его в класс, значит структура измениться и ваш css надо дописать.
@@point111 1. Не перейдёт ;-) В мобильных браузерах это учтено и по первому тапу откроется подменю, а по двойному - перейдёт по ссылке. Дополнительных действий не требуется
2. Про ul совершенно правильно, нужно навешивать класс. В целом, навешивать стили напрямую на теги - плохая практика.
Спасибо за замечание, в будущем буду использовать код, максимально приближённый к реальным проектам, чтобы не вводить в заблуждение тех, кто только начинает изучать вёрстку и не знает базовых правил.
@@JediCSS я пробовал ваш код на мобиле - переход есть. 2-е, это может быть и не мобила а просто окно десктопа по какой-то причине в пол экрана (я кстати часто так браузер держу, чтобы читать статьи узкой колонкой)
@@point111 Действительно, переход есть, если кликать по ссылке. Иногда полезно перепроверять свои знания. Но в коде всё равно ничего менять не нужно, будет работать и с такой вёрсткой :-) Что ж, придётся делать второе видео про меню и адаптив))
Что касается второго пункта: так на десктопе и с малым окном браузера останется ховер, тут не принципиально.
Видео хорошее, но всегда было интересно, почему авторы многих обучающих уроков не показывают, что делать дальше на адаптиве. Ведь это самая важная и трудная часть для новичка и таким образом полезность таких видео стремится к нулю, начинающие просто не понимают, что делать дальше, а проектов без адаптива наверное на сегодняшний день уже и нет.. Речь даже не об этом конкретном видео, а в целом, об огромном количестве видео "Как сделать..."
Вопрос хороший. Могу ответить только за себя. На примере данного видео: моя цель - объяснить некую "глобальную" часть вёрстки. Вне зависимости от того, какой будет дизайн, принцип и поведение меню неизменно.
Если у человека есть чёткое понимание, как что устроено, ему уже проще сориентироваться в нестандартной ситуации и найти подходящее решение конкретно для неё.
Что касается адаптива - тут тоже нужно усвоить базовый принцип, единожды. Вне зависимости от того, это раскладка всей страницы, форма регистрации или выпадающее меню.
То есть, правильнее будет посмотреть одно хорошее видео про принципы адаптива, нежели искать в видосах про меню, шапку и тд.
Надеюсь, смог объяснить свою точку зрения :-) Если нет, пишите, дополню комментарий.
Адаптив здесь не понадобится, это не работает на тачскринах.
а теперь его адаптировать
+++
Чел отзовись!! Я учил в прошлом CSS, и думал что знаю его. Но сейчас, когда мне понадобилось сделать выпадающий список, мои полномочия все( Теперь я понял, что я никчемный верстальщик( Плак-плак( Подскажи толковую литературу на русском языке, не хочу умереть бездарем! ПАМАГИТИ!! ТОНУ!!
Не очень то понятно 5 раз пересмотрел а не понять