Выпадающее меню на чистом HTML & CSS шаг за шагом || DropDown menu using HTML & CSS step by step

Подписаться 3,2 тыс.

Просмотров 55 тыс.

50% 1

В этом видео вы узнаете, как сделать выпадающее меню на чистом HTML & CSS шаг за шагом.
✅ Выпадающее меню на чистом HTML & CSS шаг за шагом || Responsive Drop Down Menu using only HTML & CSS
• Выпадающее меню на чис...
🔗 Исходный код(Source Code): / 78863863
🔗 Ссылка на сайт с сущностями: html.spec.whatwg.org/multipag...
🔗 Background: pixabay.com/
✅ Адаптивный шрифт с помощью функции calc() CSS: • Адаптивный шрифт с пом...
✅ Адаптивный шрифт с помощью функции clamp() CSS: • Адаптивный шрифт с пом...
✅ CSS Переменные: • Переменные в CSS || CS...
✅ Как ускорить написание кода с помощью Emmet в Visual Studio Code: • Как ускорить написание...
✅ Расширение Live Server и автоматическое обновление страницы: • Расширение Live Server...
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono)
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): / codingwithtopchiy
👍 Subscribe: / @codingwithtopchiy
😀Спасибо за просмотр!😀

Опубликовано:

23 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 168

@Alex-ux4dw 10 месяцев назад

Огромное спасибо, это видео как бы подводит итог всем знаниям, которые накопились в голове)))

@codingwithtopchiy 10 месяцев назад

Пожалуйста 👍

@daniyartulenbaev 8 месяцев назад

Отличный урок.Большое спасибо!!!

@codingwithtopchiy 8 месяцев назад

Пожалуйста 🙂

@DeadNnarri 5 месяцев назад

Дружище, спасибо за работу, ты лучший!

@codingwithtopchiy 5 месяцев назад

Пожалуйста)

@Gab_official_ 5 месяцев назад

Благодарю, за урок и понятное объяснение!

@codingwithtopchiy 5 месяцев назад

Спасибо за обратную связь)

@mr.petrucho8809 Год назад

спасибо большое, очень хорошее видео получилось!!! :)

@doctorspeed3102 Год назад

Отличное видео! Спасибо большое, очень помогли!

@codingwithtopchiy Год назад

Пожалуйста)

@sotnik350 6 месяцев назад

Спасибо большое, очень доступно и понятно

@codingwithtopchiy 6 месяцев назад

Пожалуйста 👍

@vicont9089 Год назад

Молодец! Есть определенная новизна. Спасибо!

@codingwithtopchiy Год назад

Спасибо) Рад что понравилось!

@Aleksey-prosto-Aleksey 6 месяцев назад

Большое спасибо я искал этот список меню очень долго, и попадалось все время не то в Гугле, а зашёл в Ютуб и сразу же нашел что нужно, ещё раз большое спасибо

@codingwithtopchiy 6 месяцев назад

Пожалуйста 🙂

@samvelzargaryan3559 4 месяца назад

Огромное спасибо дядь, всегда хотел узнать как это делается, и только ты помог)) Лайк и подписка

@codingwithtopchiy 4 месяца назад

Пожалуйста)

@user-gg4cl3id6e Год назад

супер, благодарю за видео

@codingwithtopchiy Год назад

Пожалуйста)

@NurMi-vh1tf 19 дней назад

Отличный урок. Ты лучший, спасибо.

@codingwithtopchiy 19 дней назад

Пожалуйста)

@natashawebconstanta777 11 месяцев назад

Благодарю!! Это огонь!! Отдельное спасибо за сущности ))) но я прописала другую, более нежную - blacktriangledown;, я ж дизайнер ))) Иду смотреть у вас адаптивность для этого меню. Благодарю =)

@codingwithtopchiy 11 месяцев назад

Пожалуйста) Рад что все понравилось 👍

@user-mz6rb6bv3u 6 месяцев назад

Огромное спасибо, Мужик

@codingwithtopchiy 6 месяцев назад

Пожалуйста 🙂

@user-rt6hg3sx5v 9 месяцев назад

Спасибо большое)

@codingwithtopchiy 9 месяцев назад

Пожалуйста)

@phpstudy8625 26 дней назад

Лучший !!!

@dansyz80 3 месяца назад

Love your: «эйч-рэф» ❤😂❤

@user-jb3ev6dd1p 4 месяца назад

ну ты Гигант брат. Спасибо за урок. Дай бог высокой уровен знаний. Тем кто ишет знание, а тебя всех благ! HTML CSS JavaScript.

