Cómo crear un menú estilo Twitter con CSS

Ahora con el pequeño rediseño de la interfaz de Twitter en su versión web se creó un menú mucho más curioso y útil que el que estaba anteriormente. En realidad no es gran cosa de hacer en unos cuantos minutos en HTML, pero el efecto que tiene es el que me llamó la atención.

Si se fijan el menú hace que aparezca una pequeña línea de color de abajo hacía arriba, un efecto que le permite al usuario saber dónde está posicionado el mouse y que como tiene transición pues hace que el efecto se vea muy bonito. Por eso en este tutorial vamos a ver cómo hacer ese mismo menú sólo con CSS, de forma tan fácil que verán que el efecto que hace Twitter no es más que un triste y sencillo efecto de unos cuantos minutos.

Demo del tutorial

HTML

Con respecto al HTML no hay mucho problema, es un menú típico con las opciones típicas, nada más.

CSS

La idea en el CSS es tener en cuenta que la capa que contiene todo el menú debe ocultar el overflow, de tal manera que teniendo una altura fija sea posible ocultar lo que tengamos abajo. Cada elemento tiene un borde inferior y se oculta por medio del padding, entonces para simular el efecto lo único que tenemos que hacer es tener un padding inferior al inicio, para que cuando el mouse esté sobre el elemento disminuyamos el padding y con eso se cree el efecto.