Complete Source Code for the Menu : Menu « GUI Components « JavaScript DHTML






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

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.popup menu (content sensitive menu)
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu