4. You have probably noticed questions on many Forums concerning the “z-index” levels of forms and animations that cover-up the Dreamweaver drop-down menus that are positioned directly above the forms and animations on a web page. And, if you take a look at the “writeMenus(container)” function in the external “mm_menu.js” JavaScript file, you will see why.


function writeMenus(container) {
...
<div id="menuLayer'+ countMenus +'" style="position:absolute;z-index:1;
left:10px;top:'+ (i * 100) +'px;visibility:hidden;color:' +
 menu.menuBorderBgColor + ';">\n'+ <div id="menuLite'+ countMenus +'" style="position:absolute;z-index:1;
left:'+ menu.menuBorder +'px;top:'+ menu.menuBorder +'px;visibility:hide;"
onmouseout="mouseoutMenu();"> ...

[z-index levels set in the mm_menu.js JavaScript file] Component 4


It is in that “writeMenus(container)” function where “div” tags are created, with the help of JavaScript, to act as the “containers” for the drop-down menus. And, as you can see above, the opening “div” tag for each of these “containers” has a “position” attribute-value of “absolute,” and is assigned a “z-index” level of “1.” That proximity within the drop-down menu's HTML code gives each “created” div's “z-index” declaration “precedence” over higher “z-index” levels that you might be tempted to set in the web page's HTML coding...such as inside of “button-image” links or “text” links...or in their surrounding containers.

Because of that proximity within the drop-down menu's HTML code of JavaScript “created” divs with the level “1” “z-index” declaration, the only way for you to stop another element from overlapping a drop-down menu's display area, is to either:

1 - Change the “z-index” level of the overlapping element, that must have been positioned as “absolute,” “relative,” or “fixed,” and had its “z-index” level set at “1” or higher, to a lower “z-index” level of “0” (or, remove whatever “z-index” styling declaration the overlapping element has associated with it altogether, to achieve the same result); or

2 - Increase the default “z-index” levels of “1” set in your external “mm_menu.js” JavaScript file to a level at least one higher than that of the overlapping element's highest “z-index” level setting.

[See this W3Schools.com web page for an explanation of “z-index” levels and element positioning.]

On this Example Page 4 web page, where the page's external “mm_menu.js” JavaScript file has its “z-index” levels set to the default value of “1,” and the “Freddie Spaghetti” image has a “position” attribute set to “relative” and a “z-index” level set at “1,” you will notice that each “button-image” drop-down menu (one placed above and one placed below the “Freddie Spaghetti” image on the web page—and also in the web page's HTML coding), will display behind the image. It does not matter if you declare either of the “button-images,” or their containing “a” tags, or their containing “div” tags as being “positioned,” and as having a higher “z-index” level than the “Freddie Spaghetti” image...the menus will still display behind the image.

You will notice that the second “button-image” in the “Example Page 4” HTML code has its “y” parameter set to “-20”:

[onmouseover="MM_showMenu(second_menu,40,-20,null,'image2');"].

This setting allows the second “button-image” to have its drop-down menu positioned above it on the web page, to accommodate the “Example Page 4” demonstration.

With the new-fangled animations that you see on web pages these days such as “jQuery” plugins, that are set to high “z-index” levels, the simplest way to stop Dreamweaver drop-down menus from being covered up by these animations is to set the “z-index:1;” levels in the “writeMenus(container)” function of the external “mm_menu.js” JavaScript file to a higher level—such as “z-index:100;.”

On this Example Page 5 web page, whose script is identical to that of “Example Page 4”—except for the “Example Page 5” page's external “mm_menu.js” Javascript file having its “z-index” levels set to “z-index:100;” (and because of that the file was renamed “mm_menu-z-index-100.js” for use with “Example Page 5”)—the drop-down menu will display on top of the “Freddie Spaghetti” image, as desired.


Further below on this page is the code for an “mm_menu.js” JavaScript file that you can “copy-and-paste” into your text editor, where it will assume the default “font-size” of your text editor and then be readable—should you wish to re-create any of the Example Pages linked-to from this tutorial, on your own computer.

For the Example Page code, do a “View Source” on any Example Page below, then “copy” the HTML source-code and “save” it as a file in your text editor, in the same folder as your “mm_menu.js” JavaScript file. The three “images” used in “Example Page 2” thru “Example Page 5” can be “saved” directly from any one of those example pages to an “images” sub folder.

Example Page 1 - Single drop-down menu - plain text (Page One)

Example Page 2 - Two drop-down menus - “location=” links (Page Three)

Example Page 3 - Two drop-down menus - Window “open()” Method links (Page Four)

Example Page 4 - Two drop-down menus - “positioned” image element - linked to “mm_menu.js” (Page Five, above)

Example Page 5 - Two drop-down menus - “positioned” image element - linked to “mm_menu-z-index-100.js” (Page Five, above)

The two “z-index” levels in the “mm_menu.js” JavaScript file below are set to “z-index:1;”—the way the file was originally written.

The “mm_menu.js” JavaScript file will work fine when linked to the first three “Example Pages” above, that have no “positioned” elements.

To create the “mm_menu-z-index-100.js” file used with “Example Page 5,” change the two “z-index:1” levels in the “mm_menu.js” JavaScript file below to “z-index:100;,” and then “Save” the file as “mm_menu-z-index-100.js” in the same folder that you placed your “Example Page 5” file.


To Top of Page

This page displays properly in Firefox 29.0.1, Google Chrome, and Internet Explorer-9 browsers.