Menu drop-down after link - how about under link?

Medar · Aug 22, 2003

I have a script I am using that will drop a menu after a link you click. I am trying to modify it where it will actually drop it directly BELOW the link instead. <br> would not work because I can place this menu on any word in a paragraph, and it does not disrupt the flow of the paragraph (the menu opens over the page).

Any quick fixes to this? Thanks in advance, I am tinkering but having no luck.

The code is as follows, rather simple:

<a href="" onclick="Medar_menu.style.visibility = (Medar_menu.style.visibility=='visible' ? 'hidden' : 'visible'); return false;" onmouseout="if (window.event.clientX<=Medar_menu.offsetLeft || window.event.clientY<=Medar_menu.offsetTop) { Medar_menu.style.visibility = 'hidden'; }">
Test Menu!
</a>
<span id="Medar_menu" class="navSubmenu" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';">

<a class="navSubmenuLink" href="

http://www.link.com"

target="_parent"> • Link 1</a><br>
<a class="navSubmenuLink" href="

http://www.link.com"

target="_parent"> • Link 2</a><br>
<a class="navSubmenuLink" href="

http://www.link.com"

target="_parent"> • Link 3</a><br>

</span>

adam0101 · Aug 22, 2003

Use position:absolute in the style of the menu then position it at the coorinates of the lower left corner of the link. Here's an example:

<html>
<head>
<script>
function dropMenu(x,y){
m=document.getElementById("menu&quot

;
m.style.left=x;
m.style.top=y;
m.style.display='block';
}
function hideMenu(){
document.getElementById("menu&quot

.style.display='none';
}
</script>
</head>
<body>
<div id="menu" style="position:absolute;display:none;background-color:#CCCCCC;width:200px;height:150px;text-align:right">
<a href="javascript:hideMenu()">X</a>
</div>

<span onclick="dropMenu(this.offsetLeft,this.offsetTop+this.offsetHeight)" style="border:solid red 1px">Click Me</span>

<span onclick="dropMenu(this.offsetLeft,this.offsetTop+this.offsetHeight)" style="position:relative;left:100px;top:200px;border:solid red 1px">Click Me</span>

Adam

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Menu drop-down after link - how about under link?

Medar

MIS

adam0101

Programmer

Similar threads

Part and Inventory Search

Sponsor