Complete Source Code for the Menu
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript" language="JavaScript1.2">
<!--
// Check to see if this is a Navigator brower
if(navigator.userAgent.indexOf("MSIE") == -1){
alert("This menu is supported in Internet Explorer");
window.back();
}
// Declare global variables
var layer = new String();
var style = new String();
// Set the layer and style variables.
function checkBrowser(){
layer = ".all";
style = ".style";
}
// Take the state passed in, andchange it.
function changeState(layerRef, state){
eval("document" + layer + "['" + layerRef + "']" + style +
".visibility = '" + state + "'");
}
//-->
</script>
<style type="text/css">
<!--
/* Global styles */
a{
text-decoration: none;
}
/* Properties that sets the background of entire menu */
#menubar{
background-color: #c0c0c0;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Properties of the menus on the menubar */
#help{
background-color: #c0c0c0;
position: absolute;
right: 0;
top: 0;
}
#go{
background-color: #c0c0c0;
left: 0;
position: absolute;
top: 0;
}
/* Properties of the actual menus that are hidden until clicked */
#gomenu{
background-color: #c0c0c0;
left: 10;
position: absolute;
top: 20;
visibility: hidden;
width: 80;
}
#helpmenu{
background-color: #c0c0c0;
right: 10;
position: absolute;
top: 20;
visibility: hidden;
width: 80;
}
/* Properties of About Dialog box */
#about{
background-color: gray;
border: 2px solid black;
height: 50;
left: 100;
position: absolute;
top: 50;
visibility: hidden;
vertical-align: left;
width: 200;
}
-->
</style>
</head>
<body bgcolor="#ffffff" link="#000000" vlink="#000000" alink="#000000"
onload="checkBrowser()">
<div name="menubar" id="menubar"></div>
<div name="go" id="go">
<a href="javascript:void(0)"
onmousedown="changeState('helpmenu','hidden');
changeState('gomenu','visible')">
Go</a>
</div>
<div name="help" id="help">
<a href="javascript:void(0)"
onmousedown="changeState('gomenu','hidden');
changeState('helpmenu', 'visible')">
Help</a>
</div>
<div name="gomenu" id="gomenu">
<a href="http://developer.netscape.com">
DevEdge</a>
<hr size="1">
<a href="http://www.mozilla.org">
Mozilla.org</a>
<hr size="1">
<a href="http://msdn.microsoft.com">
MSDN</a>
</div>
<div name="helpmenu" id="helpmenu">
<a href="javascript:void(0)" onclick="changeState('helpmenu','hidden');
changeState('about','visible')">
About...</a>
</div>
<div name="about" id="about">
<table border="0">
<tr>
<td>
<img src="info-icon.gif" width="32" height="32">
</td>
<td>
This DHTML Menu was created by R. Allen Wyke for JavaScript
Unleashed.
</td>
</tr>
<tr>
<td colspan="2" align="right">
<form name="form1">
<input type="button" value="Close" onclick="changeState('about','hidden')">
<form>
</tr>
</table>
</div>
</body>
</html>
Related examples in the same category
