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

Рет қаралды 206,003

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/

Пікірлер: 360

@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 жыл бұрын

а как называетца этот редактор?

@alexti6268 8 жыл бұрын

Ваши видео просто шедевры Screencasting -a! :))перестает хотеться что-то делать, просто хочется смотреть и получать удовольствие...)

@user-ed3db8ng2e 5 жыл бұрын

Ах.еть, нет слово, благодаря тебе я начинаю понимать как прекрасен CSS, спасибо Серега !

@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 жыл бұрын

Скажите пожалуйста что это за программа?

@user-fw9km4jl7m 2 жыл бұрын

Подробнее урока я за 10 видео ещё не увидел, спасибо тебе большое, очень сильно выручил, Дай Бог тебе всего наилучшего

@RomanKorostenskyi 8 жыл бұрын

Побольше б таких уроков. Нет ничего лишнего. Очень спасибо. Желаю успехов в творчестве ^_^

@fovsl7222 8 жыл бұрын

Все очень доступно и четко выложено. Отличные у вас уроки!

@Mykhailo_Vdovychenko 4 жыл бұрын

"Все гениальное - просто" и это правда. Прошел Ваш урок с удовольствием! Классно, интересно, познавательно.

@deomidfedorov1440 7 жыл бұрын

Давно хотел этому всему научиться, много полезного за минимальное время. Огромное спасибо :)

@Jay-pp4pk 7 жыл бұрын

Изящно и красиво, без всяких костылей. Получил удовольствие от просмотра.

@victoriabauer6344 7 жыл бұрын

Один из самых лучших уроков, спасибо!

@_Fantom_. 4 жыл бұрын

Это просто бомбезный урок, спасибо Серрега!...

@MicroDobb 7 жыл бұрын

сразу видно - работает профи!

@alexmac3938 8 жыл бұрын

все круто, четко и понятно!) и музыка на фоне - отличная!:))

@lincoln1484 4 жыл бұрын

Всё очень доходчиво, спасибо за урок

@user-le7hj9bj2j 8 жыл бұрын

Красавчик очень хорошо излагаешь материал!! Лайк подписка :)

@lancer-serega5346 8 жыл бұрын

Во Серега жжет! Быстро, грамотно, качество и по делу! Забрал к себе в группу ВК Для новичков тяжеловато будет смотреть и параллельно делать

@user-bq7ou7py7x 7 жыл бұрын

Не удивлюсь если ты просто всё съёбываешь у автора.

@user-yg8iz2dq5d 7 жыл бұрын

Шикарное видео, спасибо большое)) Респект автору!!))

@user-ir8nd6mj2b 6 жыл бұрын

Впервые на этом канале... Ну что сказать... *Лайк, подписка!* Даже не смотря видео)

@darkfateinc7333 7 жыл бұрын

Большое спасибо, очень качественный контент. Продолжай в том же духе.

@dst_01 7 жыл бұрын

Все четко. Подписался на тебя. Спасибо за твое время и знания.

@mexvision-3556 5 жыл бұрын

pointer-events: none; Делает элемент не восприимчивым для мыши. Зачем выносить блоки за экран?

@slava04111982 8 жыл бұрын

Огромное спасибо 🙏 за знания !

@kapotonai 6 жыл бұрын

Во дает!Действительно мастер!

@nikalastsk6275 8 жыл бұрын

Отличное видео ! Сейчас буду пробовать делать

@user-su3ef5cb8p 7 жыл бұрын

Классно =) быстро, просто, понятно и красиво =)

@user-ju8mq7il4x 6 жыл бұрын

Круто! То что искал,спасибо!

@maximsmirnov887 6 жыл бұрын

Спасибо мужик, ты крутой!)

@vahesargsyan7573 Жыл бұрын

Большое вам спасибо,классно помогли!!!

@user-xg6jy6wv7e 7 жыл бұрын

Пипец! Вот это я понимаю=) ,молодец, лайк и подписка,так держать!

@technique9940 4 жыл бұрын

Ну ты потный пацан, лайк и респект тебе за эту обучалочку, мой багаж знаний набрал обороты)))

@nohamster 7 жыл бұрын

Достаточно легко объяснено, лайк)

@4sARy 5 жыл бұрын

