Centered Web Site DHTML Drop Down Menu

 

Author: Greg Grasmehr

 

The nav bar below (and the contents of this page) are working examples of a cross platform/browser compliant, center justified web site implementing a drop down menu using absolute DTHML element placement. You can also use nested DHTML elements with relative placement, however doing this negates the ability to use a Z Index to place one element on top of another; a trick used in this example for easy cross platform compliance.

 

Using absolute placement for all elements eliminates the need for exteraneous JavaScript to test browser/OS combinations and make y adjustments based on the returned information. Instead we place the main navigational bar on a layer over the drop down menus using the z-index and then adjust the drop down menu content with an empty table cell, using a height of 20 in this instance.

 

This places the drop down menu under the main navigation elements providing a seamless border all around and leaving room for slight discrepencies on the y coordinate between browsers.
The navigational bar above is comprised of 5 rollover images and five drop down menus, two with transparent backgrounds and 3 with white backgrounds. The code uses a consistent naming convention for each graphical and DHTML element for easy replication into any page. For example consider the tags from Menu 3 below, implemented by rolling over navThree.gif:

 

1) Declares sub-menu (Menu 3) visibility based on mouse coordinates over main nav element navThree.gif.
<div id="navThree" onMouseOver="showDiv('navThreeMenu');" onMouseOut="hideDiv('navThreeMenu');">

 

2) Declares Nav 3's main URL link and image rollovers and sub-menu (Menu 3) visibility based on mouse coordinates.
<a href="#" onMouseOver="imgSwap('navThreeImg', 'img/navThree_over.gif'), showDiv('navThreeMenu');" onMouseOut="imgSwap('navThreeImg', 'img/navThree.gif'), hideDiv('navThreeMenu');"><img src="img/navThree.gif" width=142 height=20 border=0 name="navThreeImg"></a>

 

3) Closes navThree.
</div>

 

4) Declares Menu 3's (navThreeMenu) visibility based on mouse coordinates over the drop down menu.
<div id="navThreeMenu" onMouseOver="showDiv('navThreeMenu');" onMouseOut="hideDiv('navThreeMenu');">

 

5) Declares Menu 3's menu items and URLs.
<table cellpadding="0" cellspacing="0" border="0">
<!-- link #1 -->
<tr><td align="center" width="142"><a href="#">navThreeMenu1</a></td></tr>
<!-- link #2 -->
<tr><td align="center" width="142"><a href="#">navThreeMenu2</a></td></tr>
<!-- link #3 -->
<tr><td align="center" width="142"><a href="#">navThreeMenu3</a></td></tr>
<!-- link #4 -->
<tr><td align="center" width="142"><a href="#">navThreeMenu4</a></td></tr>
</table>

 

6) Closes navThreeMenu.
</div>
Use This Script

 

Use this script by copying the source code from <!-- Start cut here --> to <!-- End cut here --> and pasting it into your new document.

 

You can apply different styles and add or remove images/links by modifying code in the proper places.

 

X,Y coordinates are set from the top left corner of the page to the top left corner of each element.
To find the x coordinates for the first menu element we use the formula navOneWidth = ((((winW - dhtmlWidth)/2) + 0) - scrolladjust)
Thus navOne.gif's x,y coordinates are navOneWidth,290. Translating to DHTML coordinates left: navOneWidthpx; top: 290px.

 

We then find navTwo.gif's placement by adding the width of navOne.gif (142) to the formula.

 

navTwoWidth = ((((winW - dhtmlWidth)/2) + 142) - scrolladjust), thus navTwo.gif's x,y coordinates are navTwoWidth,290

 

navThreeWidth = ((((winW - dhtmlWidth)/2) + 284) - scrolladjust), thus navThree.gif's x,y coordinates are navThreeWidth,290

 

If we change only the width of navOne.gif to 120...

 

  • Then navThreeWidth = ((((winW - dhtmlWidth)/2) + 301) - scrolladjust)

    •  

    The same methods apply to the y coordinates though they are generally constant values.

     

     

    Styles used in navigation example:

     

     

    #navFour   < CSS assignment for layer navFour containing navFour.gif
    {
    top: 220px;   < declares element position based on the number of pixels from top of page
    left: "+navFourWidth+"px;   < declares element position based on formula
    width: 142;   < declares width of element - needed for cross platform display MacOS/IE 5
    position: absolute;   < declares that positioning is based soley on element itself and relative to the top left corner of the page: 0,0.
    z-index: 2;   < the z layer declaration, higher numbers are placed over lower numbers
    }

     

    #navFourMenu   < CSS assignment for layer containing drop down menu for navFour
    {:
    position: absolute;   < declares that positioning is based soley on element itself and relative to the top left corner of the page: 0,0.
    top: 220px;   < declares element position based on the number of pixels from top of page
    left: "+navFourWidth+"px;   < declares element position based formula
    background-color:#ffffff;   < declares background color of drop down menu
    width: 142px;   < declares width of drop down menu - needed for cross platform display on MacOS/IE 5
    border-width: 0px 1px 1px 1px;   < declares border width, top, left, botton, right - no top border needed
    border-style: solid;   < declares border style
    border-color: #02445E;   < declares border color
    visibility: hidden;   < declares that element is not visible on page load
    z-index: 1;   < declares that drop down menu will be placed under main nav bar element
    }
    End of Document