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.
El problema (explicado)
Primero vamos a explicar bien el problema; y qué mejor que lo que el mismo CSS Guy ha explicado en su entrada. Lo que queremos es que una caja parecida a esta sea un hipervínculo:
Y claro, a su vez, debe ser compatible con la mayor cantidad de navegadores posible. Ahora bien, para codificar esa caja, nosotros pondríamos algo como esto:
¿Cierto? Pero no podemos convertirlo en hipervínculo, pues el elemento <a> es en línea (inline), y estos elementos no pueden contener elementos de bloque (llamese <h2> y <p>); por lo que esa idea queda desechada. Entonces ¿qué podemos hacer? El CSS Guy ha usado javascript, lo cuál funciona; pero si de casualidad tienes desactivado javascript (como yo); el estilo se perderá (pero sigues con acceso a la información). Además, y como verán en los comentarios de su entrada, el menú que normalmente obtendríamos al dar click derecho sobre un link no aparece. El método que propongo es un tanto más útil, sobretodo con los navegadores modernos (que cada vez adquieren más fuerza); pero sigue siendo accesible para usuarios con navegadores viejos.
Simplemente genial!
Bastante bueno el Menu, siempre nosdejas sorprendido con el Css, saludos!
keda genial! buen tuto
Mi hermano, déjame felicitarte, el tutorial está increíble y la solución es muy práctica. Sin duda la estaré usando un par de veces x) . Un gusto como siempre andar por aquí y viendo "caras" familiares
Hola! Acabo de descubrir tu blog y la verdad es que me ha encantado. Quedan muy bien los enlaces, pero sin duda, el tutorial que más me ha gustado ha sido el del menú CSS circular. Un saludo. Ciao
Mira que vemos aqui un aprendis mas de css, felicitaciones