jQuery y CSS

eXtreM3 #1 Dic '11

EDIT: todo esto está solucionado, pero tengo una nueva duda en #14

Buenas, tengo una dudilla y por no atrancarme mucho rato en esto prefiero preguntar, ya que el tiempo aprieta.

Tengo la siguiente estructura http://tmcreative.es/clientes/yoleescucho/

Ahora mismo al hacer clic en el logo, aumento el top del menú con jquery, así

$(document).ready(function(){
			$("#linkmenu").click(function(){
			$("#menu").slideDown();
				$("#menu").css({ top: "86px" });
			});
		});

Porque en el css le tengo puesto un -86 para que se esconda la parte que tiene que estar oculta de primeras. Entonces lo que quiero son dos cosas: la primera es que al hacer clic no aparezca toda la capa de golpe, sino que se deslice hacia abajo (rollo slideDown o slideToggle); y la segunda es que cuando esté desplegada, si vuelves a hacer clic se vaya hacia arriba deslizándose.

Creo que tiene que ser una chorrada, pero no estoy fino hoy xD

Ayuda pleaseeee! :si:

EDIT: todo esto está solucionado, pero tengo una nueva duda en #14

SiNSoNiDo #2 Dic '11 Gafe

A ver si esto te vale:

$("#IDDELBOTON").click(function(event) {
		$("#IDDELACAPA").slideToggle();
	});

1 respuesta

eXtreM3 #3 Dic '11

#2 no es eso, es que el slideToggle te muestra y oculta una capa, entera. Yo lo que quiero es deslizarla, porque si te fijas ahora mismo se ven unos 40 pixels (a ojo) y cuando despliegas se ven 160, de alto. Estoy leyendo que tiene que ser con la funcion animate de jquery, a ver si sirve.

SiNSoNiDo #4 Dic '11 Gafe

¿No sería más fácil tener en una capa separada la que quieres que se deslice para finalmente mostrarse? De inicio la pondrías oculta.

1 respuesta

eXtreM3 #5 Dic '11

Sí, claro que es más facil Toy gilipollas, voy a hacerlo así, de la otra manera no sé hacerlo animado , gracias por la idea xD Ara pongo el resultado final si eso.

scumah #6 Dic '11

Puedes hacerlo así:

var menuHidden = true;

$("#linkmenu").click(function(event){
    event.preventDefault();
    if (menuHidden) {
        $("#menu").animate({ top: "86px" });
        menuHidden = false;
    } else {
        $("#menu").animate({ top: "0px" });
        menuHidden = true;
    }
});

Pones una variable para saber si tienes que animar arriba o abajo y la cambias cada vez que haga falta. Mira esto: http://jsfiddle.net/ujnSZ/

1 respuesta

eXtreM3 #7 Dic '11

#6 uyy casi, he modificado un pelín tu código y ahora funciona perfecto.

var menuHidden = true;

$("#linkmenu").click(function(event){
    event.preventDefault();
    if (menuHidden) {
        $("#menu").animate({ top: "0px" });
        menuHidden = false;
    } else {
        $("#menu").animate({ top: "-86px" });
        menuHidden = true;
    }
});

(te habían bailao los números solamente xd)

Resultado final

lo de #4 también hubiera funcionado, pero así mucho mejor

Gracias a los dos!! :si:

5 respuestas

Tunnecino #8 Dic '11

#7 Por cierto, no se si lo has hecho así queriendo, pero en pantallas no panorámicas se come medio div del contenido xD

1 respuesta

xCoNDoR #9 Dic '11

#7 ha quedado bien

Desde dispositivos tactiles, puedes desplazar todas las secciones con el dedo pero el fondo se queda solo en la primera. Por si te interesa hacerlo multiplataforma..

El slider lo has hecho a mano o utilizando algun plugin ?

1 respuesta

X-Crim #10 Dic '11 Moderador Mario Kart

#7 muy guapo tio

BLZKZ #11 Dic '11

#7 yo no veo bien la pagina (chrome @1280x800)
El slider tiene como dos columnas, pues la de la derecha se corta y no veo todo el contenido XD

1 respuesta

Nucklear #12 Dic '11 BugHunter

#7 Yo lo veo así, supongo que es lo que dice todo el mundo, el bloque de la derecha se corta:

Por cierto podías poner algo que indicase que hay que clickear en la pestaña de YOLEESCUCHO para abrir el navbar. Una simple flecha debajo de las letras o algo que llame la atención podría ser bastante sutil y indicar que ahí se despliega la navegación. Por temas de usabilidad mas que nada.

Algo así hecho rápido y en paint:

Y el email de debajo ([email protected]) debería tener un enlace para hacerle mas cómodo al usuario enviar el email.

Solo ideas

1 respuesta

eXtreM3 #13 Dic '11

Gracias por las sugerencias a todos #9 #8 #11 #12 , lo que me pasaba es que la capa contenedora de los textos no se me centra horizontalmente :\ Está dentro de la section con un ancho de 1015px y margin auto y pasa de mí Cómo podría arreglarlo? Por eso se ve mal en resoluciones bajas.

#9 el slider pillé uno random de google y lo amoldé un poco

<script type="text/javascript">
        $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);

            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000,'easeInOutExpo');
            event.preventDefault();
        });
    });
</script>

http://tympanus.net/Tutorials/WebsiteScrolling/

eXtreM3 #14 Ene '12

Subo esto para no crear otro thread. En la web de #1 , por qué no puedo centrar el contenido de la capa section??? (la contenedora de las dos columnas). Le pongo margin auto y pasa de mi, será porque el contenedor tiene un ancho fijo? En cualquier caso, cómo lo soluciono?

EDIT: SOLUCIONADO

El problema estaba efectivamente en que la capa section tenía un ancho fijo. Ahora cojo el valor del ancho de la ventana del navegador con js y le aplico ese ancho a la capa. ^^

jQuery y CSS

Usuarios habituales

Tags