Menu criptografico | Oloblogger Este es un original menú interactivo, especial para páginas con temática criptográfica, crucigramística, juegoingeniosa... o simplemente par...

25 de diciembre de 2008

Menu criptografico

Este es un original menú interactivo, especial para páginas con temática criptográfica, crucigramística, juegoingeniosa... o simplemente para mostrar vuestros enlaces de una manera diferente.

El aspecto es el de una tabla con letras desordenadas, pero al pasar el puntero por encima de cada línea, las letras se reordenan y nos muestran el texto deseado.

Antes de escoger o descartar este tipo de menú y para no tener que hacer un esfuerzo de imaginación, mejor lo ves funcionando en este blog.



Lo mejor es que no requiere ningún SCRIPT y todo se hace con CSS. Para ello, lo primero que tenemos que hacer es crear las clases sobre las que luego nos apoyaremos para simular el efecto. Creamos una clase para listas, llamada SPY, le asignamos sus atributos y posteriormente creamos las subclases para cada una de las 11 celdas de cada fila. Llevarán una posición para su estado normal y otra distinta para el hover (cuando se pasa el puntero por encima). Todo ello, como cualquier código CSS, en Blogger hay que colocarlo antes del ]]></b:skin>

Ver/Ocultar CSS [+/-]

<!-- MENU CRIPTOGRAFICO -->
#spy {
padding:0;
list-style-type:none;
width:19.5em;
margin:2em auto;
}
#spy ul {
list-style-type: none;
}
#spy li {
list-style-type: none;
width:16.5em;
position:relative;
height:1.5em;
font-size:1.2em;
}
#spy li a {
text-decoration:none;
cursor:pointer;
}
#spy li a em {
font-style:normal;
color:#000;
display:block;
width:1.1em;
background:#eee;
position:absolute;
top:0;
text-align:center;
border:0.3em solid #000000;
}
#spy .a1 {left:13.5em;}
#spy .a2 {left:6em;}
#spy .a3 {left:7.5em;}
#spy .a4 {left:10.5em;}
#spy .a5 {left:15em;}
#spy .a6 {left:3em;}
#spy .a7 {left:1.5em;}
#spy .a8 {left:4.5em;}
#spy .a9 {left:9em;}
#spy .a10 {left:12em;}
#spy .a11 {left:0em;}

#spy .dk {background:#990000;}
#spy li a:hover {background:#ccc;}
#spy li a:hover .a1 {left:0;}
#spy li a:hover .a2 {left:1.5em;}
#spy li a:hover .a3 {left:3em;}
#spy li a:hover .a4 {left:4.5em;}
#spy li a:hover .a5 {left:6em;}
#spy li a:hover .a6 {left:7.5em;}
#spy li a:hover .a7 {left:9em;}
#spy li a:hover .a8 {left:10.5em;}
#spy li a:hover .a9 {left:12em;}
#spy li a:hover .a10 {left:13.5em;}
#spy li a:hover .a11 {left:15em;}


** ON Modo "Desaconsejado para lectores BTP"
Si necesitais más o menos cantidad de letras (celdas por fila), en primer lugar habrá que eliminar o añadir las subclases necesarias. Después lo más complicado, cambiar las distancias al margen izquierdo expresadas en EM. Si os fijais, vereis que se empieza en 0em y para cada cuadradito, se añade 1.5em. Sólo se trata por tanto, de crear tantas subclases como celdas nos hacen falta y luego utilizar todos los múltiplos de 1.5 desde 0em hasta (Num_celdas-1)*1.5 Uno a uno deben ser distintos para la subclase normal y para la correspondiente HOVER.
** OFF Modo "Desaconsejado para lectores BTP"

Posteriormente y ya para mostrar nuestro magnífico menú, insertamos este código dónde queremos que se muestre (post, sidebar, widebar, cabecera...)

Ver/Ocultar HTML [+/-]