Лайк, подписка и колокольчик. На всё нажал, так ещё и другу видео скинул. Сейчас для пракитики сайт пишем. Обучаемся тому, чему нас не научили.

@vladimirberger2765 8 жыл бұрын

ОООО КРУТО)тоже такую буду делать)спс

@visherit7744 8 жыл бұрын

Спасибо, очень хорошо обьясняешь))

@skyfox9861 9 жыл бұрын

Очень круто!)

@slavalightning3002 5 жыл бұрын

все офигенно работает, спасибо!

@Goltizar 8 жыл бұрын

Полезные видео, очень доходчиво, спасибо. Подписался.

@rodionantonichev2412 7 жыл бұрын

Супер, крутое видео. Очень помогло.

@dublweb533 8 жыл бұрын

Ты в натуре мастер.

@MrMaxiik 7 жыл бұрын

Спасибо!) Очень помог )

@Nodorgrom 8 жыл бұрын

Молодец! Спасибо!

@personal3652 8 жыл бұрын

молодец, здорово донес инфу, я даже подписался, хотя редко подписываюсь)

@user-db5qk6jr4l 6 жыл бұрын

Офигительный урок, я с помошью него уже много чего сделал. ТОлько единственн не рабтает фишка с кнопкой таб

@mishasv1490 5 жыл бұрын

Отличный урок!!!

@user-wf5jv1me2b 6 жыл бұрын

Супер !

@kirillchemerys9261 8 жыл бұрын

Извините, а подскажите как сделать такое выпадающее меню только по горизонтали?

@user-pj5so5ek3x 8 жыл бұрын

Спасибо за урок)

@arayoflight 5 жыл бұрын

Спасибо, спасли мой дедлайн своим left: 100%; top: 0;

@toneant5675 6 жыл бұрын

Огромное спасибо!!!

@user-lv7zt4ol2p 8 жыл бұрын

волшебство)

@user-rz6xv8zt8n 7 жыл бұрын

Отличный урок. Скажите, а почему используете в названиях классов двойной слэш вместо обычного дефиса? В чем преимущество? Или это просто ваша привычка?

@NORTHSTAR103 7 жыл бұрын

Красавец, спасибо

@marinaamelina9079 8 жыл бұрын

Огромное спасибо за отличный урок. Подскажите пожалуйста - вы в .menu а добавили серый border-bottom. Подскажите, пожалуйста - как сделать border в 2 линии, чтобы сверху был серый бордер, а сразу под ним какой-нибудь белый (border-top), двойной в общем? Куда добавить border-top? Заранее благодарна

@beknazaromuraliev5680 5 жыл бұрын

спасибо за уроки вам

@artemkarbanovich 4 жыл бұрын

Круто!

@user-fm1mv8fo4h 2 жыл бұрын

Класс!

@adeptusCustodius 3 жыл бұрын

Годно! Спасибо!

@charlesbaudelaire7454 7 жыл бұрын

Сними пожалуйста видео, где ты делаешь меню с использованием js и какие отличия между меню на CSS и меню на js, будет очень круто. За видео конечно как всегда лайк:)

@faust2134 5 жыл бұрын

Что значит отличия? Отличия в чем?

@miffan7 8 жыл бұрын

Красавчик и музыка клас

@lilstrafe9446 4 жыл бұрын

Почему вместо overflow, вы использовали top: -9999em; ?

@user-id6ur9sf8t 8 жыл бұрын

Отличный канал, ответили на мои давно волнующие меня вопросы. Это текстовой редактор Sublime ???

@CodexWeb 8 жыл бұрын

+Егор Эйхгорн brackets. На канале есть курс по этому редактору.

@CodexWeb 8 жыл бұрын

Подумаю над этим. Если время будет - заделаю. Сейчас совсем другие планы

@rainsky7942 8 жыл бұрын

Удачного развития каналу, хороший канал. Пока у вас только классные ролики!!! МОЛОДЦЫ!!! Я тоже снимаю видео, будет время забегайте!!!

@gambit5586 8 жыл бұрын

Спасибо!

@user-iz7mx6cj9y 7 жыл бұрын

очень прикольно

@rinatkin7703 5 жыл бұрын

Классно

@danilzavoloka4459 8 жыл бұрын

А зачем добавлять префиксы, и что это такое ?

