User:Lupin/Yurik menus
Appearance
<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>