<div align="center">
<ul id="spy">
<li> /*Principio fila uno*/
<a href="URL_enlace_fila_uno">
<em class="a1 dk">&nbsp;</em> /*Espacio blanco. Añadir dk a la subclase*/
<em class="a2">O</em> /*Letras una a una ordenadas*/
<em class="a3">L</em>
<em class="a4">O</em>
<em class="a5">B</em>
<em class="a6">L</em>
<em class="a7">O</em>
<em class="a8">G</em>
<em class="a9">G</em>
<em class="a10">E</em>
<em class="a11">R</em>
</a>
</li> /*Fin fila uno */
<li> /*Principio fila dos*/
<a href="URL_enlace_fila_dos">
<em class="a1 dk">&nbsp;</em>
<em class="a2">C</em>
<em class="a3">O</em>
<em class="a4">S</em>
<em class="a5">I</em>
<em class="a6">C</em>
<em class="a7">A</em>
<em class="a8">S</em>
<em class="a9 dk">&nbsp;</em>
<em class="a10 dk">&nbsp;</em>
<em class="a11 dk">&nbsp;</em>
</a>
</li> /*Fin fila dos*/
</ul>
</div>


No olvideis sustituir URL_enlace_fila_x por la dirección del enlace que quereis poner realmente.

Para cada fila a mostrar, un nuevo elemento li con sus 11 clases y listo. Aunque se apunta en el código, para mostrar un espacio en blanco, hay que añadir a la subclase (p.ej. a1), la denominación dk. Además, para evitar fallos es conveniente poner el código &nbsp; en lugar de un espacio con la barra espaciadora.

El resultado es juguetón, de esos que te quedas pasando el ratón arriba y abajo sin clicar... sólo por que te gusta.

La idea se la debemos a Stu Nicholls, de CSS Play, especialista en hojas de estilo y cuya página es una joyita, sobre todo para construir menús. Ya iremos explicando más trucos vistos en esa página.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

8 comentarios :

  1. Felices Fiestas y que tengas una buena entrada de año 2009.
    La entrada es muy interesante. Puede que lo pruebe en mi blog.

    ResponderEliminar
  2. ¡Hola Oloman! quería desearte una feliz Navidad, un Feliz año nuevo (que ya queda muy poco!!) y desearte que seas feliz, que sigas siendo tan buena persona como eres, bueno y por supuesto que los 3 blogs maravillosos sign siendo simplemente geniales ;) muchos saludos desde el balcón ;)

    ResponderEliminar
  3. Olomán:
    Gracias por tantas enseñanzas.
    ¡¡¡Feliz 2009!!
    Saludos
    Fali

    ResponderEliminar
  4. Gracias Jaime y Fali... ¡y Felices Fiestas!

    ResponderEliminar
  5. Hola Oloman, tu blog es genial!! Que pases buenas fiestas y feliz año nuevo!!!

    También te quería dejar una consulta:
    Quería llevar a cabo un menu con iconos como el que tu tienes debajo de la cabecera para luego aplicar el truco de la entrada de "iconos por categorias", he mirado tu código fuente y lo he aplicado en un widget con mis iconos de superlopez arrastrandolo despues abajo de mi cabecera pero en vez de salirme los botones en horizontal me salen en vertical hacia abajo,
    con seis o siete botones me funciona pero a la hora de querer poner dos lineas de 10 la cosa se complica, que puedo hacer?

    Te mando un email con el codigo que he usado uno en "div" y otro en "tabla" a ver si me puedes hechar una mano y decirme en que fallo.

    O quizás si lo prefieres puedes explicar en una de tus entradas como lo lograste tu jejeje.

    Gracias.
    --
    Juanjocostameler@gmail.com

    Mi blog es: juanjoespineli (el otro es de pruebas)

    ResponderEliminar
  6. Feliz 2009 y espero que nos sigas ilustrando nuestros blogs en el nuevo año.. gracias amigo..un abrazo

    ResponderEliminar
  7. Hey Oloman!! Yasta solucionado!! gracias a una entrada tuya sobre onmouseover y onmouseout he conseguido justo lo que buscaba, que pases buen fin de año!!!
    La prueba aquí: http://juanjoespineli.blogspot.com

    Feliz año nuevo!!! :D

    ResponderEliminar
  8. Feliz Año Espineli, te contesté en otro post, porque me dejaste el comentario en dos sitios ¿O quizás me lié yo? Bueno... no importa

    Hasta otra

    ResponderEliminar