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({ marginLeft: navW*-1+10 },{queue:true, duration:500, easing: 'easeInOutExpo'});
$("nav").hover(function () {
$(this).animate({ marginLeft: "+="+navW+"-10px" },{queue:true, duration:500, easing: 'easeInOutExpo'});
$("#wrapper").animate({marginLeft: "+="+navW+"-10px" },{queue:true, duration:500, easing: '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! :)