Выпадающее меню на css

3517 ratings | 105224 views


Выпадающее меню на css

С этими праздниками, нормально до видео не добраться :) Сегодня мы будем делать меню с выпадающими списками на чистом CSS3. Без использования javascript. Как обычно, все будет красиво, плавно, с анимацией - смотрите и наслаждайтесь! ============================================== Ссылки из видео: 1. Пример: 2. Архив: *** Заработай на своем YouTube канале *** Музыка предоставлена сайтом , как партнеру VSP Group. Спасибо! Наш сайт: Наш ВК: Мой Twitter: Google+

Comments to the video: Выпадающее меню на css

Lesha Grusha 7 days ago
какая программка для верстки использовалась?
Ярик No1 8 days ago
можно ли сделать такое выпадающее меню без скачки файла ???
Pavlo Fikanyuk 10 days ago
Ты что брат барадача:?
almas bisenkul 27 days ago
НЕ МОГУ СДЕЛАТЬ ГОРИЗОНТАЛЬНО , .menu__list:hover.menu__drop opacity: 1; top: 0; НЕ ПОЛУЧАЕТСЯ ,КОГДА НАВОДИШЬ ВМЕСТО ПУНКТА ПОДПУНКТ ВЫХОДИТ , ПОМОГИТЕ!!!СРОЧНО
Ando from Armenia 1 month ago
1:40 минутке будто нажми TAB
Кирилл Краевой 1 month ago
У меня таковой проблема, мое выпадающее меню, надлежит владеть собственные видимые границы, как следует, border-left я не могу прописать, (чтоб сделать отступ от Сайд-бара), будто устроиться?
Олег Ермакович 1 month ago
Я скачал архив, однако там СОВСЕМ другое содержимое!!!
Alex Eller 1 month ago
В конце на скруглениях голову сломал о_О
Александр Пономарев 2 months ago
Круто! То что находил,благодарю!
Паша Киселёв 2 months ago
Что такое solid ?
teteteleken 2 months ago
топ в em не работает отчего-то
teteteleken 2 months ago
конечно,я тупоумный попросту
Вадим Лыпка 2 months ago
Просто дудки слов, будто длительно ты всему этому обучался?
Вадим Лыпка 2 months ago
А что это за добавление такое, которое добавляет прекрасные иконки визави файлов и указывает сетку в поле редактора?
Tone Ant 2 months ago
Огромное благодарю!!!
Արման Հարությունյան 3 months ago
Скажите изволь что это за программка?
Лев Костенко 3 months ago
Офигительный задание, я с помошью него уже немало чего сделал. ТОлько единственн не рабтает фишка с кнопкой таб
DragonsLord76 4 months ago
Где округление углов ? Где полоса снизу ? Я нихера в упор не вижу!
Максим Смирнов 4 months ago
Спасибо мужчина, ты крутой!)
RED BOSS 4 months ago
что за редактор?
FireMan Walter 4 months ago
Серега КрасавчеГ
QwertiuM 5 months ago
1:41 KAK?
Эдмон Дантес 5 months ago
Сними изволь видео, где ты делаешь меню с внедрением js и какие отличия меж меню на CSS и меню на js, будет весьма круто. За видео естественно будто вечно лайк:)
Петр Жечков 5 months ago
Изящно и прекрасно, без всяких костылей. Получил наслаждение от просмотра.
PrO'RoK_AnD_SosoK 5 months ago
А что за редактор ты используешь ?
Кирилл Бобков 5 months ago
Большое благодарю, весьма высококачественный контент. Продолжай в том же духе.
Шестьдесят Восьмой 5 months ago
ОГРОМНОЕ СПАСИБО! ОБЕСПЕЧУ ТЕБЕ БЕССМЕРТИЕ!!!
ThenHi 6 months ago
Не опявляется меню при новедении(( что мастерить помогите) a text-decoration: none; ul margin: 0; padding: 0; list-style: none; .side width: 200px; margin: -40px; .menu a background: 3d3d3d; color: fff; padding: 10px; display: block; border-bottom: 1px solid 666; transition: 0.5s all; .menu a:hover background: 666; padding: 10px 0 10px 20px; .menu__list position: relative; .menu__drop position: absolute; width: 100%; left: 100%; opacity: 0; top: -9999em; .menu__list:hover.menu__drop opacity: 1; top: 0;
Gohn Silver 6 months ago
Видео не плохое, если бы ещё было горизонтальное адаптивное меню- было бы вообщем класс
mack ua 6 months ago
А будто такое сделать лишь горизонтально. Первый степень я сделал просто, а вот выпадающий не могу. будто то не выходит привязать к подходящей кнопке. Вылетает подменю не под той кнопкой. ;(
VQ 6 months ago
можно будто то сохранить паддинг (эффект :hover) у пт родителя при переходе в подменю?
Gektor1307 6 months ago
кто знает будто сделать, чтоб подпункты медлительно выезжали слева-вправо?
Deomid Fedorov 6 months ago
Давно желал этому всему выучиться, немало полезного за малое пора. Огромное благодарю :)
arTSTyLE1313 7 months ago
гениально
Александр Павлов 7 months ago
Молодец!!!
Alisher Top Secret 7 months ago
гд ты научился мастерить​ такие ахуительные трюки
Brainslug 002 7 months ago
74к просмотров в российском ютубе видео про css это очень!
Victoria Bauer 7 months ago
Один из самых наилучших уроков, благодарю!
Сашко 7 months ago
Достаточно просто объяснено, лайк)
zos 7 months ago
кому то 13 минут а кому то 3 часа эх.
Nipper 8 months ago
У меня не работает построение.menu_list:hover.menu_drop
ZnZ 8 months ago
Что делают префиксы?
Dima Rudenko 8 months ago
викс идёт нахуй, убери рекламу пж
MEC Production 8 months ago
А для чего устанавливать префиксы?
sdsa asdasd 8 months ago
красава!
Артём Шевченко 9 months ago
Братка скажи будто у тебя браузер без обновления сходу всё указывает
Карлсон 4 months ago
livereload
omg omg 9 months ago
будто это меню возложить горизонтально если можно коротко обьяснить
rich bich 9 months ago
Что здесь не этак? /*Выпадающее меню*/ ul margin:0; padding:0; list-style:none; /*Внешний облик меню*/ .side width:200px; margin:10px; .menu a background: 3d3d3d; color: fff; padding:10px; display:block; border-bottom:1px solid 666; transition:0,5s opacity; .menu a:hover background-color: 87ABFF; padding:10px 0 10px 20px; /*Всплывающее меню*/.menu__drop position:absolute; width:100%; left:100%; top:-9999em; opacity:0; .menu__list:hover.menu__drop opacity:1; top:0;
Александр НЕПушкин 9 months ago
Какой редактор используете в данном уроке?
маслотерминатор 10 months ago
навожу на пункты и ничего не возникает, хотя поначалу они невидимые, а когда наводишь то надлежит все являться. че за нах
Tanya K 10 months ago
благодарю. у вас красивые уроки и роскошное разъяснение.
фк дордой 10 months ago
будто мастерить точно это однако горизонтальным
Илья Репин 10 months ago
А чё у меня в Brackets этак не работает?
Сергей Бибик 10 months ago
В какой программке вы работаете?
jason ivanov 10 months ago
какой редактор ты используешь для верстки? весьма удачный
Mad Fox 10 months ago
Brackets
Nurtilek Mamatov 10 months ago
а что за программка
Джамал Абсалимов 10 months ago
Как сделать этак что бы выпадающее меню толкало ниже стоящие элементы.У меня они поверх других выходят.Помогиитеее безотлагательно домашку нужно сдавать !!!!!!!
Arsen Saddened 10 months ago
скажи будто все тоже самое лишь при нажатии выпадающий перечень ?
Коркин Кеша 10 months ago
А будто сделать авторелоад html странички?)
Первый канал 10 months ago
Специальный плагин - LiveReload
Сергей Коновалов 10 months ago
весьма прикольно
ShemY Shem 10 months ago
Можете отозваться на проблема в чем промах? a text-decoration: none; display: inline-block; color: aliceblue; transition: 0.5s all; min-width: 100px; text-align: center; padding: 5px; a:hover background: 575757; ul.drop_menu>li>a border-top: 1px solid 666; ul.menu>li>a font-size:20pt; ul list-style: none; margin: 0; padding: 0; display: block; background: 3d3d3d; .drop_menu position: absolute; opacity: 0; .static_menu:hover.drop_menu opacity: 1; ul.menu>li display: inline; Не желает выводить всплывающее меню
Vinni Ukrai 10 months ago
ShemY ul>menu>li>a font-size:20px; a ne pt
Ilya Agarishev 10 months ago
Красавец, благодарю
Димон Астахов 11 months ago
Шикарное видео, благодарю огромное)) Респект создателю!!))
Artur Kravcov 11 months ago
код перепроверил все нормально.однако кушать проблемма.Подпункты вообщем пропали потом left 100%; .menu__drop position: absolute; width: 100%; left: 100%; top: -9999em; opacity: 0; border-left: 10px solid transpored; transition: 0.5s opacity;
Евгений Емелин 10 months ago
transpored верно напишите - transparent. А пропали они, поэтому что этак нужно - вы ведь написали opacity: 0, т.е. элементы стопроцентно прозрачные. Непрозрачными они должны становиться при наведении указателя мыши на.menu__list
MrMaxiik 11 months ago
Спасибо!) Очень посодействовал )
Rodion Antonichev 11 months ago
Супер, крутое видео. Очень посодействовало.
Amir Davidoff 11 months ago
Супер задание) одинешенек проблема, будто поменять сероватый краска выпадающего меню на иной?
Евгений Емелин 10 months ago
menu__drop background-color: иной_краска;
Женя Выходцев 1 year ago
а будто можно меню выровнять по горизонтали а здесь не помогает display: inline-block не желает сотрудничать подскажите изволь!
true friend 1 year ago
Сергей а что за текстовый редактор таковой у тебя?
true friend 1 year ago
благодарю!!!
ZloyMandarin 1 year ago
будто зделать его вертикальным?
мисс настя 1 year ago
благодарю, посодействовал)
MrDixioner 1 year ago
Зачем в любой проект Вы суёте этот стартлайт с подключением скриптов и всякого мусора? Не проще начинать проект с нуля и не засорять мозги новеньким?!
Watchin starWARS smokin pot 1 year ago
Пиздец , больше минутки видео этого долбаеба не могу смотгеть
Doniyor Usmonov 1 year ago
spasibo v tg netu kanal ?
Ruslan Braun 1 year ago
Спасибо вам за задание! Очень доходчиво!
Александр Фролов 1 year ago
подскажите будто сделать такое же меню, однако лишь горизонтально, чтобы меню было в линия? Очень нужно )
Venkos pro 1 year ago
поясните для чайника - поставил joomla, будто применить ваше видео к joomla, хотя б в общих чертах?
Riot Zone 1 year ago
Это будто этак при нажатии на таб оно само всё написалось?
Sergey Solov'ev 1 year ago
Riot Zone плагин emmet
Антон Сурыгин 1 year ago
Классно =) стремительно, попросту, понятно и прекрасно =)
Рома Мироненко 1 year ago
Подскажите изволь, отчего когда я выделяю раздельно transition и выбираю добавить префиксы то все работает, а когда полный код то не желает трудиться?
Сергей Храпов 1 year ago
Спасибо за хорошее видео! У меня истина проблема: на 9-й минутке добавляется .menu li.menu_drop li a , отчего не работает, если прибрать .menu li сначала? Почему нужно обращаться к классу .menu_drop чрез .menu ?
Евгений Емелин 10 months ago
если адресоваться чрез .menu_drop li a , то тоже трудиться будет. Более длиннющий линия указывается для надёжности, т.к. к примеру на каком-нибудь веб-сайте .menu_drop может быть не лишь в .menu , однако и в других блоках, а нам нужен тот, какой находится конкретно в .menu
Sergii Tymchenko 1 year ago
Все верно. Подписался на тебя. Спасибо за твое пора и познания.
Владимир Бочкарев 1 year ago
Сергей, на мобильном будет оно нормально отображаться?
Micro1001 Dobb 1 year ago
сходу видать - работает профи!
Extrem Life 1 year ago
В последнее пора стопроцентно отказался от использования списков для сотворения меню. Кто вообщем выдумал мастерить меню с внедрением тегов которые были выдуманы для дизайна текста.!??? Поясню вот структура меню, предлагаемая везде в том числе и вашем статье: <ul> <li>деление 1 </li> <li>деление 2 </li> <li>деление 3 </li> </ul> Как правило, для меню этак же необходимо еще и ссылки <ul> <li><a href= >деление 1</a></li> <li><a href= >деление 2</a></li> <li><a href= >деление 3 </a></li> </ul> И этак же будто правило <ul> помещают еще и в обертку к примеру <div> илио <menu> в итоге наша построение <menu> <ul> <li><a href= >деление 1</a></li> <li><a href= >деление 2</a></li> <li><a href= >деление 3 </a></li> </ul> </menu> Зачем нам <ul> и все эти <li>, не достаточно того что это дополнительны теги разметки, этак еще и нередко их приходится стилизовать с помощью css. Почему бы нам не выбросить все это дело и написать последующее: <menu> <a href= >деление 1</a> <a href= >деление 2</a> <a href= >деление 3</a> </menu> Не истина-ли это гараздо короче! Приемущества: 1. Гараздо меньше тегов разметки. 2. <a> это строчный элемент и если нам необходимо горизонтальное меню то нам не необходимо использовать float-left; 3. Проще в стилизации. если необходимо назначаем наши <a> display: block; либо display: inline-block; потом чего делай с ними что угодно. Вот вообщемто и все. Буду благодарен за ваш ответ. Если я не прав, то весьма желаю выяснить в чем, этак будто применяю этот способ уже во всех собственных проектах.
MrDixioner 1 year ago
Вам уже отвечали, и не один, что попытайтесь таким способом сделать подменю. Вы промолчали до сих пор. А это означает, что Ваш способ лишь для самых обычных менюшек без подменю.
kuk kukin 1 year ago
что тако префикс?
Олег Чегоненко 1 year ago
Здравствуйте, не подскажите: будто сделать этак, чтоб выпадающий перечень вечно начинался там, где 1-ый(самый верхний) пункт меню? Заранее благодарю!
Serega5j 1 year ago
Оксана Валькевич 1 year ago
Пипец! Вот это я понимаю=) ,молодчина, лайк и подписка,этак содержать!
MaksimIsaaevich 1 year ago
Добрый денек, Сергей. Спасибо за уроки. Вопросик: А будто сделать что бы при наведении на.menu__drop строчка меню с которой он вылез оставалась со качествами будто при наведении на него же? Такой код ничего не дает.menu__drop:hover .menu__list background: 666; padding: 10px 0 10px 20px; при таком написании. при наведении на подменю, характеристики.menu__list не изменяются.
Евгений Емелин 10 months ago
такие вещи делаются с помощью javascript/jQuery. Если кратко, то необходимо в css заблаговременно задать характеристики для класса, позже с помощью js прикарманить этот класс родительскому элементу тех блоков, на которые наведён указатель мыши
Сергей Успенский 1 year ago
Сергей, Большое Спасибо за уроки!! Небольшой теоретический проблема: а отчего необходимо строчить: <b>.menu__list:hover::after</b> , а не <b>.menu__list::after:hover</b> и та же самая непонятка у меня появилась по: <b>.menu li:first-child a</b> (мне отчего то казалось что <b>.menu li a:first-child</b> - вернее, однако сцуко не работает)/ Подскажите пжста!!!
Сергей Успенский 10 months ago
Спасибо
Евгений Емелин 10 months ago
Сергей, .menu li:first-child a читается будто в самом первом блоке li, какой содержится в блоке.menu, избрать элемент a. А этак будто Вы написали читается в блоке lii, какой содержится в блоке.menu, избрать САМЫЙ ПЕРВЫЙ элемент a. Прочувствуйте разницу.
mr Beligen 1 year ago
Что ты нажимаешь в brackets? Вот к примеру: div content что то нажимаешь, и выходит <div class= content ></div>
Игорь Северюхин 1 year ago
Отличный задание. Скажите, а отчего используете в заглавиях классов двойной слэш заместо обыденного дефиса? В чем превосходство? Или это попросту ваша обыкновение?
Lenmark 1 year ago
Побольше б таких уроков. Нет ничего излишнего. Очень благодарю. Желаю фурроров в творчестве ^_^
Иван Орлов 1 year ago
А в первой строке файла css - это для чего код?
Victor KD 1 year ago
Серега, у меня горизонтальное меню и такая проблемка, при наведении на хоть какой элемент li выпадает меню которое лежит только в первом, конечно и вообщем по логике не усвою, отчего у тебя этак вышло, что только на подходящем выпадает, на других - дудки. Что за чудо?
Nikita Detkov 1 year ago
Он же произнес, что все подпункты мы убираем на -999em, а при наведении на пункты они типо передвигаются назад. Таким образом возникают лишь нужные
VyacheSlav Noyabrsky 1 year ago
Огромное благодарю 🙏 за познания !
Дим4ик 1 year ago
Нихрена для себя
23 1 year ago
transition: all нехорошо устанавливать, это в больших проектах будет тормозить браузер. Лучше вручную прописать любой параметр.
Master-CSS 1 year ago
Спасибо. Учту в будущем.