From Wikipedia, the free encyclopedia
<html>
<head>
<title>Menu mock-up</title>
<style>
ul.popMenu {
/* important */
display: none;
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
z-index: 1000;
/* fluff */
background: yellow;
border: solid 2px red;
}
ul.popMenu li {
/* important */
padding: 0;
margin: 0;
list-style: none;
}
span.popArea {
/* fluff */
border: solid 2px blue;
}
</style>
</head>
<body>
<script>
function initialize() {
// set up mouseovers for popup menus
showMenu.menus=[];
var uls=document.getElementsByTagName('ul');
for (var i=0; i<uls.length; ++i) {
if (uls[i].className=='popMenu') {
var t=uls[i].previousSibling;
// locate immediately preceding popArea <span>
while (t.nodeType != 1 || t.tagName.toLowerCase()!= 'span' || t.className != 'popArea') {
if (!t.nodeType) {
// do something drastic here
break;
}
t=t.previousSibling;
}
t.popMenu=uls[i];
t.popMenu.popArea=t;
t.popMenu.menuIndex=showMenu.menus.push(t.popMenu) - 1;
t.onmouseover = function() { showMenu(this.popMenu); };
t.onmouseout = function() { menuMouseout(this.popMenu); };
t.popMenu.onmouseover = function() { showMenu(this); };
t.popMenu.onmouseout = function() { menuMouseout(this); };
}
}
}
window.onload=initialize;
function menuMouseout(menu) {
clearInterval(menu.popTimer);
menu.popTimer = setInterval( function() { hideMenu(menu); }, 500);
}
function hideMenu(menu) {
// only need one tick
clearInterval(menu.popTimer);
menu.style.display='none';
}
function showMenu(menu) {
// abort any pending hide
clearInterval(menu.popTimer);
// hide all other menus now
for (var i=0; i<showMenu.menus.length; ++i) {
if (i!=menu.menuIndex) { hideMenu(showMenu.menus[i]); }
}
menu.style.left=findPosX(menu.popArea) + 'px';
menu.style.top=findPosY(menu.popArea) + menu.popArea.offsetHeight + 'px';
menu.style.display='block';
}
// Straight from http://www.quirksmode.org/js/findpos.html
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>
<h1>test</h1>
blah
<span class="popArea">
splat
<a href="#">fooo</a>
test
</span>
<ul class="popMenu">
<li><a href="#">A</a> blah</li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
test test test test test test test test test test test test
<br>
test test test test test test test test test test test test
blah
<span class="popArea"><a href="#">foo</a></span>
<ul class="popMenu">
<li><a href="#">bar</a> <a href="#">baz</a></li>
<li><a href="#">quux</a></li>
</ul>
blah
</body>
</html>
