Inside Technique : WebFX DHTML Demos : DHTML Menus

In this demonstration, we show you how to create HTML-based menubars that have the same look like standard window menus but support HTML, swipe or dissolve animations, the ability to undock the menus and redock them to the top or bottom of your screen.

Before we discuss how to create and customize your own menus, try out a menu demonstration. When the page loads, you will find an extra menubar below your standard browser menu. Try expanding menu choices and undocking the menu. Once you are finished, click on the link, "DHTML Demo" to return to this page.

Creating the Menubar

The menu is created as a set of nested table similar to the InsideDHTML Menu Toolkit. The table is converted into a menubar using a specially designed stylesheet. All you need to do is define your table as follows as include the stylesheet and appropriate scripts (available at the end of this page), and you will have a fully functional DHTML menu:

<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. When creating your menus do not forget these event handlers or your menubar will not function correctly. In the table's first row, you need to specify the ID menubar. That is so the menubar won't be treated like standard menu items (more about this later). The root class is for defining each menubar item. Within each menu item another table will be nested.

The menus

Once you create your menubar, Now you need to create each menu choice. All menus are tables with class="menu". Inside the menu-table each table row (TR) is treated as an individual menu item.

<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 one <TR> element is used to specify a default action/location to navigate to when you click the menu item. Much of the time the HREF will be specified as a standard URL to another page, but you 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.

To force the specified href to display in another window, you can add the target attribute. 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 Sub-Menus

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 can just remove the handle from the menubar. If you wan't a moveable menubar, you need to do one additional step. Enclose your content within a div called outerDiv and add a call to the fixSize() function 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>

Following the script, you include your body content. After your content, include a closing div directly immediately 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:

<BODY SCROLL="no" STYLE="border: 0pt">

Gluing it all together

The best way to see how you get everything to work is to see the source code for one of the sample pages. The side image that is 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 is associated with a stylesheet that creates the grab handle.

Styling

I've made three different versions of this menu (All demos require IE4).

1. Windows 95/NT4 style with no animations at all. For this and all versions you need to menu.css and menu.js files. They need to be included in your document's header:

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

2. 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>

3. 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

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.