User:Lupin/Yurik menus

Menu mock-up 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; } 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 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; } test

blah splat fooo test  A blah B C  test test test test test test test test test test test test test test test test test test test test test test test test blah <a href="#">foo</a> <ul class="popMenu"> <li><a href="#">bar</a> <a href="#">baz</a></li> <li><a href="#">quux</a></li> </ul> blah