@codingwithtopchiy 4 месяца назад

Спасибо)

@noobsslayer7520 7 месяцев назад

Чертов гений) спасибо за очень понятный ролик) лайкусь

@codingwithtopchiy 7 месяцев назад

Пожалуйста 🙂

@rasta7525 7 дней назад

Бомба ❤

@codingwithtopchiy 7 дней назад

Спасибо)

@Anna07081987 2 месяца назад

Дуже зрозуміле видео. Дякую

@codingwithtopchiy 2 месяца назад

Будь ласка)

@veryslon5104 Год назад

Спасибо

@codingwithtopchiy Год назад

Пожалуйста)

@user-rm1lm1qd8z 8 месяцев назад

Лайк . Подписка.

@codingwithtopchiy 8 месяцев назад

Спасибо 👍

@your_brother5927 3 месяца назад

Спасибо помог!

@codingwithtopchiy 3 месяца назад

Пожалуйста)

@user-hj1eh8dk9p 10 месяцев назад

Отличный урок, но строить длинную цепочку вложенных селекторов затея не ice. Я присвоил вложенным тегам ul классы и описывал стили исходя из этого. Получилось в лучшем виде. А в остальном всё хорошо.

@upwlqwp Год назад

Ну и заморочился ты. Классно получилось

@codingwithtopchiy Год назад

Спасибо) Рад что понравилось 👍

@cherepashki Год назад

mi ban stacvuma ?)P

@ivancube2992 2 месяца назад

Супер

@codingwithtopchiy 2 месяца назад

Спасибо)

@denveriogrizzly4722 11 месяцев назад

Спасибо, полезное видео. Если бы еще адаптив показал, вообще цены не было бы.

@codingwithtopchiy 11 месяцев назад

Пожалуйста! Вот адаптив: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TqoTPUFllR4.html

@kiritokaxorov15 10 месяцев назад

пацан от души сбасибо

@codingwithtopchiy 10 месяцев назад

Пожалуйста!)

@MrVarkom 6 месяцев назад

ема крутяк

@codingwithtopchiy 6 месяцев назад

Спасибо 🙂

@pollyprice2587 8 месяцев назад

Большое спасибо, очень наглядно. Особенное восхищение вызывает Ваша замечательная программа, в которой Вы пишете код и тут же видите результат.) Подскажите, пожалуйста, как она называется? )

@codingwithtopchiy 8 месяцев назад

Пожалуйста! 🙂 Visual Studio Code

@user-pr6jj6bh7v Месяц назад

Спасибо за прекрасную работу, давно хотела научиться! Нельзя ли у вас попросить архив данной работы, в процессе возникли ошибки видимо, и не все получилось, хотелось бы доработать

@codingwithtopchiy Месяц назад

Приветствую! Оставляю ссылку на исходный код: surl.li/etlmm

@Ta-cw3iq 2 месяца назад

Видео выручило, спасибо. Хотелось бы увидеть, как работает a.submenuTitle:hover+ul.submenu, ul.submenu:hover {display: block;} если использовать в конце. Этот вариант у меня не сработал.

@Attestatziakz 3 месяца назад

🎉👍👌

@user-xm1lo6xl7r Год назад

Спасибо! Отличное видео! А можешь сделать код или показать как это меню применить для всех страниц?

@codingwithtopchiy Год назад

Приветствую! Рад что понравилось видео) На днях сделаю видео о том, как сделать переход по ссылке. Например: нажимаете на HTML и переходите на страницу с блоками о HTML.

@codingwithtopchiy Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BDWbRZP6wm4.html

@phpstudy8625 26 дней назад

Еще бы сущности поворачивались при выпадании блоков была бы БОМБА !!!

@unionjack408 5 месяцев назад

Огромная благодарность за видео. Невероятно помогли. Есть вопрос, а возможно ли сделать кнопки меню в виде таблицы с тремя столбцами, где кнопка "Главная" будет занимать 3 ячейки? Еще раз благодарю

@codingwithtopchiy 5 месяцев назад

Приветствую! Пожалуйста) На счет кнопок, не совсем понимаю как это должно выглядеть, но в целом думаю, что можно так сделать.

@user-op8hl8yd3t 6 месяцев назад

Лайк и пописка 🎉

@codingwithtopchiy 6 месяцев назад

Спасибо 🙂

@crystalll5868 8 месяцев назад

Здравствуйте, как сделать класс главнее? Когда открываю меню оно ложиться под мой слайдер. Хочу чтобы меню ложилось на слайдер

