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>
Complete Source Code for the Menu : Menu : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Menu »

Complete Source Code for the Menu

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
