|
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
|
navigation