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.  Application Menubar ExampleHas Download File
2.  [DOM Menu] :: Example 1 :: Horizontal MenuHas Download File
3.  [DOM Menu] :: Example 2 :: KDE Keramik Style MenuHas Download File
4.  [DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style MenuHas Download File
5.  [DOM Menu] Example 4: Vertical MenuHas Download File
6.  [DOM Menu] :: Example 5 :: Two MenusHas Download File
7.  [DOM Menu] :: Example 6 :: Flash HidingHas Download File
8.  Menu bar for an inner fake window
9.  Fly in Menu item
10.  Not too fancy menu with toolbarHas Download File
11.  Custom Contextual Menu(content sensitive)
12.  Drop-Down Menus
13.  Menu with soundHas Download File
14.  Menu based on JavascriptHas Download File
15.  popup menu (content sensitive menu)
16.  Slide out menu
17.  Dynamic menu: fly in
18.  Menu and submenu
19.  Slide out menu with i18NHas Download File
20.  Menu: XP, win 98 styleHas Download File
21.  Simple drop-down menu example with layer
22.  Build a simple fancy menuHas Download File
23.  Add/delete menu itemsHas Download File
24.  Customizable layout: customize menu layoutHas Download File
25.  Vertical layout menuHas Download File
26.  Easy skinable menu with CSSHas Download File
27.  Menu Item propertiesHas Download File
28.  Direct link menuHas Download File
29.  Context menu: popup menuHas Download File
30.  Black Menu
31.  Dropdown 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.