Jump to content

User:Lupin/Yurik menus

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>