@codingwithtopchiy 8 месяцев назад

Приветствую! Попробуйте применить свойство z-index.

@gulnazametova7509 23 дня назад

Благодарю за видео🤝 Подскажите, пожалуйста, как добавить поисковик с иконкой ? 🙇‍♀️

@codingwithtopchiy 23 дня назад

Приветствую! Нужно в разметку добавить тег input с типом search и иконку поиска, затем все это стилизовать. Со временем постараюсь записать видео на эту тему.

@cain776olzhas 4 месяца назад

Офигенный видос! Спасибо большое! Только просьба подскажите пожалуйста как изменить форму кнопки? Хочу не квадрат а овал

@codingwithtopchiy 4 месяца назад

Приветствую! Спасибо за обратную связь. Рад, что понравилось видео) Для кнопки можете использовать свойство border-radius - это позволить скруглить углы, как вам угодно.

@dansyz80 3 месяца назад

«Давайте!» 😂

@pip_install7496 3 месяца назад

А если на сайте уже есть списки, то мы их сломаем выделением ко всему, то есть * {}. Как обратиться именно к заголовку чтобы только там убралось подчеркивание и нумерование? Пишу header {}, не работает

@codingwithtopchiy 3 месяца назад

Приветствую! Да, все верно универсальный селектор * уберет у всех списков маркеры. Попробуйте дочерний селектор использовать, например header > список (ul) или к ссылкам (a) и затем {list-style: none; text-decoration: none;} должно сработать.

@OksanaSaienko 9 месяцев назад

Спасибо!!!! Вы преподаете? Хочу к Вам на курс.

@codingwithtopchiy 9 месяцев назад

К сожалению не преподаю, только видео-обучение и видео-курсы.

@OksanaSaienko 9 месяцев назад

@@codingwithtopchiy , удачи Вам и процветания всем видам деятельности!

@codingwithtopchiy 9 месяцев назад

Спасибо большое 😊

@RustamMirzayev-ki5ms Месяц назад

а какую программу ты используешь для написания кода?

@codingwithtopchiy Месяц назад

Приветствую! Visual Studio Code.

@silent_dude 10 месяцев назад

Все классно но у меня вопрос,как добавить текст после этого меню,ибо у меня ничего не получается.Подскажите пожалуйста?

@codingwithtopchiy 10 месяцев назад

Приветствую! Вы имеете ввиду после меню в одну строку горизонтально или какой-то контент по средине страницы? Если в одну строку, тогда внутри тега header после тега nav нужно добавить что-то, например кнопку «Заказать» и тд. А если контент на странице, тогда после тега header, нужно создать section или div с каким-то классом и внутри разместить контент, затем нужно обратится к div(допустив у div будет класс .home) и можете добавить следующий код: .home { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); и тогда весь контент разместиться по центру 👌🏻

@silent_dude 10 месяцев назад

@@codingwithtopchiy спасибо за помощь но я уже разобрался с этим.

@user-tz3zk5lu5z Месяц назад

А как ты сделал так, что бы у тебя дизайн на сайте менялся без перезапуска сервера и перезагрузки страницы?

@codingwithtopchiy Месяц назад

Приветствую! С помощью расширения Live Server вот подробное видео об этом: Расширение Live Server и автоматическое обновление страницы ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bPe-DnRBsVk.html

@user-hg6nd7cd3d 11 месяцев назад

Почему когда я пытаюсь загрузить фон, делаю как у тебя всё, а у меня не полностью картинка растянута, только часть видна

@codingwithtopchiy 11 месяцев назад

Приветствую! Скорей всего не добавили background-repeat: no-repeat; Вот как должно быть: body { width: 100%; height: 100vh; background: url(image); background-repeat: no-repeat; background-position: center; background-size: cover; }

@user-hg6nd7cd3d 11 месяцев назад

@@codingwithtopchiy Ещё такой вопросик, я вместо фона добавил видео, растянул как мне надо, теперь хочу под видео добавлять дальше тексты, контейнеры, растягивать по высоте, но когда я добавляю например фоттогалерию и хочу дальше продолжать писать текст у меня фотки не до конца открываются он у меня не прокручивает вниз даже, может стоит фиксированный размер страницы? вот скриншот - i2.paste.pics/1f41422c58f54f6b8d444cb114fbe306.png

@vitaminf4608 Год назад

Подскажите пожалуйста какие горячие клавиши использовали в этот момент 0:56

@vitaminf4608 Год назад

