Dreamweaver Menus…A Solution, and Then Some

Tech-y post written for all the unfortunates who have suffered or are still suffering from the same problem I had….

Recently, I started working on part of a web-based application for a company over the summer, and me being:

1) A very visual person

2) Horribly inexperienced with Javascript, HTML, DOM, and the like..

I began using Dreamweaver (first 8, and then CS3) to help me create a series of dropdown menus, with an applet directly underneath the navigation bar. Almost immediately, I ran into the problem of my dropdown menus appearing behind the applet instead of in front. I scoured the web for many days, searching for a solution, and mostly what I found were suggestions to rearrange the page so that the menus simply wouldn’t drop down in front of something (an answer I found to be particularly frustrating), unanswered pleas for help often accompanied by insane and intimidating code posts (Dreamweaver’s drop-down menus come with a nasty-looking javascript file), or criticisms of Dreamweaver’s drop-down menus (and rightly so), with suggestions to go find a free one or follow some tutorials. I also fell upon Andy Finnell’s criticism of the menus, and you know it’s pretty bad when even the guy who had a part in developing part of the menus tells you not to use them.

Anyway. But let’s say that for some reason or another, you’re absolutely determined to use Dreamweaver’s menus–maybe you don’t care about the javascript file size or the code’s inefficiency–you just want some damn drop-down menus.

There’s a solution posted here, but the solution is only for Internet Explorer. (Many thanks to SDozono anyway!) Turns out the trick was to put an iframe (apparently they call this an iframe shim technique?) behind the menu, to force the menu to appear over things. Pretty spiffy. To have it working for Firefox, a few additions and changes have to be made:

In the checkIE() function, you can either change it so that it returns true for when Firefox is the browser in question, or just get rid of this function entirely (and deleting any calls to it in other parts of the code). To change it so that it returns true for Firefox:

function checkIE()
{
var BrowserName = navigator.userAgent;
if (BrowserName.indexOf("MSIE") > -1)
{
return true;
}
else if (BrowserName.indexOf("Firefox") > -1)
{
return true;
}
else
{
return false;
}
}

This is because SDozono’s shim-related methods run a check to make sure the browser is IE, or it won’t execute. Next thing to change is the writeShim() function:

...
if (BrowserName.indexOf("MSIE") > -1)
{
var shim = document.createElement ("<iframe id='"+shim_name+"' scrolling='no' frameborder='0'"+
"style='position:absolute;top:"+shim_top+"px;"+
"left:"+shim_left+"px;z-index:5;' width="+shim_width+" height="+shim_height+"></iframe>");
}
...

It turns out that IE and Firefox handle some DOM elements differently–or in other words, Firefox won’t allow you to pass in bits of HTML in DOM’s createElement() function, but for some reason, IE will. So underneath that if statement, try adding in:

else {
var shim = document.createElement('iframe');
shim.setAttribute("id",shim_name);
shim.setAttribute("scrolling","no");
shim.setAttribute("frameborder","0");
shim.setAttribute("style","z-index:5;position:absolute;width:"+shim_width+"px;
height:"+shim_height+"px;top:"+shim_top+"px;left:"+shim_left+"px;");
}

And that’s pretty much it. I won’t guarantee that this solution is perfect, so best to save a copy of your original work before trying this one. Hopefully, this will help some frustrated and lost soul out there..