Complete Source Code for the Menu : Menu : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  GUI Components   » [  Menu  ]   
 



Complete Source Code for the Menu

Please note that some example is only working under IE or Firefox.


/*
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.  Not too fancy menu with toolbarHas Download File
2.  Custom Contextual Menu(content sensitive)
3.  Drop-Down Menus
4.  Menu with soundHas Download File
5.  Menu based on JavascriptHas Download File
6.  popup menu (content sensitive menu)
7.  Slide out menu
8.  Dynamic menu: fly in
9.  Menu and submenu
10.  Slide out menu with i18NHas Download File
11.  Menu: XP, win 98 styleHas Download File
12.  Simple drop-down menu example with layer
13.  Build a simple fancy menuHas Download File
14.  Add/delete menu itemsHas Download File
15.  Customizable layout: customize menu layoutHas Download File
16.  Vertical layout menuHas Download File
17.  Easy skinable menu with CSSHas Download File
18.  Menu Item propertiesHas Download File
19.  Direct link menuHas Download File
20.  Context menu: popup menuHas Download File








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.