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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter