Выпадающее меню на css
Рет қаралды 205,988
9 жыл бұрынС этими праздниками, нормально до видео не добраться :) Сегодня мы будем делать меню с выпадающими списками на чистом CSS3. Без использования javascript.
Как обычно, все будет красиво, плавно, с анимацией - смотрите и наслаждайтесь!
==============================================
Ссылки из видео:
1. Пример: master-css.com/demo/css3menu/
2. Архив: master-css.com/zip/startlight.rar
** Заработай на своем KZfaq канале **
master-css.com/go/21
Музыка предоставлена сайтом audiomicro.com, как партнеру VSP Group. Спасибо!
Наш сайт: master-css.com
Наш ВК: m_css
Мой Twitter: / swat727
Google+ plus.google.com/+Master-css/
@CodexWeb 9 жыл бұрын
Фишки вёрстки под гитару :) Ребята, ставьте лайк и делитесь плиз моими видео в своих соц.сетях. *Чем больше аудитория, тем больше мотивации удивлять вас новыми уроками*
@dst_01 7 жыл бұрын
Ты крут, спокойно, понятно, содержательно. Спасибо.
@hagen2363 7 жыл бұрын
За одну только гитару держи лайк
@motya7297 7 жыл бұрын
у меня подпункты не появляются( что делать?
@pRo100TanKist 7 жыл бұрын
Не опявляется меню при новедении(( что делать помогите) 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; }
@caf276 6 жыл бұрын
а как называетца этот редактор?
@user-zr1ud3ly9j 8 жыл бұрын
Вот код кому лень писать Пункт 1 Подпункт 1 Подпункт 2 Подпункт 3 Подпункт 4 Подпункт 5 Пункт 2 Пункт 3 Подпункт 1 Подпункт 2 Подпункт 3 Подпункт 4 Подпункт 5 Пункт 4 Пункт 5 Подпункт 1 Подпункт 2 Подпункт 3 Подпункт 4 Подпункт 5
@CodexWeb 8 жыл бұрын
Ну блин лентяи :)
@goldlion1815 8 жыл бұрын
Можно еще разок пошагово, без постороннего софта через Notepad или PhpStorm?
@goldlion1815 7 жыл бұрын
***** а я - тебя спрашивал, выскочка?
@user-fr9oc4rh7y 7 жыл бұрын
орнул
@parcivallll 6 жыл бұрын
Скажите пожалуйста что это за программа?
@alexti6268 8 жыл бұрын
Ваши видео просто шедевры Screencasting -a! :))перестает хотеться что-то делать, просто хочется смотреть и получать удовольствие...)
@user-ed3db8ng2e 5 жыл бұрын
Ах.еть, нет слово, благодаря тебе я начинаю понимать как прекрасен CSS, спасибо Серега !
@RomanKorostenskyi 7 жыл бұрын
Побольше б таких уроков. Нет ничего лишнего. Очень спасибо. Желаю успехов в творчестве ^_^
@Mykhailo_Vdovychenko 4 жыл бұрын
"Все гениальное - просто" и это правда. Прошел Ваш урок с удовольствием! Классно, интересно, познавательно.
@fovsl7222 8 жыл бұрын
Все очень доступно и четко выложено. Отличные у вас уроки!
@Jay-pp4pk 7 жыл бұрын
Изящно и красиво, без всяких костылей. Получил удовольствие от просмотра.
@user-fw9km4jl7m Жыл бұрын
Подробнее урока я за 10 видео ещё не увидел, спасибо тебе большое, очень сильно выручил, Дай Бог тебе всего наилучшего
@mexvision-3556 5 жыл бұрын
pointer-events: none; Делает элемент не восприимчивым для мыши. Зачем выносить блоки за экран?
@MicroDobb 7 жыл бұрын
сразу видно - работает профи!
@_Fantom_. 4 жыл бұрын
Это просто бомбезный урок, спасибо Серрега!...
@deomidfedorov1440 7 жыл бұрын
Давно хотел этому всему научиться, много полезного за минимальное время. Огромное спасибо :)
@victoriabauer6344 7 жыл бұрын
Один из самых лучших уроков, спасибо!
@alexmac3938 8 жыл бұрын
все круто, четко и понятно!) и музыка на фоне - отличная!:))
@user-ir8nd6mj2b 6 жыл бұрын
Впервые на этом канале... Ну что сказать... *Лайк, подписка!* Даже не смотря видео)
@user-le7hj9bj2j 8 жыл бұрын
Красавчик очень хорошо излагаешь материал!! Лайк подписка :)
@user-yg8iz2dq5d 7 жыл бұрын
Шикарное видео, спасибо большое)) Респект автору!!))
@slava04111982 8 жыл бұрын
Огромное спасибо 🙏 за знания !
@lincoln1484 4 жыл бұрын
Всё очень доходчиво, спасибо за урок
@dst_01 7 жыл бұрын
Все четко. Подписался на тебя. Спасибо за твое время и знания.
@darkfateinc7333 7 жыл бұрын
Большое спасибо, очень качественный контент. Продолжай в том же духе.
@lancer-serega5346 8 жыл бұрын
Во Серега жжет! Быстро, грамотно, качество и по делу! Забрал к себе в группу ВК Для новичков тяжеловато будет смотреть и параллельно делать
@user-bq7ou7py7x 7 жыл бұрын
Не удивлюсь если ты просто всё съёбываешь у автора.
@kapotonai 6 жыл бұрын
Во дает!Действительно мастер!
@nikalastsk6275 8 жыл бұрын
Отличное видео ! Сейчас буду пробовать делать
@user-su3ef5cb8p 7 жыл бұрын
Классно =) быстро, просто, понятно и красиво =)
@user-xg6jy6wv7e 7 жыл бұрын
Пипец! Вот это я понимаю=) ,молодец, лайк и подписка,так держать!
@4sARy 5 жыл бұрын
Лайк, подписка и колокольчик. На всё нажал, так ещё и другу видео скинул. Сейчас для пракитики сайт пишем. Обучаемся тому, чему нас не научили.
@maximsmirnov887 6 жыл бұрын
Спасибо мужик, ты крутой!)
@vladimirberger2765 8 жыл бұрын
ОООО КРУТО)тоже такую буду делать)спс
@vahesargsyan7573 Жыл бұрын
Большое вам спасибо,классно помогли!!!
@user-ju8mq7il4x 6 жыл бұрын
Круто! То что искал,спасибо!
@technique9940 4 жыл бұрын
Ну ты потный пацан, лайк и респект тебе за эту обучалочку, мой багаж знаний набрал обороты)))
@slavalightning3002 5 жыл бұрын
все офигенно работает, спасибо!
@Goltizar 8 жыл бұрын
Полезные видео, очень доходчиво, спасибо. Подписался.
@skyfox9861 9 жыл бұрын
Очень круто!)
@kirillchemerys9261 8 жыл бұрын
Извините, а подскажите как сделать такое выпадающее меню только по горизонтали?
@visherit7744 8 жыл бұрын
Спасибо, очень хорошо обьясняешь))
@Nodorgrom 8 жыл бұрын
Молодец! Спасибо!
@nohamster 7 жыл бұрын
Достаточно легко объяснено, лайк)
@user-db5qk6jr4l 6 жыл бұрын
Офигительный урок, я с помошью него уже много чего сделал. ТОлько единственн не рабтает фишка с кнопкой таб
@rodionantonichev2412 7 жыл бұрын
Супер, крутое видео. Очень помогло.
@MrMaxiik 7 жыл бұрын
Спасибо!) Очень помог )
@toneant5675 6 жыл бұрын
Огромное спасибо!!!
@mishasv1490 5 жыл бұрын
Отличный урок!!!
@dublweb533 8 жыл бұрын
Ты в натуре мастер.
@NORTHSTAR103 7 жыл бұрын
Красавец, спасибо
@user-pj5so5ek3x 8 жыл бұрын
Спасибо за урок)
@personal3652 8 жыл бұрын
молодец, здорово донес инфу, я даже подписался, хотя редко подписываюсь)
@marinaamelina9079 8 жыл бұрын
Огромное спасибо за отличный урок. Подскажите пожалуйста - вы в .menu а добавили серый border-bottom. Подскажите, пожалуйста - как сделать border в 2 линии, чтобы сверху был серый бордер, а сразу под ним какой-нибудь белый (border-top), двойной в общем? Куда добавить border-top? Заранее благодарна
@beknazaromuraliev5680 5 жыл бұрын
спасибо за уроки вам
@adeptusCustodius 3 жыл бұрын
Годно! Спасибо!
@lilstrafe9446 4 жыл бұрын
Почему вместо overflow, вы использовали top: -9999em; ?
@user-fm1mv8fo4h 2 жыл бұрын
Класс!
@user-lv7zt4ol2p 8 жыл бұрын
волшебство)
@user-rz6xv8zt8n 7 жыл бұрын
Отличный урок. Скажите, а почему используете в названиях классов двойной слэш вместо обычного дефиса? В чем преимущество? Или это просто ваша привычка?
@artemkarbanovich 4 жыл бұрын
Круто!
@miffan7 8 жыл бұрын
Красавчик и музыка клас
@arayoflight 5 жыл бұрын
Спасибо, спасли мой дедлайн своим left: 100%; top: 0;
@user-wf5jv1me2b 6 жыл бұрын
Супер !
@charlesbaudelaire7454 7 жыл бұрын
Сними пожалуйста видео, где ты делаешь меню с использованием js и какие отличия между меню на CSS и меню на js, будет очень круто. За видео конечно как всегда лайк:)
@faust2134 4 жыл бұрын
Что значит отличия? Отличия в чем?
@gambit5586 8 жыл бұрын
Спасибо!
@huseyngadirov7658 8 жыл бұрын
Я думаю при наведении для анимации тега вправо вместо padding использовать translate. В этом случае браузер не будет пэйнтить, а всё произойдёт в composite layers. На десктопе это конечно не заметно, но на слабых мобилках FPS может проседать
@huseyngadirov7658 8 жыл бұрын
Да и спасибо за видео))
@user-hl2ud7rn6z 7 жыл бұрын
Молодец!!!
@romamyronenko 7 жыл бұрын
Подскажите пожалуйста, почему когда я выделяю отдельно transition и выбираю добавить префиксы то все работает, а когда весь код то не хочет работать?
@rinatkin7703 5 жыл бұрын
Классно
@Penamuky 8 жыл бұрын
При округлении углов и устранении нижней линии можно избежать извращений, удлинняющих код, если использовать не контекстные, а дочерние селекторы ссылок. .menu li:first-child>a {border-radius: 3px 3px 0 0;} .menu li:last-child>a {border-radius: 0 0 3px 3px; border-bottom: 0;}
@Saber8813 8 жыл бұрын
+Penamuky благодарю.
@Saber8813 8 жыл бұрын
+Penamuky и да , я пол часа ломал голову , где я в коде накосячил , прежде чем понял , что именно это и отменило ховеры))
@user-ml3cx4ju6w 5 жыл бұрын
Бывают случаи, когда в пункте находится один подпункт, тогда он будет в несколько "извращенном" виде. В таких случаях есть смысл добавить ещё одну строку кода: .menu__drop li:only-child>a {border-radius: 3px; border-bottom: 0;} что сделает один пункт со всеми скруглёнными углами без нижней границы
@chapaiNK 4 жыл бұрын
тоже хотел написать что слишком перемудрил с контекстными селекторами.
@user-iz7mx6cj9y 7 жыл бұрын
очень прикольно
@rainsky7942 8 жыл бұрын
Удачного развития каналу, хороший канал. Пока у вас только классные ролики!!! МОЛОДЦЫ!!! Я тоже снимаю видео, будет время забегайте!!!
@Nick.Zarembo 8 жыл бұрын
Делаю все как и у вас, но после добавления .menu__drop{ position: absolute; перестает работать, не могли бы скинуть на zarembo_nick@mail.ru исходники?
@HaldirKO 9 жыл бұрын
Здравствуйте. При наведении на "Пункт 1" его фон меняется на более светлый и появляется подменю. При наведении курсора на подменю цвет фона основного меню возвращается к исходному цвету.Как сделать чтобы пункт основного меню оставался выделенным при переходе уже в подменю?
@kirprog4176 5 жыл бұрын
Можно ли использовать z-index вместо того чтобы закидывать вверх подпункты? Будет ли это корректно?
@HaldirKO 8 жыл бұрын
Хороший урок
@vadymkean2405 6 жыл бұрын
А что это за дополнение такое, которое добавляет красивые иконки напротив файлов и показывает сетку в поле редактора?
@user-id6ur9sf8t 8 жыл бұрын
Отличный канал, ответили на мои давно волнующие меня вопросы. Это текстовой редактор Sublime ???
@CodexWeb 8 жыл бұрын
+Егор Эйхгорн brackets. На канале есть курс по этому редактору.
@CodexWeb 8 жыл бұрын
Подумаю над этим. Если время будет - заделаю. Сейчас совсем другие планы
@danilzavoloka4459 8 жыл бұрын
А зачем добавлять префиксы, и что это такое ?
@seirant 6 жыл бұрын
Спасибо
@akakich 6 жыл бұрын
У меня такой вопрос, мое выпадающее меню, должно иметь собственные видимые границы, следовательно, border-left я не могу прописать, (чтобы сделать отступ от Сайд-бара), как поступить?
@arTSTyLE1313 7 жыл бұрын
гениально
@user-wp4bb8ms8b 4 жыл бұрын
здравствуйте! а что бы сделать трёх уровневый мне надо добавлять новые классы?
@andrewvorobey 9 жыл бұрын
круто
@vip51000 5 жыл бұрын
Почему ты перестал снимать видео ? Ты же лучший
@alishertopsecret1358 7 жыл бұрын
гд ты научился делать такие ахуительные трюки
@user-bn3sc5hp8w 8 жыл бұрын
супер
@user-cn8fb2fg6f 7 жыл бұрын
Здравствуйте, не подскажите: как сделать так, чтобы выпадающий список всегда начинался там, где первый(самый верхний) пункт меню? Заранее спасибо!
@aliya9714 8 жыл бұрын
Здравствуйте , а как сделать чтобы вот в меню сначала они идут слева в низ , а потом в какой-то момент слева в вверх в css?
@AndrewSpeswe 8 жыл бұрын
При выводе подпунктов за пределы контейнера (top: -9999px;), transition отрабатывает только в одну сторону. Но если -9999 изменить на 0 или что-то очень близкое (главное, чтобы в рамках контейнера), тогда работает корректно. Но в этом случае мы цепляем курсором соседние подпункты и эти подпункты визуально прыгают. Ни смена времени в transition на вплоть до 40 секунд ни игра с свойствами transition-timing-function эффекта не принесли. Вопрос, как можно обойти эту ситуацию?
@sdsaasdasd4683 7 жыл бұрын
красава!
@waltas 8 жыл бұрын
Бог! :)
@microgames18 6 жыл бұрын
Хороший материал, но как его адаптировать, чтобы они было кликабельном на малых экранах? Спасибо!
@vadymkean2405 6 жыл бұрын
Просто нет слов, как долго ты всему этому учился?
@Jonlaut 9 жыл бұрын
Подскажите пожалуйста, что за префиксы вы имели в виду в конце видео и для чего они нужны.
@CodexWeb 9 жыл бұрын
Jonlaut префиксы нужны что бы часть старых браузеров понимала свойства. Для множества свойств они есть. В Brackets есть спец-плагин для автоматического добавления префиксов - kzfaq.info/get/bejne/ptRyis1irba-qGw.html
@karimnailevich 8 жыл бұрын
Подскажите пожалуйста, есть задача построить такое же меню, но не с самописными пунктами меню, а с категориями и подкатегориями товаров из virtuemart? Реально ли это сделать?
@user-ym9er3hk2f 7 жыл бұрын
а как можно меню выровнять по горизонтали а тут не помогает display: inline-block не хочет сотрудничать подскажите пожалуйста!
@comptech2011_ 7 жыл бұрын
Какой редактор используете в данном уроке?
@comex1 6 жыл бұрын
Скажи мне, пожалуйста, каким редактором ты пользуешься. Уж больно очень он мне понравился.
@user-rb4tf2ps1t 6 жыл бұрын
Это Brackets редактор
@user-bw2ue4vy5x 8 жыл бұрын
Магия css
@Ycidenis 8 жыл бұрын
где этому научится? знаю ксс и аштимель, но эт очень жестко! АРХИВАЖНО - есть ли плагин для живого просмотра на notepad++?
@LLuKKen 5 жыл бұрын
При применении position: absolute у меня все пункты подменю накладываются друг на друга...Почему так?
@musicbear303 5 жыл бұрын
почему если поставить изначально значение padding для А , то не работает .menu a: hover { padding ???? Вообще не двигаетсяю А именно нужно .menu a значение padding?
Frontend кейс
Рет қаралды 1,1 М.