Выпадающее меню на чистом HTML & CSS шаг за шагом || Responsive Drop Down menu pure CSS
HTML-код
- Опубликовано: 28 фев 2023
- В этом видео вы узнаете, как сделать адаптивное выпадающее меню используя чистый HTML&CSS шаг за шагом.
🔗 Исходный код (source code): / 79695353
✅ Адаптивный шрифт с помощью функции calc() CSS: • Адаптивный шрифт с пом...
✅ Адаптивный шрифт с помощью функции clamp() CSS: • Адаптивный шрифт с пом...
✅ CSS Переменные: • Переменные в CSS || CS...
✅ Как ускорить написание кода с помощью Emmet в Visual Studio Code: • Как ускорить написание...
✅ Расширение Live Server и автоматическое обновление страницы: • Расширение Live Server...
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): / codingwithtopchiy
👍 Subscribe: / @codingwithtopchiy
😀Спасибо за просмотр!😀
Спасибо, добрейший человек! За понятное и доступное объяснение!!🙏
Пожалуйста!)
Спасибо за обратную связь!👍
очень простой классный урок слава Богу такие учителя есть спасибо
Пожалуйста!)
спасибо очень простой, классный урок
Пожалуйста)
Большая просьба в конце урока показывать прописанный код, очень не удобно по всему видео шататься в поиске ошибок. Надеюсь заметите, большое спасибо за урок, много чему научилась
Шикарно 🔥
Спасибо)
Ну ты бро даёшь... Каждый урок вёрстка HTML у тебя с нуля??? Почему не использовать уже ранее сделанное меню или хотя бы каркас HTML??? В целом меню отличное👍Но есть нюансы, я так полагаю, что без JS для адекватной работы всё же не обойтись. Нюанс в том, что при повторном нажатии на символ стрелки на мобильном устройстве подменю обратно не сворачивается, а это уже недостаток.
P.S. Как и обещал, лайк прожал, подписку оформил.
Спасибо за обратную связь!
Дякую за урок !
Будь ласка)
круть) майже місяць не міг саменький сам склепать) 3 рівень меню і бургер дуже дякую!!!!!!!
Будь ласка)
Радий що зміг допомогти!
О Боги... я сделала это ) Спасибо огромное!!! Это огонь!!! Единственное - хорошо бы в мобильной версии - клик на пункт с выпадалкой - открылось (это есть), но клик снова на тот же пункт - закрылось (выпадающий список). Для тех кто не понял, что там за штучка (селектор обобщённых родственных элементов) - это знак тильда (на клаве где буква ё))) Благодарю =)
Пожалуйста)
селектор обобщённых родственных элементов показывает Что nav и #menu:checked родственники? Урок просто супер!
Приветствую!
Спасибо за обратную связь 👍
По поводу селектора обобщенных родственных элементов, можно и так сказать.
Он соответствует элементу, который является сестринским по отношению к другому элементу, хотя не обязательно расположенному перед ним.
Об этом селекторе есть отдельное видео, возможно будет интересно ознакомится: ruclips.net/video/w1V1yMnuleE/видео.htmlsi=E1AP-xFKYiPlvl49
Спасибоо большое за такое подробное видео. у меня только маленький вопрос есть, я вроде бы так же все писала как и вы в коде. Но с момента menu span у меня не появились линии для бургера. мне получается нужно значения просто подгонять, если не получается также как у вас?
Да, там нужно подгонять ширину и высоту и соответственно размеры для span и тогда для свойства transform: translate() также подбирать значения, чтобы крестик корректный получился с бургера.
А если у меня и так ссылки уже правильно стоят, в ряд и по сридине, все равно нужно писать ul li { или нет ?
Приветствую!
Не обязательно, это просто разные методы применения разметки, кто-то через списки делает меню (ul>li>a), кто-то просто с ссылками (a). Ссылки строчный элемент, поэтому они располагаются одна за одной в ряд.
Привет, есть проблема, я так понял она есть и в твоем примере. При открытых dropdown Courses и Web Development, и попытке нажать на Projects происходит еще один клик на пункт выше, после которого Projects открывается и скрывается. Не подскажешь как фиксить?
Приветствую!
Прошу прощения за долгий ответ.
Проверил пример все работает без перескакиваний, к сожалению не подскажу как исправить.
@@codingwithtopchiy Я немного не дописал, это происходит на мобильных девайсах
А це потрібно якось бібліотеку підключити щоб добавити такі символи як на 8:34?
UPDATED: Я все вирішив.
Для додаткової інформації, можливо буде корисно по цій темі: ruclips.net/video/qw1oQ9xXRaw/видео.html
Не розумію чому не працює в мене justify-content: space-between; ?
CSS поки виглядає так
body {
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
*,
*:before,
*:after{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
text-transform: capitalize;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
box-shadow: 0 5px 10px rgba(0, 0, 0,.4);
justify-content: space-between;
}
Привіт!
Якщо я правильно зрозумів ви застосовуєте цю властивість щоб розмістити меню в середині header, спробуйте додати display: flex, має спрацювати.
Доброго дня. Дуже смішна ситуація трапилась. Я не побачив ваш комментарий вчасно, але сам зрозумів свою помилку )
Супер)
А де можна отримати архів?
Вiтаю!
Ось посилання: surl.li/fdwrm
@@codingwithtopchiy дякую!!!
не раджу користуватись архівом якщо сам набираєшь куда краще доходить)))))
Не работает
Приветствую!
Проверьте правильность написания кода.
@@codingwithtopchiy проверил много раз
@@codingwithtopchiy можно с вами как-то связаться чтобы вы посмотрели
Вот ссылка на архив: surl.li/fdwrm
@@codingwithtopchiy спасибо вы лучшей