ctrl+alt+стрелки

@codingwithtopchiy Год назад

Приветствую! Нужно зажать alt и курсор мышки ставить в поля.

@user-hj1eh8dk9p 10 месяцев назад

По-моему, лучше протащить мышь с зажатым колёсиком. В этом случае, когда всё на одно вертикали, самое то. Нажатая Alt тоже вариант, но этот способ следует применять, когда множественный ввод разбросан по коду.

@retroeagle 4 месяца назад

Автор, объясните пожалуйста: как сделать код, с помощью которого меню (при нажатии на ту или иную кнопку) будет открывать нужную тебе страницу? Например: Создал я Меню с кнопками "Группа ВКонтакте, Ютуб Канал и Оригинальный Контент" и каждая это кнопка открывает то что мне нужно. Суть, как это сделать?

@codingwithtopchiy 4 месяца назад

Приветствую! Посмотрите это видео: Выпадающее меню с переходом на другие страницы используя HTML&CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BDWbRZP6wm4.html должно раскрыть ваш вопрос.

@retroeagle 4 месяца назад

@@codingwithtopchiy благодарю)))

@user-mf6bh4cp5g 10 месяцев назад

Немного смутил float, а на flexbox можно так сделать? А так огонь!!!

@codingwithtopchiy 10 месяцев назад

Приветствую! Да, можно на flex, это уже как удобно 👍

@dmitry.w3b 11 месяцев назад

5:21 На этом этапе у меня ссылки сместились под Logo. Вроде всё точь в точь делаю

@codingwithtopchiy 11 месяцев назад

Приветствую! Проверьте разметку, возможно logo размещается внутри тега nav из-за этого такое размещение.

@codingwithtopchiy 11 месяцев назад

Вот ссылка на исходный код: surl.li/etlmm Может это поможет разобраться детальней.

@littlespoon9270 8 месяцев назад

подскажите, у меня контейнеры не подвинулись и выглядят как будто прописан только битвин спейс

@codingwithtopchiy 8 месяцев назад

Приветствую! Не совсем понимаю, куда должны были подвинуться контейнеры? Значение space-between размещает блоки в контейнере по разные стороны, добавляет пространство между ними.

@littlespoon9270 8 месяцев назад

@@codingwithtopchiy имею ввиду лого максимально слева, а само меню сжато справа, не могу понять в чем дело

@codingwithtopchiy 8 месяцев назад

Добавьте padding: 1rem 9%; - отступ сверху и снизу 1 rem будет, а слева и справа на 9%.

@purpleyes2000 4 дня назад

Из за этой "сущности" на остальных пунктах меню где ее нет при наведении остается кусок основного фона(снизу полоса)

@codingwithtopchiy 4 дня назад

Приветствую! Сущности можно заменить на иконки или псевдоэлемент например 👍

@user-cn3hg6sr4k 8 дней назад

Здравствуйте. У меня проблема с текстом, когда пишу или делаю что-то после этого меню, то текст, картинки начинаются на странице под меню. Как будто бы меню вне страницы. Можно ли как-то исправить это?

@codingwithtopchiy 8 дней назад

Приветствую! Скорей всего что-то не так с разметкой, это меню фиксируется сверху, для него разметка идет внутри тега , если вы создание разметку дальше, например для home section, тогда нужно создавать после секцию и уже туда добавлять контент.

@user-cn3hg6sr4k 8 дней назад

@@codingwithtopchiy возможно тут есть ошибка? после

@codingwithtopchiy 8 дней назад

Вроде все корректно, но так очень сложно оценить в чем может быть глобальная проблема. Можете посмотреть начало этого видео: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HXFAsT0_oBY.htmlsi=7ZZR8jJL0VlOMst0 здесь есть фиксированый header и затем размещение home section.

@user-ll5on7ib8g 2 месяца назад

У меня картинка не выходит когда пишу (background: url(img/bg.jpg) no-repeat;) объясните пожалуйста

@codingwithtopchiy 2 месяца назад

Приветствую! Проверьте путь к картинке и название формата, возможно в этом проблематика. И еще можете посмотреть это видео: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fMGJkdc4nck.htmlsi=3YglSLZkYL5opCo5 может будет полезным.

@user-ff2ul1hh3o 8 месяцев назад

Искал серебро, а нашел золото!

@codingwithtopchiy 8 месяцев назад

👍👍👍

@poppinpillsouljah Год назад

Привет. А что делать если я открываю выпадающее меню, а оно размещается слева в упор а не прям под ссылкой?

