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

3993 ratings | 121756 views


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

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

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

Рома Комов 16 days ago
он же ебаный колдун) ты вообщем человек?) :D
Владимир Володин 23 days ago
06:00 - top: 9999em; Может лучше -40em; ?., а то страница вышла 9999 8-)
Kids channel 24 days ago
Хороший материал, однако будто его адаптировать, чтоб они было кликабельном на малых экранах? Спасибо!
Дмитрий Барышевский 1 month ago
Что за префиксы?
Андрей Маэстро 1 month ago
гр гр гр блять
Prometheus Music 1 month ago
топ, однако единственное, что я не сообразил, это для чего необходимо опасити. может кто-то растолкует? у меня и без него все отлично работает
Николай Карнаушенко 1 month ago
Спасибо
Оксана Крылова 2 months ago
Картавый зуй
100ZA200 2 months ago
уместно все кто пишет что типо устарел сам код может вы и правы однако давай те подумаем логический мы ведь пишем для конечного юзера а кто у нас юзер это обыкновенные люд и вы думаете они будут заглядывать в код это врятли им главное чтобы они кликали и работало меню.
100ZA200 2 months ago
понятно объясняешь создатель молодчина уместно я с помощью ваших уроков научился строчить веб-сайты. Для новичков весьма подходите вот в этот момент веб-сайт пишу горизонтальное меню написал осталось лишь боковое.
Мuтный кот 3 months ago
Как вечно все пять!)
Hacker 336257iDz 4 months ago
Впервые на этом канале. Ну что произнести. *Лайк, подписка!* Даже не глядя видео)
Com Ex 4 months ago
Скажи мне, изволь, каким редактором ты пользуешься. Уж больно весьма он мне приглянулся.
Виктория Никитина 3 months ago
Это Brackets редактор
3EDDD D 4 months ago
где моя промах в css?все сделал норм а однако когда дошел до opacity не выходит body padding:0px; margin:0px; a text-decoration:none; color: 666 .side margin:20px; width:210px; .menu a list-style:none; background-color: 3d3d3d; color: fff; padding:10px; list-style:none; display:block; border-bottom:1.2px solid 666; ul list-style:none; padding:0px; margin:0px; .menu a:hover background-color: 666; .menu_list position:relative; .menu_drop position:absolute; width:210px; left:220px; opacity:1; float:right; top:-9999em; .menu_list:hover.menu_drop opacity:1; top:0;
Виталий 96 4 months ago
Супер !
ThenX Forhumans 4 months ago
Блин пацаны, помогите, когда он треугольники делал он добавил псевдо элемент афтер, однако у меня квадратик лишь самому нижнему пунку доьавился, а ко остальным дудки, а код будто у него в точности
Нортон Огнев 5 months ago
а горизонтальное этак не сделать, конечно?
seriy111 5 months ago
будто у себя включить живой просмотр
Виталий Смирнов 5 months ago
а у меня дудки пт добавить префиксы.
Дмитрий Д 6 months ago
ахринеть
kapotonai 6 months ago
Во дает!Действительно искусник!
Pavel Lopatko 6 months ago
Чем отличается position:absolute от position:relative?
Lesha Grusha 7 months ago
какая программка для верстки использовалась?
Ярик test 7 months ago
можно ли сделать такое выпадающее меню без скачки файла ???
Pavlo Fikanyuk 7 months ago
Ты что брат барадача:?
almas bisenkul 8 months ago
НЕ МОГУ СДЕЛАТЬ ГОРИЗОНТАЛЬНО , .menu__list:hover.menu__drop opacity: 1; top: 0; НЕ ПОЛУЧАЕТСЯ ,КОГДА НАВОДИШЬ ВМЕСТО ПУНКТА ПОДПУНКТ ВЫХОДИТ , ПОМОГИТЕ!!!СРОЧНО
Ando from Armenia 8 months ago
1:40 минутке будто нажми TAB
Кирилл Краевой 8 months ago
У меня таковой проблема, мое выпадающее меню, надлежит владеть собственные видимые границы, как следует, border-left я не могу прописать, (чтоб сделать отступ от Сайд-бара), будто устроиться?
Олег Ермакович 8 months ago
Я скачал архив, однако там СОВСЕМ другое содержимое!!!
Alex Eller 8 months ago
В конце на скруглениях голову сломал о_О
Александр Пономарев 9 months ago
Круто! То что находил,благодарю!
Паша Киселёв 9 months ago
Что такое solid ?
teteteleken 9 months ago
топ в em не работает отчего-то
teteteleken 9 months ago
конечно,я тупоумный попросту
Вадим Лыпка 10 months ago
Просто дудки слов, будто длительно ты всему этому обучался?
Вадим Лыпка 10 months ago
А что это за добавление такое, которое добавляет прекрасные иконки визави файлов и указывает сетку в поле редактора?
Tone Ant 10 months ago
Огромное благодарю!!!
Արման Հարությունյան 10 months ago
Скажите изволь что это за программка?
Лев Костенко 11 months ago
Офигительный задание, я с помошью него уже немало чего сделал. ТОлько единственн не рабтает фишка с кнопкой таб
DragonsLord76 11 months ago
Где округление углов ? Где полоса снизу ? Я нихера в упор не вижу!
Максим Смирнов 11 months ago
Спасибо мужчина, ты крутой!)
RED BOSS 11 months ago
что за редактор?
FireMan Walter 11 months ago
Серега КрасавчеГ
Function 1 year ago
1:41 KAK?
Эдмон Дантес 1 year ago
Сними изволь видео, где ты делаешь меню с внедрением js и какие отличия меж меню на CSS и меню на js, будет весьма круто. За видео естественно будто вечно лайк:)
Петр Жечков 1 year ago
Изящно и прекрасно, без всяких костылей. Получил наслаждение от просмотра.
PrO'RoK_AnD_SosoK 1 year ago
А что за редактор ты используешь ?
DarkFate Inc 1 year ago
Большое благодарю, весьма высококачественный контент. Продолжай в том же духе.
Шестьдесят Восьмой 1 year ago
ОГРОМНОЕ СПАСИБО! ОБЕСПЕЧУ ТЕБЕ БЕССМЕРТИЕ!!!
ThenHi 1 year 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;
mack ua 1 year ago
А будто такое сделать лишь горизонтально. Первый степень я сделал просто, а вот выпадающий не могу. будто то не выходит привязать к подходящей кнопке. Вылетает подменю не под той кнопкой. ;(
VQ 1 year ago
можно будто то сохранить паддинг (эффект :hover) у пт родителя при переходе в подменю?
Gektor1307 1 year ago
кто знает будто сделать, чтоб подпункты медлительно выезжали слева-вправо?
Deomid Fedorov 1 year ago
Давно желал этому всему выучиться, немало полезного за малое пора. Огромное благодарю :)
arTSTyLE1313 1 year ago
гениально
Александр Павлов 1 year ago
Молодец!!!
Alisher Top Secret 1 year ago
гд ты научился мастерить​ такие ахуительные трюки
Brainslug 002 1 year ago
74к просмотров в российском ютубе видео про css это очень!
Victoria Bauer 1 year ago
Один из самых наилучших уроков, благодарю!
Сашко 1 year ago
Достаточно просто объяснено, лайк)
KiIIerJo 1 year ago
*transition: 0.5s all* - чот не пашет в notepad++ конечно и позже на страничке не подтягивается, в чем может быть неувязка может кто знает? В архиве типо из видео х*№ета изнаночная.
zos 1 year ago
кому то 13 минут а кому то 3 часа эх.
Nipper 1 year ago
У меня не работает построение.menu_list:hover.menu_drop
ZnZ 1 year ago
Что делают префиксы?
Dima Rudenko 1 year ago
викс идёт нахуй, убери рекламу пж
MEC Production 1 year ago
А для чего устанавливать префиксы?
sdsa asdasd 1 year ago
красава!
Артём Шевченко 1 year ago
Братка скажи будто у тебя браузер без обновления сходу всё указывает
Карлсон 1 year ago
livereload
omg omg 1 year ago
будто это меню возложить горизонтально если можно коротко обьяснить
rich bich 1 year 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;
Александр НЕПушкин 1 year ago
Какой редактор используете в данном уроке?
Illidan Half-blood 1 year ago
навожу на пункты и ничего не возникает, хотя поначалу они невидимые, а когда наводишь то надлежит все являться. че за нах
Tanya K 1 year ago
благодарю. у вас красивые уроки и роскошное разъяснение.
фк дордой 1 year ago
будто мастерить точно это однако горизонтальным
Илья Репин 1 year ago
А чё у меня в Brackets этак не работает?
Сергей Бибик 1 year ago
В какой программке вы работаете?
jason ivanov 1 year ago
какой редактор ты используешь для верстки? весьма удачный
Mad Fox 1 year ago
Brackets
Nurtilek Mamatov 1 year ago
а что за программка
Джамал Абсалимов 1 year ago
Как сделать этак что бы выпадающее меню толкало ниже стоящие элементы.У меня они поверх других выходят.Помогиитеее безотлагательно домашку нужно сдавать !!!!!!!
Arsen Saddened 1 year ago
скажи будто все тоже самое лишь при нажатии выпадающий перечень ?
Коркин Кеша 1 year ago
А будто сделать авторелоад html странички?)
Первый канал 1 year ago
Специальный плагин - LiveReload
Сергей Коновалов 1 year ago
весьма прикольно
ShemY Shem 1 year 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 1 year ago
ShemY ul>menu>li>a font-size:20px; a ne pt
Ilya Agarishev 1 year ago
Красавец, благодарю
Димон Астахов 1 year ago
Шикарное видео, благодарю огромное)) Респект создателю!!))
Artur Kravcov 1 year ago
код перепроверил все нормально.однако кушать проблемма.Подпункты вообщем пропали потом left 100%; .menu__drop position: absolute; width: 100%; left: 100%; top: -9999em; opacity: 0; border-left: 10px solid transpored; transition: 0.5s opacity;
Евгений Емелин 1 year ago
transpored верно напишите - transparent. А пропали они, поэтому что этак нужно - вы ведь написали opacity: 0, т.е. элементы стопроцентно прозрачные. Непрозрачными они должны становиться при наведении указателя мыши на.menu__list
MrMaxiik 1 year ago
Спасибо!) Очень посодействовал )
Rodion Antonichev 1 year ago
Супер, крутое видео. Очень посодействовало.
Amir Davidoff 1 year ago
Супер задание) одинешенек проблема, будто поменять сероватый краска выпадающего меню на иной?
Евгений Емелин 1 year 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
будто зделать его вертикальным?
AF- AKTAU FOOTBALL 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