The DHTML Menu

Updated: 990323. Fixed the menu for IE5
Updated: 990118. Added a feature so that all windowed controls are hidden while showing the menus
Updated: 981010. Added a sample to show how to reuse menus using javascript
Updated: 980726. There are lot of updates here. Differnet animation styles and a folder that shows your local Favorite menu.
Updated: 980722. Add the ability to target different frames and windows.
Updated: 980605. Changed all display to visibility! Credits goes to Monica Lyra

This toolbar only works with Internet Explorer 4.0

Try moving the menu by dragging the handle! Also try docking the menu at the bottom.

This menu was created using standard HTML4.0, CSS and Javascript (the DOM for IE4). To use it include the js file and the css file in your <HEAD> tag like this:

<link rel=stylesheet href="menu.css" type="text/css"> <script language="Javascript" src="menu.js" type="text/javascript"></script>

Then you need to build your menu. It basically is a <TABLE> with nested tables inside for submenus. The easiest way is to copy the code on this page and then edit the menu but if you wan't to build it from scratch here is what you do:

The menubar

Start with an outer table that is actually the menubar

<table id="menu" cellspacing="1" onselectstart="return false" 
onmouseover="menuOver()" onmouseout="menuOut()" onclick="menuClick()">
   <tr id="menubar">

      <!-- This is a handle. Grab this -->
      <td class="disabled" style="padding-left: 0; padding-right: 1"><div class="disabled" id="handle" for="menu" style="left: 3; width: 3; height: 100%" title="Move me!"></div></td>
      <!-- End of handle -->

      <td class="root">Demo
      </td>

      <td width=100% class="disabled"> </td> <!-- Needed to fill out the menubar -->
   </tr>
</table>

The menu id is for defining the menu and this include catching of mouse events inside the menu
The menubar is for the menubar sa that it won't be treated as a menuitem (more about this later)
The root is for defining that this is a button that opens a menu (the root td contains another table...)

The menus

Now you need to create your menu. All menus are tables that has the class="menu". Inside the menu-table all table rows (TR) are treated as individual menu items

<td class="root">Demo
   <table cellspacing="0" class="menu" style="visibility: hidden;">
      <tr href="http://put.your.link.here">
         <td><!-- Put your image icon here --></td>
         <td nowrap>This is your first menu item</td>
         <td><!-- This is here to create space for the arrow for subs --></td>
      </tr>
   </table>
</td>

The href in the <TR> is the default action/location that is executed when you click the menu item. remember that yo can use href="javascript:foo()" to execute a function. The style="visibility: hidden" is needed so that the menus are hidden until you show them. You can also add the attribute target to open the link in another window. If no target is present it takes the target from the <BASE> tag in the head. If no base tag is available the link will open in current window.

The subs

To create a submenu you create a menu item (<tr>) that has the class="sub" and inside the last <td> you add a new menu (<table class="menu">). Here is an example:


<tr class="sub">
   <td nowrap>The sub opener</td>
   <td><span class="more">4</span>
      <table class="menu" style="visibility: hidden" cellspacing=0>
         <tr>
            <td>This is a sub</td>
         </tr>
</table>

If you want to use the arrow that indicates the sub you should include the <span class="more">4</span>

Docking

If you don't want a moveable menubar you could just remove the handle from the menubar

But if you wan't a moveable menubar you need to enclose your content with a div called outerDiv and you should call the function fixSize() directly after the the table that defines your menu. Include this directly after your closing table tag:


<div id="outerDiv">

<script language="Javascript">
   fixSize();
</script>

You should also include a closing div directly before the end of the body (</body>). To make it blend with the IE4 toolbar you should remove the border from the body. This is done by adding style="border: 0" in the body tag. You should also remove the scrollbar of the body because the outerDiv div has a toolbar. This is done by adding scroll="no" to the body tag

Glueing it all together

The best way to see how you get everything to work is to see the source code for this page or the simplified demo page. The side image that I've used in the menu is added by an extra column (TD) in front of the others that has colspan=99 (some value bigger than or equal than the number of menui tems in the menu. It has the picture as the background

Styling

I've made three different versions of this men.

Windows 95/NT4 style with no animations at all.
Windows 98 version with rolldown animations. To use this you also need to include a file that handles the animations.
```
<script type="text/javascript" src="swipe.js"></script>
```
NT5 version that fades the menus. To include this file you also need to add the fade library.
```
<script type="text/javascript" src="fade.js"></script>
```

Note that the animation has been moved to seperate files for ease of use. For the menu to work you need only the menu.js file but if you want any of the animations you need to include on as well. If you include both the fade verion has higher priority

File Menu

This sample uses the FileSystemObject (marked as unsafe because it allows the script to do read files from the users hard drive. It first looks up your name of your favorite folder and then it loops over all files and folders and generates HTML for this menu

Follow this link to view the File Folder

Author: Erik Arvidsson