tl; dr: (pruébalo aquí )
Si tiene el siguiente HTML:
<div id="menu" style="display: none;">
<!-- menu stuff in here -->
<ul><li>Menu item</li></ul>
</div>
<div class="parent">Hover over me to show the menu here</div>
entonces puede usar el siguiente código JavaScript:
$(".parent").mouseover(function() {
// .position() uses position relative to the offset parent,
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#menu").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
});
¡Pero no funciona!
Esto funcionará siempre que el menú y el marcador de posición tengan el mismo desplazamiento principal. Si no lo hacen, y no tiene reglas CSS anidadas que se preocupan por el #menu
elemento DOM , use:
$(this).append($("#menu"));
justo antes de la línea que posiciona el #menu
elemento.
¡Pero todavía no funciona!
Es posible que tenga un diseño extraño que no funciona con este enfoque. En ese caso, solo use el complemento de posición de jQuery.ui (como se menciona en una respuesta a continuación), que maneja cada eventualidad concebible. Tenga en cuenta que tendrá que ir show()
al elemento del menú antes de llamar position({...})
; El complemento no puede colocar elementos ocultos.
Notas de actualización 3 años después en 2012:
(La solución original se archiva aquí para la posteridad)
Entonces, resulta que el método original que tenía aquí estaba lejos de ser ideal. En particular, fallaría si:
- el padre desplazado del menú no es el padre desplazado del marcador de posición
- el marcador de posición tiene un borde / relleno
Afortunadamente, jQuery introdujo métodos ( position()
y outerWidth()
) en 1.2.6 que hacen que encontrar los valores correctos en este último caso sea mucho más fácil. Para el caso anterior, funciona append
el elemento de menú para el marcador de posición funciona (pero romperá las reglas CSS basadas en el anidamiento).