Como comentamos en la entrada de nuestro blog, la idea es que aprovechando las propiedades de animación que proporciona CSS3 es posible duplicar efectos que hasta ahora confiábamos a librerías de JavaScript como jQuery o Mootools.
La animación de los menús desplegables se basa en pasar de una altura cero a la altura final del desplegable, añadiendo una duración a la transición, lo que en CSS se expresa así:
-moz-transition-duration:.3s;
-webkit-transition-duration:.3s;
-o-transition-duration:.3s;
transition-duration:.3s;
No obstante, hay que especificar una altura concreta para el menú desplegado, no simplemente height:auto.
Pues eso: sin necesidad de JavaScript, aunque con respecto a este tema recomendamos leer nuestras reflexiones.
FirefoxLa propiedad -moz-transition funciona en Firefox desde su versión 4. En versiones anteriores el menú simplemente se muestra de manera inmediata. La versión 5 aún no cuenta con soporte para la propiedad estándar.
SafariLa propiedad -webkit-transition funciona en Safari desde su versión 3.1 para escritorio, y desde la 3.2 en iOS Safari. Para las versiones anteriores el comportamiento es idéntico al de Firefox. Tampoco cuenta todavía con soporte para la propiedad estándar.
ChromeFunciona como los anteriores desde la versión 4.0, con el prefijo -webkit-. Sin soporte para la propiedad estándar.
OperaEl soporte de -o-transition se incluyó en la versión 10.5, pero la animación del desplegable no es tan fluida como en los navegadores comentados antes. Tampoco soporta la propiedad estándar.
ExplorerEn la versión 9 seguimos sin soporte para las propiedades de animación, pero el menú se despliega correctamente.