Red Spirit

Блог Алексея Таянчина

RSS 2.0

Анимационное многоуровневое меню на CSS3

В недавнем посту я показывал как можно сделать многоуровневое меню на одном только CSS без применения скриптов. Получилось не плохо и в целом функционально, но не хватало некоторой красивости. Сейчас я покажу как с помощью современного CSS3 можно придать этому меню более красивый градиентный вид и придать эффект анимации, все это без скриптов и картинок, только одни стили.

Посмотреть демо

Следует сделать оговорку, что не во всех браузерах эти эффекты будут работать. Последние версии Chrome, Opera и FireFox работают как надо, а IE9 уже не хочет справляться с градиентом и анимацией, но это не смертельно. Пользователи со старыми браузерами скорее всего и не заметят того, что этому меню чего-то не хватает, главное, что оно разворачивается и реагирует на клики.

Ключевой момент в анимации играет свойство transition, оно принимает ряд значений, которые показывают какие изменяемые свойства стилей должны изменятся с применением анимации и характер этой анимации (длительность изменения и характер изменения (линейный, с затуханием и тп). Другими словами, к примеру, если у элемента было высота 10px, а потом с помощью псевдокласса :hover мы переопределили ему высоту в 100px, то высота изменится не мгновенно, а с указанной анимацией, то есть возникнет эффект разворачивания. Если правило hover перестанет действовать (юзер уберет курсор с элемента) то произойдет обратное действие, элемент свернется до 10px.

Разметка использовалась в точности такая же как в прошлом посте создания меню на css. Тут добавлены и изменены только некоторые стили.

HTML:

CSS:

  • Pingback: Многоуровневое горизонтальное меню на чистом CSS | Red Spirit

  • RS13

    Крутое меню и только на CSS. Спасибо!!!

  • krakoss

    Отлично реализовано

  • Fhoenix

    Подскажите, как превратить его из горизонтального в вертикальное. Самому не получается, знаний не хватает!

  • Dunaevsky Maxim

    Два чая этому господину! Никакого сложного JS, только CSS и HTML! Вот то, что нужно!

  • Юлия Давыдова

    Спасибо! Очень помогло это меню!