Why fixed? because we want to regard the menu as something on the screen, a fixed menu regardless of scrolling--or maybe we don't.

Now we've created a menu that pops up and keeps with the mouse, but does not keep moving while the mouse is over the menu (for clicking and selections to be made).

I think the clientX and clientY are the proper coordinates for fixed positioning in the window (the client).

Yes. And now I'm going to try to make it pop up on the left except if the mouse is at the left of the screen, when it shall pop up to the right. (And the same thing for the top of the screen, when it shall pop down from the mouse, and otherwise pop up.)

Now I'll put this positioning function into the script as a utility. Since this part is officially done, I'll also optimize as I go, and probably can fit it into a very few lines. This is always a smart move when making part of your script into a separate component, to make that component as efficient and easy-to-use as possible.

function pop(it) {
var x = e.clientX, y = e.clientY, l = parseInt(it.style.left)||0,
t = parseInt(it.style.top)||0, w = parseInt(it.style.width),
h = parseInt(it.style.height);
if (!(x > l-9 && x < l+w+9 && y > t-9 && y < t+h+9))
it.style.left = x < w ? '0px' : (x-w) + 'px',
it.style.top = y < h ? '0px' : (y-h) + 'px';
}

I'll use the intrinsic attributes of the mousemove event in the global variable e, so my other function can simply become:

document.onmousemove = function(a) { e = a || event; };

Each element of the popup menu which contains another element will then simply request "pop()" upon the element when triggered by the event. Before thinking of the behavior I'll need to define the menu. It will be a solid list without bullets and its width a specified size, and each item will be bordered. A directory item will display the sublist with the pop function. This directory item will be positioned specially within the link causing it to popup. It will be the nextSibling of the element. In fact, we can simply generalize the function call to be dir(this), where dir is defined as:

function dir(it) {
var a = it.nextSibling();
pop(a);
}

The dir items need to be defined with something like this:

ol.dir { list-style-type: none; position: fixed;
width: 100px; height: 200px; left: -100px; top: -200px; }

Then I need to implement a harvesting mechanism. Obviously, only one chain of menus can be open at once, so we can simply do menu as our variable. The menus themselves will only have an onmouse

blah!

Let me write lots of paragraphs. Let me take off my shoes because they are dirty and spiders are in them, and on my legs.