Crear un menú-logo sencillo con CSS3

Para un proyecto se me ocurrió combinar un logotipo con un menú, ya que no tenía suficiente espacio como para andar poniendo un logo y debajo el menú, así que decidí hacer un pequeño menú en el que se ocultara el logo para mostrar el menú y viceversa.

Entonces, en este tutorial vamos a ver como implementar un menú-logo sencillo con CSS3, que obviamente tiene el plus de que las animaciones son independientes, es decir, el logo se mueve a una velocidad, y el menú a otra, entonces no es cómo qué solamente todo se oculte, sino que es asíncrono, y luce bastante bien.

Demo del tutorial

Dificultad del tutorial: medio

HTML

El HTML es una capa donde dentro tenemos nuestra lista. Chequen que el link cubre la viñeta, para que el link ocupe todo el ancho automáticamente.

CSS

Para el CSS empezaremos con un color de fondo, y la definición de nuestro menú si se fijan es fixed y con un alto del 100% para que aunque no se acerque el mouse al logo en esa parte aparezca automáticamente el menú también.

Colocamos el logo como fondo y añadimos un transition para que todo lo que cambie se vea animado.

Para que se vea mejor la animación vamos a animar la lista también, configuramos algunos estilos para que no se vea como lista y le añadimos un transition también para que se animen los cambios que sufra la lista.

Ahora, definimos que cuando el mouse esté sobre el menú el logo se despliegue, por eso  jugamos con la posición del fondo, para moverlo y que se muestre, ya que originalmente está oculto.

Y bueno, ya por último detalles para darle un buen toque a la lista, como margen, color a links y colores de fondo cuando se posiciona el mouse sobre una opción. Si logramos todo esto ya deberíamos tener nuestro sencillo menú que se aparece cuando desaparece el logotipo.