BlogsEye.com
I'm keeping the technical articles here
for the time being.
eventually a right column

Stupid simple CSS/JavaScript horizontal drop down menu system

I needed a dumb menu system for a project at work and I came up with a stupid one. When I got a chance, I went back to it and worked on it for a while. I needed a system that would work well in most browsers. I needed it to be very simple without having to custom code each menu and sub menu. It had to be just two CSS classes, a container and a menu box. It had to be flexible so that in order to expand it, all I needed to would be to add another link.

I did my testing in Firefox and then when I went back to IE, it was always broken in un-nice ways. I started adding Internet Explorer specific pieces, but that was stupid. I eventually got it to work without any browser specific code.

Here is the css:

.mmm {
  position:relative;
  float:left;
}

.mmmInner {
  visibility:hidden;
  display:none;
  position:absolute;
}

It is simple stuff. I have a div that floats left and the inner menu that is hidden. These go in a div of their own so they stack up to the right. You need to style these a little with a width for each of the two DIVs so that they look pretty, but I took that stuff out.

The code for three columns looks something like this. You can add as many as you like, just cut and paste.

<div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 1<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 2<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
  <div class="mmm" onmouseover="bigg(this);" onmouseout="litt(this);">Title 3<br>
    <div class="mmmInner">
      line 1<br/>
      line 2<br/>
      line 3
    </div>
  </div>
</div>
<br>

The secret to the whole thing was adding the <br> after each the titles. This forced the hidden div to the left and made things work for both IE and Firefox. I've tested in IE 5, 5.5, 6 and 7. You need the last <br> at the bottom so new stuff clears the menu.

I just have lines, but you can make them links or text boxes or graphics.

Now the javascript. You can see that on the mouseOver and mouseOut that I am passing "this", which gives me the container div, but I need to change the stylings of the inner menu div to make it visible. I have a little DOM search routine that finds child class called mmmInner and returns it. This has not very elegant and I use a try catch so that it doesn't generate any warnings.

Here is the script:

function bigg(t) {
    var ttt=walker('mmmInner',t);
    ttt.style.visibility='visible';
    ttt.style.display='block';
}
function litt(t) {
    var ttt=walker('mmmInner',t);
    ttt.style.visibility='hidden';
    ttt.style.display='none';
}
function walker(classname,t) {
    // walks down the tree looking for a class name
    var cname=null;
    try {cname=t.className;} catch (e) {cname=null;}
    if (cname==classname) return t;
    var j;
    for (j=0;j<t.childNodes.length;j++) {
        var tt=walker(classname,t.childNodes[j]);
        if (tt!=null) return tt;
    }
    return null;
}

Now here it is with some stylin' to make it more obvious:

Title 1
line 1
line 2
line 3
Title 2
line 1
line 2
line 3
Title 3
line 1
line 2
line 3

If it works correctly, this text will be covered by the drop down (don't forget the <br>).

Make sure you give the div a background color.

Make sure that there is room to show the dropped down menu.

Bugs: In Internet Explorer 7, when the menu drops over an image the mouse moving over the links cause a flicker effect. I do not see this in plain vanilla pages, just when there is a background image.