El documento explica cómo crear un menú deslizable utilizando solo CSS. Se crea un contenedor principal que engloba cuatro cuadros con títulos. Se aplican estilos CSS para establecer colores de fondo, tamaños y transiciones al pasar el ratón. Al pasar el ratón sobre cada cuadro, este se hace más grande, y los demás se hacen más pequeños, creando un efecto deslizable sin necesidad de JavaScript.

1. Alguna vez habéis visto esos menús que conforme pasas el ratón se
expanden, dejando al resto más reducidos? Aunque no lo creáis, no hace falta
llegar a usar el jQuery para lograrlo y lo único que hay que tener en cuenta
es el CSS.
Hoy aprenderemos a jugar con los hijos!
Para que os hagáis una idea, os dejo esta demo de un menú hecho con
jQuery. El nuestro sería más sencillo visualmente, pero también a la hora de
hacerlo.
http://www.alohatechsupport.net/examples/image-menu-1.html
Por cierto, este recurso es descargable aquí:
http://graphicdesignjunction.com/2010/07/smooth-horizontal-slide-image-menu-
with-jquery/
Por qué usar CSS entonces? Bueno, hay veces que podemos necesitar un
efecto como este para algo no tan llamativo como un menú y tal vez ya
tengamos la página suficientemente cargada. Tal vez porque queramos
acabar rápido o tal vez porque es muy sencillo. Empezamos?¿
Vamos a hacer un menú a pantalla completa con 4 apartados, con un titular
cada uno. Así pues, lo primero que tenemos que hacer en nuestro html es
crear un div que englobará a los demás:
<div id="galeria">
<div class="cuadro"><p>Titular 1</p></div>
<div class="cuadro"><p>Titular 2</p></div>
<div class="cuadro"><p>Titular 3</p></div>
<div class="cuadro"><p>Titular 4</p></div>
</div>
Si queremos se puede complicar el tema introduciendo más elementos que
mostraríamos cuando nos conviniese, pero para hacer la explicación más clara
me decanto por poner sólo un título.
A continuación damos estilos, tanto al div#galeria como a los contenidos en él
y a la p que contiene el titular. Podéis cambiar detalles como tipos de letras o
colores:
Menú desplazable
Septiembre - 2013

2. body, html {height: 1500px;}
#galeria {
background: red; /* Será un color que case con lo que haya en el último cuadro
*/
height: 400px;
width:90%;
margin: 50px auto;
overflow: hidden;
}
#galeria .cuadro {
color: #000;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
height: 100%;
text-shadow: 2px 1px 3px #F3F3F3;
transition: all 0.5s ease-out 0s;
width: 25%;
width: 25%;
-moz-transition: all 0.5s ease-out;
/*Esta parte es necesaria para su correcta visualización en los navegadores*/
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#galeria .cuadro p {margin: 45px;}
Como habréis visto, lo único que he hecho ha sido establecer un color de
fondo (igual al que habrá en Titular4, porque hay un salto que quiero tapar),
una anchura, altura, tipos de letra y demás.
Lo único raro que hay es el efecto de transiciónque se aplica a todos (all) y“ ”
que dura medio segundo.
Hasta aquí hemos trabajado el aspecto general, ahora trabajamos los aspectos
de cada .cuadro
El selector nth-child(n) se refiere a los hijos del adyacente
independientemente del tipo. En este caso, se refiere a los divs dentro de
#galeria
n puede ser un número, una palabra clave, o una fórmula.
Uso de la fórmula (an + b). a representa un tama o de ciclo, en este caso,ñ
que hay cuatro cuadros, n es un contador (comienza a 0), y b es un valor de
desplazamiento. Así, le vamos diciendo que, de los cuatro, el primero es verde,
el segundo azul, el tercero amarillo...
#galeria div:nth-child(4n+0) {background: red;}
#galeria div:nth-child(4n+1) {background: green;}
#galeria div:nth-child(4n+2) {background: blue;}
#galeria div:nth-child(4n+3) {background: yellow;}

3. Ya tenemos establecidos los colores, pero todavía no parece funcionar.
Tenemos que a adir el efecto :hover que hará que sufran un cambio al pasarñ
el ratón por encima:
Este primero establece lo que le pasa a los cuadros cuando se hace hover en
la galería (no en uno de ellos) o sea, los que se quedan peque os:ñ
#galeria:hover .cuadro {
width: 15%;
font-size: 28px;
}
El siguiente establece lo que pasa cuando se hace hover en uno en concreto,
es decir, que se hace más grande:
#galeria:hover .cuadro:hover {
width: 55%;
color: #f3f3f3;
font-size: 60px;
text-shadow: 1px 1px 0 #444;
}
Y aunque no lo creáis, con esto ya funcionará. Sin links a archivos javascript
ni órdenes extra as... Es bastante sencillito.ñ
Si queréis profundizar en el uso de los hijos y algún que otro truco os
recomiendo visitar estas dos webs:
http://www.w3schools.com/cssref/sel_nth-child.asp
http://css-tricks.com/examples/nth-child-tester/#
La primera es más teórica y en la segunda podréis probar sobre fórmulas
establecidas para ver el resultado final. Luego es cuestión de adaptarlo a
vuestras necesidades...

4. Finalmente os dejo todo enganchado para los más vagos. Sólo la parte del
body, el resto os lo tendréis que trabajar :)
<body>
<div id="galeria">
<div class="cuadro"><p>Titular 1</p></div>
<div class="cuadro"><p>Titular 2</p></div>
<div class="cuadro"><p>Titular 3</p></div>
<div class="cuadro"><p>Titular 4</p></div>
</div>
<style>
body, html {height: 1500px;}
#galeria {
background: red;
height: 400px;
width:90%;
margin: 50px auto;
overflow: hidden;
}
#galeria .cuadro {
color: #000;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
height: 100%;
text-shadow: 2px 1px 3px #F3F3F3;
transition: all 0.5s ease-out 0s;
width: 25%;
width: 25%;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#galeria .cuadro p {margin: 45px;}
#galeria div:nth-child(4n+0) {background: red;}
#galeria div:nth-child(4n+1) {background: green;}
#galeria div:nth-child(4n+2) {background: blue;}
#galeria div:nth-child(4n+3) {background: yellow;}
#galeria:hover .cuadro {
width: 15%;
font-size: 28px;
}
#galeria:hover .cuadro:hover {
width: 55%;
color: #f3f3f3;
font-size: 60px;
text-shadow: 1px 1px 0 #444;
}
</style>
</body>