@codingwithtopchiy Год назад

Приветствую! Попробуйте добавить позиционирование (position: absolute;) и размещение (left и top), должно помочь. В видео это идет после 9-ой минуты.

@poppinpillsouljah Год назад

@@codingwithtopchiy абсолютное позиционирование есть, left и top тоже, но все равно упирается)

@codingwithtopchiy Год назад

Оставлю ссылку на исходный код: surl.li/etlmm Может это поможет разобраться детальней.

@Floryxd 2 месяца назад

Вы не представляете.... Я все переписал................... Кому скинуть??

@VusalIsrafilovproverka Месяц назад

Мне

@user-gy9ty5fy2i 22 дня назад

Так готовый код в описании,зачем мучаться?

@rasta7525 7 дней назад

😂😂😂😂👍

@user-oz8xb2fj9u Год назад

ссылку на исходный код можно?

@codingwithtopchiy Год назад

Приветствую! Ссылка на архив с кодом: surl.li/etlmm

@PunkKoroli 6 месяцев назад

Что делать если лого и все ссылки остались в таком же строчном порядке, и не разделились

@codingwithtopchiy 6 месяцев назад

Приветствую! Можете попробовать сделать распределение с помощью flexbox. В плей-листе «Navigation menu» есть примеры.

@user-co5yn9op3f Год назад

Как скрыть эти треугольники?

@codingwithtopchiy Год назад

Приветствую! В этом примере никак не скрыть, только методом удаления сущностей в HTML.

@studs304agarkov5 Месяц назад

А где находится код этого сайта ?

@codingwithtopchiy Месяц назад

Приветствую! www.patreon.com/CodingWithTopchiy

@annakariinna 21 день назад

В якій прозі пишете html ? 0:22

@codingwithtopchiy 21 день назад

Вітаю! Visual Studio code

@annakariinna 20 дней назад

@@codingwithtopchiy дуже дякую!

@enyooa Год назад

А как сделать адаптив с этими вырождающимися меню, без js 🤯🤯🤯🤯🤯🤯🤯

@codingwithtopchiy Год назад

Приветствую! Сегодня в 18:00 выйдет видео на эту тему.

@alexandrkhutornoy 11 месяцев назад

Разве можно юл помещать в ли? Это же не верно семантически

@codingwithtopchiy 11 месяцев назад

Приветствую! Да, можно. Если интересно, вот обучающее видео по спискам: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TSy_37CKDgw.html

@m_nazikou Месяц назад

Почему у меня не получаетсЯ

@codingwithtopchiy Месяц назад

Приветствую! Видимо что-то делаете не правильно, проверяйте внимательно все еще раз.

@manilovv1983 5 месяцев назад

ОМГ ну кому сейчас нужна вёрстка только для десктопа? У меня на сайте по услугам 98% посещений со смартфона. Как это меню сделать выпадающим по нажатию на него пальцем, а не по наведению курсором мышки?

@codingwithtopchiy 5 месяцев назад

Приветствую! Считаю, что примеры должны быть разные. Вот видео с адаптивным выпадающим меню: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TqoTPUFllR4.html

@manilovv1983 5 месяцев назад

@@codingwithtopchiy спасибо!

@DoolotkeldiAlanov 11 дней назад

molodes

@codingwithtopchiy 11 дней назад

Спасибо)

@user-ln8vu7ij8f 8 месяцев назад

Не рабочий код

@codingwithtopchiy 8 месяцев назад

Приветствую! Что именно не работает?

@ideskaber 4 месяца назад

😂😂😂

@donchikbro4140 Год назад

Вообще не работает

@codingwithtopchiy Год назад

Приветствую! Оставлю ссылку на исходный код: surl.li/etlmm Может это поможет разобраться детальней.

@toniagoloveshenko3954 6 месяцев назад

не открывается код по ссылке@@codingwithtopchiy

@golovatskii_r 11 месяцев назад

nav ul li ul?? Брат, не проще было класс ебануть или айди и уже его стилизовать?

@codingwithtopchiy 11 месяцев назад

Приветствую! Списки и пункты можно помечать классами или идентификатором, но их нужно вкладывать друг в друга, чтобы получилось выпадающее меню.

@Suetlanshorts 11 месяцев назад

Видео ужас, вид не соответствует тому, что в видео

@lexxkrt 6 месяцев назад

серьезно? для этого нужно "учебное" видео? мне кажется проще этого сложно что то придумать. это же элементарно и очевидно. зачем мне это в рекомендации попало