@user-bn3sc5hp8w 8 жыл бұрын

супер

@user-hl2ud7rn6z 7 жыл бұрын

Молодец!!!

@kirprog4176 5 жыл бұрын

Можно ли использовать z-index вместо того чтобы закидывать вверх подпункты? Будет ли это корректно?

@HaldirKO 8 жыл бұрын

Хороший урок

@HaldirKO 9 жыл бұрын

Здравствуйте. При наведении на "Пункт 1" его фон меняется на более светлый и появляется подменю. При наведении курсора на подменю цвет фона основного меню возвращается к исходному цвету.Как сделать чтобы пункт основного меню оставался выделенным при переходе уже в подменю?

@sketchturner8229 8 жыл бұрын

Хотел внести небольшую поправку, данная проблема появилась при реализации горизонтального меню сайта. Если в том блоке, где находится меню стоит overflow:hidden - все в порядке, но тогда меню обрезалось, и если убрать overflow:hidden, то свойство top:9999px растянет сайт на эту величину величину, мне помогло заменить top:9999px, на display:none и display:block, точно так же если навести на место выпадающего меню, то оно не будет появляться. Может кому поможет.

@romamyronenko 7 жыл бұрын

Подскажите пожалуйста, почему когда я выделяю отдельно transition и выбираю добавить префиксы то все работает, а когда весь код то не хочет работать?

@Nick.Zarembo 8 жыл бұрын

Делаю все как и у вас, но после добавления .menu__drop{ position: absolute; перестает работать, не могли бы скинуть на zarembo_nick@mail.ru исходники?

@user-bw2ue4vy5x 8 жыл бұрын

Магия css

@alishertopsecret1358 7 жыл бұрын

гд ты научился делать такие ахуительные трюки

@vadymkean2405 6 жыл бұрын

А что это за дополнение такое, которое добавляет красивые иконки напротив файлов и показывает сетку в поле редактора?

@karimnailevich 8 жыл бұрын

Подскажите пожалуйста, есть задача построить такое же меню, но не с самописными пунктами меню, а с категориями и подкатегориями товаров из virtuemart? Реально ли это сделать?

@andrewvorobey 9 жыл бұрын

круто

@microgames18 6 жыл бұрын

Хороший материал, но как его адаптировать, чтобы они было кликабельном на малых экранах? Спасибо!

@user-wp4bb8ms8b 4 жыл бұрын

здравствуйте! а что бы сделать трёх уровневый мне надо добавлять новые классы?

@emilhuseynov3993 8 жыл бұрын

Изначально хотелось бы поблагодарить Вас за очень познавательный урок. Спасибо Вам большое!!! Плиз, подскажите почему у меня не закругляются нижние углы меню (основного пункта), однако нижние углы подпункта закруглились. Не могли бы Вы подсказать где ошибка: .menu li:last-child a, .menu li .menu__drop li:last-child a{border-radius: 0 0 5px 5px; border-bottom: 0;} .menu li .menu__drop li a{ border-radius: 0;}

@AndrewSpeswe 8 жыл бұрын

При выводе подпунктов за пределы контейнера (top: -9999px;), transition отрабатывает только в одну сторону. Но если -9999 изменить на 0 или что-то очень близкое (главное, чтобы в рамках контейнера), тогда работает корректно. Но в этом случае мы цепляем курсором соседние подпункты и эти подпункты визуально прыгают. Ни смена времени в transition на вплоть до 40 секунд ни игра с свойствами transition-timing-function эффекта не принесли. Вопрос, как можно обойти эту ситуацию?

@vip51000 5 жыл бұрын

Почему ты перестал снимать видео ? Ты же лучший

@huseyngadirov7658 8 жыл бұрын

Я думаю при наведении для анимации тега вправо вместо padding использовать translate. В этом случае браузер не будет пэйнтить, а всё произойдёт в composite layers. На десктопе это конечно не заметно, но на слабых мобилках FPS может проседать

@huseyngadirov7658 8 жыл бұрын

Да и спасибо за видео))

@akakich 6 жыл бұрын

У меня такой вопрос, мое выпадающее меню, должно иметь собственные видимые границы, следовательно, border-left я не могу прописать, (чтобы сделать отступ от Сайд-бара), как поступить?