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

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Menu 
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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.