Jquery: Help with menu items

jquery offset

[gonny]

Hi all,

I'm trying to make a menu with jquery and I create some function but not work as I want.
Js file:

function EBID(k)
{
return(document.getElementById(k));
}
function hideMailMenu(e)
{
var mailMenu = EBID('mailMenu');
mailMenu.style.display = 'none';
}
function showMailMenu(e)
{
document.onmouseup = hideMailMenu;
var mailMenu = EBID('mailMenu');
mailMenu.style.left = e.clientX + 'px';
mailMenu.style.top = e.clientY + 'px';
mailMenu.style.display = '';
}

HTML:

<a href="#" onclick="showMailMenu(event);"> Menu option</a>
<div id="mailMenu" class="mailMenu" style="display:none;position:absolute;left:0px;top:0px;"> 
some items
</div>

The problem:
when I click appear not aligned above the link.

The problem seems to be line of code:

mailMenu.style.left = e.clientX + 'px'; 
mailMenu.style.top = e.clientY + 'px'; 

How get the correct offset top and left?
Has anyone familiar with jquery :) ?

[whoisgregg]

Hello gonny,

Sorry you haven't received a response to this. Have you gotten this sorted out? If not, perhaps you could give more detail about where the menu is incorrectly appearing. Right now, using e.clientX and e.clientY will cause the menu to be positioned where the user clicks the mouse.

If you want the menu positioned based on the location of the link itself, you'd have to get the position of the <a> element, not the mouse click.

[daveVk]

Try using e.pageX and e.pageY [docs.jquery.com...]