Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Panel deslizante lateral con tamaño dinámico

Estas en el tema de Panel deslizante lateral con tamaño dinámico en el foro de Frameworks JS en Foros del Web. Estoy construyendo un menú lateral para un sitio web. El caso es que tengo un problema, pues estoy intentando hacerlo de forma que independientemente del ...
  #1 (permalink)  
Antiguo 28/04/2011, 11:36
 
Fecha de Ingreso: octubre-2006
Mensajes: 199
Antigüedad: 17 años, 6 meses
Puntos: 3
Panel deslizante lateral con tamaño dinámico

Estoy construyendo un menú lateral para un sitio web. El caso es que tengo un problema, pues estoy intentando hacerlo de forma que independientemente del tamaño del viewport mantenga una proporción.

El menú aparece desplegado al cargar la página y pasados 1000ms se esconde por la izquierda dejando 10px para que el usuario pueda verlo y hacer hover sobre este.

Mi problema es, creo, de sintaxis. Pues lo que me sucede es que consigo hacer que el menú dependiendo de su tamaño salga, pero no sé como pasarle correctamente la diferencia de pixeles cuando se redimensiona la ventana del browser. Pego el código que es posible que me explique mejor así:

Código PHP:
function setWidthNav() { 
    var 
navW = $('nav').width();
    
/*$('nav').css({ marginLeft: navWidth});*/
    
$('nav').delay(1000).animate({ marginLeftnavW*-1+10 },{queue:trueduration:500easing'easeInOutExpo'});
    
    $(
"nav").hover(function () {
     $(
this).animate({ marginLeft"+="+navW+"-10px" },{queue:trueduration:500easing'easeInOutExpo'});
     $(
"#wrapper").animate({marginLeft"+="+navW+"-10px" },{queue:trueduration:500easing'easeInOutExpo'});
  }, 
  function () {
    $(
this).animate({ marginLeft"-="+navW });
     $(
"#wrapper").animate({marginLeft"-="+navW });
  }
);
    
//alert(navW);    
}


$(
window).load(function () { 

setWidthNav();

});
$(
window).resize(function(){
setWidthNav();
}); 
Con este código lo que sucede es que cuando redimensiono la ventana una vez lanzada la función en mousenter/salida del panel funciona bien, pero cuando se dispara el callback del evento hover suceden cosas inesperadas. Además, al redimensionar la ventana del navegador el ancho de la navegación varía cambiando su valor (que es lo que pretendo) y los 10px que sobresale el menú llega a desaparecer dejándolo inservible.

Espero que pueda echarme alguien un cable con esto!

Muchas gracias como siempre! :)
  #2 (permalink)  
Antiguo 28/04/2011, 11:42
 
Fecha de Ingreso: octubre-2006
Mensajes: 199
Antigüedad: 17 años, 6 meses
Puntos: 3
Respuesta: Panel deslizante lateral con tamaño dinámico

Disculpas, me acabo de dar cuenta que he posteado en el foro dedicado a AJAX cuando quería hacerlo en jQuery...me puede mover alguien? Sorry!

Etiquetas: ajax, deslizante, lateral, panel, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:03.