| 
     
 
 
/* 
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> 
 
            
        
    
    |