Анимированное выпадающее меню на CSS3
Помните, одно время были популярны плагины для jQuery, которые реализовывали анимированные выпадающие менюшки? Да что говорить, и сейчас делают сайты с их использованием.
Но разница в том, что в наше время есть такая штука как CSS3 и браузеры все лучше и лучше ее поддерживают. Вот я и задался целью реализовать данный функционал без скриптов, только с помощью стилей, как это сейчас модно.
Хочу оговориться, что может кто-то и реализовал это до меня, но я таких примеров не нашел и, соответственно, не использовал их в своей работе.
Весь процесс разработки я описывать не буду, ограничусь лишь страницами, где черпал нужную информацию и освещением возникших трудностей.
Главным источником знаний для меня стала спецификация, где описаны свойства, используемые для выпадания меню и анимирования этого эффекта: CSS3 2d transforms и CSS3 transitions. Кроме соответствующего синтаксиса там есть очень полезная табличка со списком свойств, которые можно анимировать.
Однако, сразу не было понятно, какое из них можно использовать — большинство за 100% считают высоту родителя, тогда как нужно было знать о высоте текущего элемента. В результате изысканий решено было использовать свойство transform: translateY(), для тех браузеров, которые его поддерживают. В остальных браузерах меню не анимируется, а показывается моментально.
Так же в ходе работы у меня возникла проблема с тем, что Safari не хотел анимировать свойство visibility, хотя оно к этому пригодно, о чем говорит спецификация. Проблему решил анимацией через задержку, как это сделал один хороший человек.
Вот, вроде, и всё. Сам постараюсь использовать эту наработку в ближайшем проекте, где понадобится сделать выпадающее меню.