FileEditWebFX

Dockable Menu

This page descibes how to combine the dock bar script with the dhtml menu to create a dockable menu.

Setting up the page

The structure of the page is the same as for the dock bar script with a menuBar element inside the toolBar. You should imclude the following files in the normal way: dockbar.js, menu3.js and menu.css. Note that the dockbar javascript file has been updated a little to add a needed feature for this page to work.

The next step is to modify the stylesheet a little to fix a small bug in IE.

<style type="text/css">

.root, .rootHighlight, .rootActive	{position: relative; top: -1px;}

</style>

Next the constants for the dockbar are set in the same way as in the dock bar article. The dock bar script has been updated to generate a fake event when the tool bar is docked. This is needed to change the direction type of the root elements when the dock bar is changed between top/bottom and left/right position.

<script type="text/javascript">

var floatWidth = 127;
var floatHeight = 23;

var snapHorizSize = 50;
var snapVertSize = 20;

var horizDockWidth = 51;
var vertDockHeight = 19;

var toolbarPos = "top";


var roots = new Array();

function toolBarOnDock() {
   if (roots.length == 0) { // Not initiated yet
      var spans = document.all.tags("SPAN")
      var j=0;
      for (var i=0; i<spans.length; i++) {
         if (spans[i].className == "root")
            roots[j++] = spans[i];
      }
   }
   switch (toolbarPos) {
      case "top":
      case "bottom":
      case "float":
         for (var i=0; i<roots.length; i++) {
            roots[i].direction = "vertical";
            roots[i].style.width = "10px";
         }
         break;

      case "left":
      case "right":
         for (var i=0; i<roots.length; i++) {
            roots[i].direction = "horizontal";
            roots[i].style.width = "50px";
         }
         break;
   }
}

</script>

Now you need to set up the dock bar, the menu bar, the menus and the contentDiv. This is very similar to what we have done before so I'll just show the code.

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

<div id="toolbar" ondock="toolBarOnDock()"><span id="handle" onmousedown="hideAllMenuScriptlets()"></span>
   <span class="menuBar" id="menuBar"
      onmouseover="menuBarOver()"
      onmouseout="menuBarOut()"
      onclick="menuBarClick()">
      <span class="root" menu="fileMenu">File</span
      ><span class="root" menu="editMenu">Edit</span
      ><span class="root" menu="WebFXMenu3">WebFX</span>
   </span>
</div>
	
<!-- Define the menus -->

<div id="contentDiv">   
<script type="text/javascript">
   fixSize();
</script>

<!-- Content goes here -->

</div>

Note that in this case the function fixSize is provided by the dock bar script.

Creating menus
Use menu as a popup menu
Plain menu with a framed page
Dockable menu
Customize the look
Download this sample
Discuss this article

Author: Erik Arvidsson