Jessett.com home  

dhtml

create a dhtml menu

home > dynamic html (dhtml) > create a dhtml menu navigation system

create a dhtml menu navigation system

The example below is based on the dhtml navigation menu system used on this web site, whereby when a user mouses over navigation links, a flyout menu appears (drops down).

the dhtml files

creating the dhtml menu

Create the html document and link in the css and JavaScript files by using the following in the <head> of the document:

<link rel="stylesheet" type="text/css" href="main.css">

<script language="JavaScript" type="text/javascript" src="nav.js"></script>

guidelines on creating the dhtml menu

examples of web sites using Jessett.com's dhtml drop down menu

Is your web site using our dhtml drop down menu? Email us and we'll add your link.

html

Web pages created using dhtml elements are saved as .html and have the same structural mark up as normal html pages.

The most common form of dhtml is the use of layers in the html. The cross-browser friendly version of this is to use the <div> (as opposed to browser specific <layer> or <ilayer>) tag to deliver dynamic content. These layers can be "hidden" and then "shown" on JavaScript events, such as "MouseOver". Layers can also be used to create overlapping effects and layouts or move along a time line to create animations.

The html for a text link to show a layer would look something like this:

<a href="/pagename.html" onMouseOver="hideAll(); showLayer('layer1'); stopTime()" onMouseOut="startTime();">link</a>

The layer and its content also needs to be described like this:

<div id="layer1">Content of layer here</div>

This needs to have css describe what the layer looks like and where on the page it will appear and JavaScript tell the browser when to show the layer.

To use this example of dhtml, the <body> tag will need to have onLoad="init()" added to it to make the page pick up the JavaScript function:

<body onLoad="init()">

n.b. To keep the html of the page concise, the best way to describe the layer content may be to have a separate html file linked into the main page as a server side include.

back to top

css

The css (style sheet) will tell the browser how to display the dhtml. In the case above, this would look something like this:

#layer1 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 135px;
top : 325px;
left : 262px;
position : absolute;
z-index : 90;
visibility : hidden;
}

  • The style sheet attributes for layers use the # to describe a layer name (<div id="layer1").
  • The "background-color" and "layer-background-color" are both necessary to counteract browser differences.
  • The border attributes can also be written "border: solid 1px #006666;".
  • The width, top and left tell the browser how many pixels wide the layer is, how far it is from the top and the left of the browser window.
  • Position is absolute and not effected by other html elements.
  • The z-index determines its relation to other layers. For example, a layer with a z-index of 2 will be placed on top of one with a z-index of 1. Having this set to 90 is an almost definite way to keep this layer always on top.
  • The visibility is set to "hidden" so that when the page downloads, the layer is not seen until the user "mouses over" the appropriate text link.

You will need to use your style sheet to apply formatting for how the text appears. More information about css. Download the css style sheet at the bottom of the page.

Back to top

javascript

The final aspect to dhtml is that of using JavaScript to determine dynamic interaction between the user and the content of the web site.

The JavaScript below tells the browser what to do when the user "mouses on or off" the appropriate links.

  • var timecount = 1000; tells the browser how many milliseconds to wait before switching the layer off after it's been moused over
  • function init() tells the browser what to do according to the version on Netscape or Internet Explorer.
  • window.status='Something to put in your status bar at the bottom of your browser'; - supply your own text here
  • function showLayer(layerName) tells the browser to show the layer
  • function hideLayer(layerName) tells the browser to hide the layer
  • function hideAll() tells the browser to hide all layers, all the layers associated with this dhtml example should be listed here - simply create new lines here for new layers
  • function startTime() tells the browser to return to the start of the js sequence
  • function stopTime() tells the browser to stop the sequence
  • function onLoad(){
    init();
    tells the browser, via the <body> tag to use this Js function.

View the complete JavaScript (opens a new window). Download the JavaScript at the bottom of the page.

back to top

extra tips and bug fixes

  • Don't have html named anchor links (<a href="#link">link</a> which corresponds to <a name="link">link</a>) that have the same name as a layer in your dhtml menu anywhere in your page
    • This breaks the dhtml menu

back to top

download files

The complete files can be downloaded in this .zip file, or individually (right click and Save As):

back to top