Hola, estoy trabajando con un menú desplegable que podéis ver
aquí. Me encuentro con dos problemas relacionados con jquery.
PRIMERO
En principio el menú está centrado en la página, en
$(document).ready hago unos cálculos para que la parte derecha se extienda del todo hasta el borde de la página. Como veis se queda a una pequeña distancia del borde, según el tamaño de pantalla que tengáis a lo mejor teneis que hacer un poco de scroll horizontal para verlo.
Los cálculos que hago son:
A) Calculo la posición izquierda del menú
B) Determino el ancho de la pantalla
C) Calculo el ancho deseado del menú como B-A
Código Javascript
:
Ver originalvar posicion_absoluta_menu = $('#divNavegacion ul.menu-navegacion').offset().left;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = $(document).width();
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth
}
ancho_deseado_menu = viewportwidth-posicion_absoluta_menu;
Entiendo que alguno de los cálculos se deja un padding o margin o algo así. Me gustaría obtener valores EXACTOS. (por cierto, antes calculaba el ancho de la pantalla con jquery, pero el resultado era peor en algunos navegadores)
SEGUNDO
El menú funciona con CSS hover, pero quiero suavizar el efecto de despliegue y para ello asigno unos eventos hover a las entradas de menú, pero no funciona siempre, lo más normal es que cuando entras en la página, la primera vez que pasas por el menú funciona el efecto suavizado, pero las siguientes veces no se suavice, parece que solo va por el CSS hover.
Código Javascript
:
Ver original//Modifica el evento over para suavizar el despliegue del menu
$('#divNavegacion ul.menu-navegacion li.entrada-menu').mouseover(function()
{
id_entrada = '#'+$(this).attr('id');
//Si tiene submenu...
if ($(id_entrada + '>ul.submenu').length>0)
{
$(id_entrada + '>ul').animate(
{height: '22px'},
"slow");
}
}
});
¿Sabéis por qué puede ocurrir esto?
Gracias