DHTML Menu 3 (WebFX)

Menu Bar

This page describes how to create a menu bar and then shows how to make it appear as it is a part of your browser interface.

Defining the Menu Bar

First you create a container (HTML element) with the class name set to menuBar. To this you should also add event handlers for onmouseover, onmouseout and onclick. Inside this element you add the root elements of the menus and these are any type of HTML element with the class set to root. Inside the root element you can either have a nested table that defines the menu or you can add the attribute menu to the root element. A simple menu bar looks like this:

<span class="menuBar" id="menuBar"
   onmouseover="menuBarOver()"
   onmouseout="menuBarOut()"
   onclick="menuBarClick()">
   <span class="root" menu="fileMenu">
      File
   </span><span class="root">
      Edit

      <table cellspacing="0" class="menu">
      <tr class="disabled">
         <td></td>
         <td nowrap>Empty</td>
         <td></td>
      </tr>
      </table>
	
   </span><span class="root" menu="WebFXMenu">
      WebFX
   </span>
</span>

Note that you probably don't want any significant white spaces between your root items. The root items takes an optional attribute called direction that is either horizontal or vertical (default) that represents where to display the menus. This is useful if you want your menu bar on your left or right side.

Fix the layout

The menu bar above is functional as it is but to make it look more like the browser's menu bars you need to add some more code. The first step is add a container for the rest of the page. You should also remove the scroll bars from the body element and cancel the onselectstart event. Once this is defined it is safe to call a function that fixes the layout of the page.

<body scroll="no" onselectstart="return false">

   ...Define the menu bar...

    <div id="outerDiv">

      <script>
         fixSize();
      </script>

      <iframe src="menuBarInfo.html" id="contentFrame"></iframe>

   </div>
</body>

You should also edit the styles a little.

<style type="text/css"> 

body		{margin: 0px; border: 0px;}
#menuBar	{width: 100%; background: buttonface; padding: 1px;}
#outerDiv	{width: 100%; height: 100%;}
#contentFrame	{width: 100%; height: 100%;}

</style>

All that is left now is to define the fixSize function. This function calculates the height of the outerDiv to the height of the body element minus the height of the menu bar. This function is also assigned to the window.onload and window.resize events.

<script type="text/javascript">

function fixSize() {
   outerDiv.style.height = document.body.offsetHeight - menuBar.offsetHeight;
}

window.onload = fixSize;
window.onresize = fixSize;

</script>

If you have control over the page that is loaded in the frame you should probably make the menu hide when the user clicks in the frame. This is done by hooking up the onclick event.

document.onclick = function() {
   if (parent.hideAllMenuScriptlets)
      parent.hideAllMenuScriptlets();
}

Next I'll show you how to combine this with the dock bar script to create a dockable menu bar.