Creación de un menú tipo acordeón solo con css3

Gracias a CSS3 podemos crear cosas realmente atractivas para nuestros proyectos, hacer efectos que antes solo podíamos conseguir utilizando Javascript o Flash.
En este tutorial te enseñare a hacer un menú tipo acordeón utilizando solamente HTML y CSS3 para su atractivo funcionamiento.
Esto es lo que vamos a conseguir:

Bueno, manos a la obra.

Bueno, lo que tenemos en código anterior es. Un documento html5 con un enlace a una hoja de estilo, en el cuerpo tenemos lista <ul> con la clase menú, dentro de esa gran lista que tiene como elementos padres los <li> Templates, Tutoriales y Foro. Cada <li> principal tiene su sublista <ul> con sus respectivos <li> y sus respectivos enlaces <a>.

Ahora vamos con el CSS

Este css es muy intuitivo para seguir ya que es el clásico menú que tiene escondido los sub-ítems y se despliegan cuando situamos el mouse sobre el enlace, lo diferente acá son los efectos de transiciones de CSS3 cuando está en estado hover, los colores utilizando RGBA que le dan otro matiz ya que utilizamos opacidad y por supuesto, los text-shadow a los textos.

(para ver cómo funcionan las propiedades de css3 utilizadas en este tutorial, buscar por el tag CSS3)

Claro está, este menú lo podemos enriquecer muchísimo más, utilizando más propiedades de diseño de CSS3, pero eso ya te lo dejo a tu imaginación. Nos vemos en otro tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo