metal.ize

Siempre me han maravillado los menus que se conforman por cajas y, al pasar el mouse sobre ellas, puedes dar click y obtienes un bonito efecto :hover. El problema es que, el 90% de estas cajas son a base de javascript; lo cuál limita mucho nuestra accesibilidad. Hace tiempo que no veo este tipo de menús, por lo que me había olvidado completamente de ellos...

... hasta que, leyendo a The CSS Guy me encuentro con un tutorial que trata precisamente de esto; pero de nuevo, utiliza javascript (aunque es bien usado, y si está desactivado, no se compromete la accesibilidad; pero si el estilo). Me di a la tarea de crear mi propia versión de links en elementos de caja (osease, podrán aplicar esta técnica a cualquier div, li, p, etc.) aunque, de nuevo, no es lo mismo para todos los navegadores. Como siempre, les dejo el demo para que vean de qué trata antes de aventarse todo el tutorial.

En la entrada de menú circular les prometí que pondría un script en PHP que mantuviera la navegación actual. Con navegación actual me refiero a marcarle en el menú al usuario en qué sección está. En el ejemplo del menú circular la sección de mail es la que está activa, y por lo tanto está marcada diferente a las demás con un círculo verde a su alrededor y el tooltip desactivado. Todo esto se logra cambiando la clase del <a> de "menitem" a "menactive" y dando el estilo que queramos en el CSS. PHP puede cambiar esta clase automáticamente si agregamos un par de líneas a nuestro código.

Esta entrada también se la debo a aNieto2k que con su post sobre efectos :hover en algunos elementos me inspiró para crear un menu algo extraño. Quiza no sea del todo útil, pero fue un experimento interesante y me gustaría compartirlo con vosotros. Aquí está el ejemplo, por si quieren ver de qué trata antes de leerse todo esto.