Выпадающее меню на чистом HTML & CSS шаг за шагом || DropDown menu using HTML & CSS step by step
Рет қаралды 53,178
Жыл бұрынВ этом видео вы узнаете, как сделать выпадающее меню на чистом 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): 5375414128564241 (universal bank || mono)
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): / codingwithtopchiy
👍 Subscribe: / @codingwithtopchiy
😀Спасибо за просмотр!😀
@daniyartulenbaev 8 ай бұрын
Отличный урок.Большое спасибо!!!
@codingwithtopchiy 8 ай бұрын
Пожалуйста 🙂
@Alex-ux4dw 9 ай бұрын
Огромное спасибо, это видео как бы подводит итог всем знаниям, которые накопились в голове)))
@codingwithtopchiy 9 ай бұрын
Пожалуйста 👍
@DeadNnarri 5 ай бұрын
Дружище, спасибо за работу, ты лучший!
@codingwithtopchiy 5 ай бұрын
Пожалуйста)
@mr.petrucho8809 Жыл бұрын
спасибо большое, очень хорошее видео получилось!!! :)
@Gab_official_ 4 ай бұрын
Благодарю, за урок и понятное объяснение!
@codingwithtopchiy 4 ай бұрын
Спасибо за обратную связь)
@doctorspeed3102 11 ай бұрын
Отличное видео! Спасибо большое, очень помогли!
@codingwithtopchiy 11 ай бұрын
Пожалуйста)
@vicont9089 Жыл бұрын
Молодец! Есть определенная новизна. Спасибо!
@codingwithtopchiy Жыл бұрын
Спасибо) Рад что понравилось!
@user-gg4cl3id6e Жыл бұрын
супер, благодарю за видео
@codingwithtopchiy Жыл бұрын
Пожалуйста)
@sotnik350 6 ай бұрын
Спасибо большое, очень доступно и понятно
@codingwithtopchiy 6 ай бұрын
Пожалуйста 👍
@phpstudy8625 16 күн бұрын
Лучший !!!
@user-rt6hg3sx5v 9 ай бұрын
Спасибо большое)
@codingwithtopchiy 9 ай бұрын
Пожалуйста)
@NurMi-vh1tf 8 күн бұрын
Отличный урок. Ты лучший, спасибо.
@codingwithtopchiy 8 күн бұрын
Пожалуйста)
@Aleksey-prosto-Aleksey 6 ай бұрын
Большое спасибо я искал этот список меню очень долго, и попадалось все время не то в Гугле, а зашёл в Ютуб и сразу же нашел что нужно, ещё раз большое спасибо
@codingwithtopchiy 6 ай бұрын
Пожалуйста 🙂
@samvelzargaryan3559 3 ай бұрын
Огромное спасибо дядь, всегда хотел узнать как это делается, и только ты помог)) Лайк и подписка
@codingwithtopchiy 3 ай бұрын
Пожалуйста)
@user-mz6rb6bv3u 5 ай бұрын
Огромное спасибо, Мужик
@codingwithtopchiy 5 ай бұрын
Пожалуйста 🙂
@natashawebconstanta777 11 ай бұрын
Благодарю!! Это огонь!! Отдельное спасибо за сущности ))) но я прописала другую, более нежную - blacktriangledown;, я ж дизайнер ))) Иду смотреть у вас адаптивность для этого меню. Благодарю =)
@codingwithtopchiy 11 ай бұрын
Пожалуйста) Рад что все понравилось 👍
@Anna07081987 2 ай бұрын
Дуже зрозуміле видео. Дякую
@codingwithtopchiy 2 ай бұрын
Будь ласка)
@dansyz80 3 ай бұрын
Love your: «эйч-рэф» ❤😂❤
@user-rm1lm1qd8z 8 ай бұрын
Лайк . Подписка.
@codingwithtopchiy 8 ай бұрын
Спасибо 👍
@veryslon5104 Жыл бұрын
Спасибо
@codingwithtopchiy Жыл бұрын
Пожалуйста)
@your_brother5927 3 ай бұрын
Спасибо помог!
@codingwithtopchiy 3 ай бұрын
Пожалуйста)
@noobsslayer7520 7 ай бұрын
Чертов гений) спасибо за очень понятный ролик) лайкусь
@codingwithtopchiy 7 ай бұрын
Пожалуйста 🙂
@ivancube2992 Ай бұрын
Супер
@codingwithtopchiy Ай бұрын
Спасибо)
@user-hj1eh8dk9p 10 ай бұрын
Отличный урок, но строить длинную цепочку вложенных селекторов затея не ice. Я присвоил вложенным тегам ul классы и описывал стили исходя из этого. Получилось в лучшем виде. А в остальном всё хорошо.
@user-jb3ev6dd1p 4 ай бұрын
ну ты Гигант брат. Спасибо за урок. Дай бог высокой уровен знаний. Тем кто ишет знание, а тебя всех благ! HTML CSS JavaScript.
@codingwithtopchiy 4 ай бұрын
Спасибо)
@MrVarkom 6 ай бұрын
ема крутяк
@codingwithtopchiy 6 ай бұрын
Спасибо 🙂
@upwlqwp Жыл бұрын
Ну и заморочился ты. Классно получилось
@codingwithtopchiy Жыл бұрын
Спасибо) Рад что понравилось 👍
@cherepashki Жыл бұрын
mi ban stacvuma ?)P
@denveriogrizzly4722 11 ай бұрын
Спасибо, полезное видео. Если бы еще адаптив показал, вообще цены не было бы.
@codingwithtopchiy 11 ай бұрын
Пожалуйста! Вот адаптив: kzfaq.info/get/bejne/itefh7OGq9LQgmg.html
@kiritokaxorov15 10 ай бұрын
пацан от души сбасибо
@codingwithtopchiy 10 ай бұрын
Пожалуйста!)
@Attestatziakz 3 ай бұрын
🎉👍👌
@user-pr6jj6bh7v 27 күн бұрын
Спасибо за прекрасную работу, давно хотела научиться! Нельзя ли у вас попросить архив данной работы, в процессе возникли ошибки видимо, и не все получилось, хотелось бы доработать
@codingwithtopchiy 27 күн бұрын
Приветствую! Оставляю ссылку на исходный код: surl.li/etlmm
@user-xm1lo6xl7r Жыл бұрын
Спасибо! Отличное видео! А можешь сделать код или показать как это меню применить для всех страниц?
@codingwithtopchiy Жыл бұрын
Приветствую! Рад что понравилось видео) На днях сделаю видео о том, как сделать переход по ссылке. Например: нажимаете на HTML и переходите на страницу с блоками о HTML.
@codingwithtopchiy Жыл бұрын
kzfaq.info/get/bejne/eKqHlbWLtZzbnWg.html
@unionjack408 4 ай бұрын
Огромная благодарность за видео. Невероятно помогли. Есть вопрос, а возможно ли сделать кнопки меню в виде таблицы с тремя столбцами, где кнопка "Главная" будет занимать 3 ячейки? Еще раз благодарю
@codingwithtopchiy 4 ай бұрын
Приветствую! Пожалуйста) На счет кнопок, не совсем понимаю как это должно выглядеть, но в целом думаю, что можно так сделать.
@user-op8hl8yd3t 6 ай бұрын
Лайк и пописка 🎉
@codingwithtopchiy 6 ай бұрын
Спасибо 🙂
@pollyprice2587 8 ай бұрын
Большое спасибо, очень наглядно. Особенное восхищение вызывает Ваша замечательная программа, в которой Вы пишете код и тут же видите результат.) Подскажите, пожалуйста, как она называется? )
@codingwithtopchiy 8 ай бұрын
Пожалуйста! 🙂 Visual Studio Code
@Ta-cw3iq 2 ай бұрын
Видео выручило, спасибо. Хотелось бы увидеть, как работает a.submenuTitle:hover+ul.submenu, ul.submenu:hover {display: block;} если использовать в конце. Этот вариант у меня не сработал.
@gulnazametova7509 13 күн бұрын
Благодарю за видео🤝 Подскажите, пожалуйста, как добавить поисковик с иконкой ? 🙇♀️
@codingwithtopchiy 13 күн бұрын
Приветствую! Нужно в разметку добавить тег input с типом search и иконку поиска, затем все это стилизовать. Со временем постараюсь записать видео на эту тему.
@cain776olzhas 3 ай бұрын
Офигенный видос! Спасибо большое! Только просьба подскажите пожалуйста как изменить форму кнопки? Хочу не квадрат а овал
@codingwithtopchiy 3 ай бұрын
Приветствую! Спасибо за обратную связь. Рад, что понравилось видео) Для кнопки можете использовать свойство border-radius - это позволить скруглить углы, как вам угодно.
@phpstudy8625 16 күн бұрын
Еще бы сущности поворачивались при выпадании блоков была бы БОМБА !!!
@OksanaSaienko 9 ай бұрын
Спасибо!!!! Вы преподаете? Хочу к Вам на курс.
@codingwithtopchiy 9 ай бұрын
К сожалению не преподаю, только видео-обучение и видео-курсы.
@OksanaSaienko 9 ай бұрын
@@codingwithtopchiy , удачи Вам и процветания всем видам деятельности!
@codingwithtopchiy 9 ай бұрын
Спасибо большое 😊
@RustamMirzayev-ki5ms 20 күн бұрын
а какую программу ты используешь для написания кода?
@codingwithtopchiy 20 күн бұрын
Приветствую! Visual Studio Code.
@pip_install7496 2 ай бұрын
А если на сайте уже есть списки, то мы их сломаем выделением ко всему, то есть * {}. Как обратиться именно к заголовку чтобы только там убралось подчеркивание и нумерование? Пишу header {}, не работает
@codingwithtopchiy 2 ай бұрын
Приветствую! Да, все верно универсальный селектор * уберет у всех списков маркеры. Попробуйте дочерний селектор использовать, например header > список (ul) или к ссылкам (a) и затем {list-style: none; text-decoration: none;} должно сработать.
@crystalll5868 8 ай бұрын
Здравствуйте, как сделать класс главнее? Когда открываю меню оно ложиться под мой слайдер. Хочу чтобы меню ложилось на слайдер
@codingwithtopchiy 8 ай бұрын
Приветствую! Попробуйте применить свойство z-index.
@user-mf6bh4cp5g 10 ай бұрын
Немного смутил float, а на flexbox можно так сделать? А так огонь!!!
@codingwithtopchiy 10 ай бұрын
Приветствую! Да, можно на flex, это уже как удобно 👍
@vitaminf4608 Жыл бұрын
Подскажите пожалуйста какие горячие клавиши использовали в этот момент 0:56
@vitaminf4608 Жыл бұрын
ctrl+alt+стрелки
@codingwithtopchiy Жыл бұрын
Приветствую! Нужно зажать alt и курсор мышки ставить в поля.
@user-hj1eh8dk9p 10 ай бұрын
По-моему, лучше протащить мышь с зажатым колёсиком. В этом случае, когда всё на одно вертикали, самое то. Нажатая Alt тоже вариант, но этот способ следует применять, когда множественный ввод разбросан по коду.
@dansyz80 3 ай бұрын
«Давайте!» 😂
@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 28 күн бұрын
А как ты сделал так, что бы у тебя дизайн на сайте менялся без перезапуска сервера и перезагрузки страницы?
@codingwithtopchiy 28 күн бұрын
Приветствую! С помощью расширения Live Server вот подробное видео об этом: Расширение Live Server и автоматическое обновление страницы kzfaq.info/get/bejne/mLaVYKeft6jXhp8.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
@retroeagle 4 ай бұрын
Автор, объясните пожалуйста: как сделать код, с помощью которого меню (при нажатии на ту или иную кнопку) будет открывать нужную тебе страницу? Например: Создал я Меню с кнопками "Группа ВКонтакте, Ютуб Канал и Оригинальный Контент" и каждая это кнопка открывает то что мне нужно. Суть, как это сделать?
@codingwithtopchiy 4 ай бұрын
Приветствую! Посмотрите это видео: Выпадающее меню с переходом на другие страницы используя HTML&CSS kzfaq.info/get/bejne/eKqHlbWLtZzbnWg.html должно раскрыть ваш вопрос.
@retroeagle 4 ай бұрын
@@codingwithtopchiy благодарю)))
@dmitry.w3b 11 ай бұрын
5:21 На этом этапе у меня ссылки сместились под Logo. Вроде всё точь в точь делаю
@codingwithtopchiy 11 ай бұрын
Приветствую! Проверьте разметку, возможно logo размещается внутри тега nav из-за этого такое размещение.
@codingwithtopchiy 11 ай бұрын
Вот ссылка на исходный код: surl.li/etlmm Может это поможет разобраться детальней.
@littlespoon9270 7 ай бұрын
подскажите, у меня контейнеры не подвинулись и выглядят как будто прописан только битвин спейс
@codingwithtopchiy 7 ай бұрын
Приветствую! Не совсем понимаю, куда должны были подвинуться контейнеры? Значение space-between размещает блоки в контейнере по разные стороны, добавляет пространство между ними.
@littlespoon9270 7 ай бұрын
@@codingwithtopchiy имею ввиду лого максимально слева, а само меню сжато справа, не могу понять в чем дело
@codingwithtopchiy 7 ай бұрын
Добавьте padding: 1rem 9%; - отступ сверху и снизу 1 rem будет, а слева и справа на 9%.
@user-ll5on7ib8g Ай бұрын
У меня картинка не выходит когда пишу (background: url(img/bg.jpg) no-repeat;) объясните пожалуйста
@codingwithtopchiy Ай бұрын
Приветствую! Проверьте путь к картинке и название формата, возможно в этом проблематика. И еще можете посмотреть это видео: kzfaq.info/get/bejne/nLN3fc6VyJrSk58.htmlsi=3YglSLZkYL5opCo5 может будет полезным.
@user-oz8xb2fj9u Жыл бұрын
ссылку на исходный код можно?
@codingwithtopchiy Жыл бұрын
Приветствую! Ссылка на архив с кодом: surl.li/etlmm
@user-ff2ul1hh3o 7 ай бұрын
Искал серебро, а нашел золото!
@codingwithtopchiy 7 ай бұрын
👍👍👍
@Floryxd Ай бұрын
Вы не представляете.... Я все переписал................... Кому скинуть??
@VusalIsrafilovproverka Ай бұрын
Мне
@user-gy9ty5fy2i 12 күн бұрын
Так готовый код в описании,зачем мучаться?
@poppinpillsouljah Жыл бұрын
Привет. А что делать если я открываю выпадающее меню, а оно размещается слева в упор а не прям под ссылкой?
@codingwithtopchiy Жыл бұрын
Приветствую! Попробуйте добавить позиционирование (position: absolute;) и размещение (left и top), должно помочь. В видео это идет после 9-ой минуты.
@poppinpillsouljah Жыл бұрын
@@codingwithtopchiy абсолютное позиционирование есть, left и top тоже, но все равно упирается)
@codingwithtopchiy Жыл бұрын
Оставлю ссылку на исходный код: surl.li/etlmm Может это поможет разобраться детальней.
@PunkKoroli 5 ай бұрын
Что делать если лого и все ссылки остались в таком же строчном порядке, и не разделились
@codingwithtopchiy 5 ай бұрын
Приветствую! Можете попробовать сделать распределение с помощью flexbox. В плей-листе «Navigation menu» есть примеры.
@alexandrkhutornoy 11 ай бұрын
Разве можно юл помещать в ли? Это же не верно семантически
@codingwithtopchiy 11 ай бұрын
Приветствую! Да, можно. Если интересно, вот обучающее видео по спискам: kzfaq.info/get/bejne/irmpkpZoqLGol6s.html
@user-co5yn9op3f Жыл бұрын
Как скрыть эти треугольники?
@codingwithtopchiy Жыл бұрын
Приветствую! В этом примере никак не скрыть, только методом удаления сущностей в HTML.
@studs304agarkov5 Ай бұрын
А где находится код этого сайта ?
@codingwithtopchiy Ай бұрын
Приветствую! www.patreon.com/CodingWithTopchiy
@m_nazikou 22 күн бұрын
Почему у меня не получаетсЯ
@codingwithtopchiy 22 күн бұрын
Приветствую! Видимо что-то делаете не правильно, проверяйте внимательно все еще раз.
@annakariinna 11 күн бұрын
В якій прозі пишете html ? 0:22
@codingwithtopchiy 11 күн бұрын
Вітаю! Visual Studio code
@annakariinna 10 күн бұрын
@@codingwithtopchiy дуже дякую!
@enyooa Жыл бұрын
А как сделать адаптив с этими вырождающимися меню, без js 🤯🤯🤯🤯🤯🤯🤯
@codingwithtopchiy Жыл бұрын
Приветствую! Сегодня в 18:00 выйдет видео на эту тему.
@manilovv1983 4 ай бұрын
ОМГ ну кому сейчас нужна вёрстка только для десктопа? У меня на сайте по услугам 98% посещений со смартфона. Как это меню сделать выпадающим по нажатию на него пальцем, а не по наведению курсором мышки?
@codingwithtopchiy 4 ай бұрын
Приветствую! Считаю, что примеры должны быть разные. Вот видео с адаптивным выпадающим меню: kzfaq.info/get/bejne/itefh7OGq9LQgmg.html
@manilovv1983 4 ай бұрын
@@codingwithtopchiy спасибо!
@DoolotkeldiAlanov Күн бұрын
molodes
@codingwithtopchiy Күн бұрын
Спасибо)
@ideskaber 4 ай бұрын
😂😂😂
@user-ln8vu7ij8f 8 ай бұрын
Не рабочий код
@codingwithtopchiy 8 ай бұрын
Приветствую! Что именно не работает?
@golovatskii_r 11 ай бұрын
nav ul li ul?? Брат, не проще было класс ебануть или айди и уже его стилизовать?
@codingwithtopchiy 11 ай бұрын
Приветствую! Списки и пункты можно помечать классами или идентификатором, но их нужно вкладывать друг в друга, чтобы получилось выпадающее меню.
@donchikbro4140 Жыл бұрын
Вообще не работает
@codingwithtopchiy Жыл бұрын
Приветствую! Оставлю ссылку на исходный код: surl.li/etlmm Может это поможет разобраться детальней.
@toniagoloveshenko3954 6 ай бұрын
не открывается код по ссылке@@codingwithtopchiy
@Suetlanshorts 11 ай бұрын
Видео ужас, вид не соответствует тому, что в видео
@lexxkrt 6 ай бұрын
серьезно? для этого нужно "учебное" видео? мне кажется проще этого сложно что то придумать. это же элементарно и очевидно. зачем мне это в рекомендации попало
@polpogiovanna1558 4 ай бұрын
Твои проблемы, кому-то может быть не понятно такое. Элементарно и очевидно это субъективно
@exstra6205 4 ай бұрын
Я только начал изучать веб разработку от просмотра хуже не будет
@lexxkrt 4 ай бұрын
@@exstra6205 если вы до этого своей головой не дошли, завязывайте с веб-разработкой, это не ваше
@user-sv9kg8kl9p 4 ай бұрын
Душнилойд
@dansyz80 3 ай бұрын
Заткнись 😂
Coding With Topchiy
Рет қаралды 5 М.
Выпадающее меню на чистом HTML & CSS шаг за шагом || Responsive Drop Down Menu using only HTML & CSS
Coding With Topchiy
Рет қаралды 512
Scary Teacher Gaming
Рет қаралды 56 МЛН
Deveon
Рет қаралды 699
Фрілансер по життю
Рет қаралды 1 МЛН
Skill Blog: Веб-разработка
Рет қаралды 14 М.
Типичный Веб Разработчик
Рет қаралды 7 М.
Фрілансер по життю
Рет қаралды 397 М.