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 c...
body, html {height: 1500px;}
#galeria {
background: red; /* Será un color que case con lo que haya en el último cuadro
*/
...
Ya tenemos establecidos los colores, pero todavía no parece funcionar.
Tenemos que a adir el efecto :hover que hará que su...
Finalmente os dejo todo enganchado para los más vagos. Sólo la parte del
body, el resto os lo tendréis que trabajar :)
<bo...
Próxima SlideShare
Cargando en…5
×

Smooth horizontal con css

200 visualizaciones

Publicado el

Código necesario para presentar un menú horizontal sin jQuery, sólo con html y css. Sin grandes pretensiones

Publicado en: Diseño
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
200
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Smooth horizontal con css

  1. 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. 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. 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. 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>

×