Slide vertical

eXtreM3 #1 May '11

Nass, cómo puedo hacer un slide de un texto (menú) hacia una galería de imágenes que a su vez es otro slide? Me explico:

La Home es un menú, tal que así:

Home
Nosotros
Contacto
X

Entonces, al pulsar sobre la X, todo ese texto se tiene que desplazar hacia arriba, y tiene que aparecer la galería de imágenes, con un ^, que si lo pulsas hace el mismo efecto pero al revés, se oculta la galería y vuelve el menú.

Se me ha ocurrido ponerlo por capas, en plan <div id="menu"> y <div id="galeria"> , llevándomelas parriba o pabajo en la pantalla según se pulse X o ^ (los vínculos)

El caso es que no sé cómo hacerlo, me echais un cablecillo?

SiNSoNiDo #2 May '11 Gafe

#1 ¿Algo así dices? http://www.stunicholls.com/menu/jquery-concertina-6.html

1 respuesta

eXtreM3 #3 May '11

#2 No, no quiero efectos para el menú, quiero un efecto para todo el contenido en general.

A ver, la Home es así

debajo del todo hay una X, que es un vínculo. Al darle, todos los elementos (pongámoslos en una capa) tienen que desaparecer, y entonces aparecer esto

que es la galería, que a su vez es un slide a pantalla completa, al darle a cada número la foto se desplazará hacia la izquierda y aparecerá la nueva desde la derecha.

Creo que ahora está mejor explicado.

Edit: por cierto, si aquí nadie pudiera ayudarme, sabeis de otro sitio donde pueda preguntar?? Necesito poder hacerlo cuanto antes... =(

EDIT 2: me vale cualquier tipo de efecto, que haga desaparecer el menú y que haga aparecer la galería.

catalon #4 May '11 Inocente

puedes deslizar hacia arriva un div modificando su margin-top y poniendolo negativo. Para que haga el efecto de deslizamiento hazte una funcion que reste al margin-top del div el numero de pixeles que quieres (ves provando y lo vas ajustando) y a esa funcion la vas llamando cada X tiempo en funcion de la velocidad que quieras. Luego para deslizarlo hacia abajo pues haces lo mismo pero sumandole al margin-top en lugar de restando.

h3-l105 #5 May '11

Mi consejo es que mires alguna libreria ya creada de jQuery (hay cientos) que se encuentran simplemente poniendo en google "jQuery slider" o para ser mas exactos "jQuery vertical slide". Suelen ser muy faciles de implementar y muy faciles de usar.

Puedes descargar jQuery desde h[url=ttp://blog.jquery.com/2011/05/03/jquery-16-released/]ttp://blog.jquery.com/2011/05/03/jquery-16-released/[/url]
En http://api.jquery.com/ puedes ver todos los efectos que vienen ya creados.

En general en http://jquery.com/ puedes encontrar toda la informacion que necesites.

Para aquellos que no sepan lo que es jQuery: http://es.wikipedia.org/wiki/JQuery

Creo que te valdrá pena echar un vistazo.

Un saludo.

eXtreM3 #6 May '11

Gracias, si con algo de jQuery se tiene que hacer. El tema es que no sé cómo.

Alguien me echa una manilla con el código? Tengo div menu y div galeria, solo necesito ocultar una y mostrar otra, con algún efectillo random xD

(la solución del margin-top no es viable debido a las distintas resoluciones, y aunque pudiera hacerse aplicando % no es viable)

En resumen, lo que necesito seria algo asi, en pseudocódigo:

SI hago clic en la X
    Ocultar div menu con algun efectillo
    Mostrar div galeria
SI hago clic en v
    Ocultar div galeria con el mismo efecto que antes
    Mostrar div menu

xDDDD soy pr0 haciendo pseudocodigos (/irony)

bLaKnI #7 May '11 Inocente

Vamos a ver.
Supongamos el vinculo de la X, se llama "poya", luego puedes hacer algo como:

$("a[name=poya]" ).click(function(){

...

});

O por ejemplo, supongamos que le das un id, poya:

$("#poya" ).click(function(){

...

});

O que le das un class poya:

$(".poya" ).click(function(){

...

});

O que es el único link de la página, ergo:

$("a" ).click(function(){

...

});

Si?

Ahora, los divs.
supongamos la galeria tiene id="galeria"
i el menu id="menu"

Luego:

$("a[name=poya]" ).click(function(){

$("#menu" ).slideToggle();
$("#galeria" ).slideToggle();

});

La gracia, es que previomaquetado, el menu será visible, y la galeria tendrá en style, la propiedad display:none;

Entonces el "slideToggle()", se encargará de que se alternen. Bien?

A grandes rasgos entonces:

<script language="javascript">

$(document).ready(function(){

$("#equis" ).click(function(){

$("#menu" ).slideToggle();
$("#galeria" ).slideToggle();

});

});

</script>

<div id="menu" style="display:none;">
...
</div>

<div id="galeria">
...
</div>

<a href="#." name="equis" id="equis">X</a>

I voilà.

Saludos.

PD: magnífico el DEV de turno de MV, que se le ocurrió hacer que " ) junto, fuera osea, guiño... vaya tela macho.

2 respuestas

eXtreM3 #8 May '11

#7 Gracias, algo así estaba barajando pero no me salía.

Lo malo es que tengo un problemilla que no consigo solucionar, dejo aquí el vinculo para que veas como va la cosa

http://www.tmcreative.es/clientes/mentidero/

Le he puesto bordes de 1 pixel a las capas para que diferencies cuales son.

La roja es el contenedor general del menú, es decir toda la capa que tiene que hacer el slide.

La verde es el contenedor de los elementos del menú, para que quede centradito.

Y después está la galería, que es contenedorGaleria.

Por qué al hacer clic en la X, la galería sale desplazada hacia la izquierda y las fotos no salen al 100% del ancho?? Es decir, tendría que desplazarse toda la capa roja y aparecer la galería al 100%, y que cada imagen ocupase el 100% por supuesto. Llevo toda la mañana trasteando cambiando cosas y no doy con la tecla, argg.

Ayudita please :qq:

Edit: el ancho con el que se muestran las imágenes es justo 1000px, y esa medida no está en ningún lado en el css :\

babri #9 May '11

#7 mételo en CODE y no sale el icono =P

Slide vertical

Usuarios habituales

Tags