Links

The power of DHTML means that HTML can be modified at will, with no cost to the server, as all the content is loaded into the browser. CSS style elements can control the look and feel of the HTML elements and combine the HTML and CSS with Javascript then DHTML is born!

The commonest DHTML uses javascript events, which call on CSS or HTML functions. For example: the simplest DHTML function is a hide or display function:

 
				Simple Hide / Show DHTML

function Hide(HTMLElement){
  document.getElementById('HTMLElement').style.display = 'none';
} 
			

function Show(HTMLElement){
  document.getElementById('HTMLElement').style.display = '';
}
			

The hide and show principle is exactly what we are using for the above tab menu.
Click 'Simple' on the menu for the next section.

Menus from Lists
Dynamic menus can be made from a number of resources, images, tables or lists. Lists are perhaps the most powerful as CSS can style the lists with more control than tables.
So take a simple List:

 
A Simple List:			
<div class="MenuListDiv">
  <ul class="menuList" id="menu">
    <li class="menuBranch">  
      <span class="menuBranchSpan">
        <a href="" id="menuBranch0" class="branch"> Top Menu </a>
      </span>
      <ul id="branchItems0" class="menu"> 
          <li class="menuItem">
          <span class="menuItemSpan">
            <a href="#"> Link </a>
          </span>
        </li>
          <li class="menuBranch">  
          <span class="menuBranchSpan">
            <a href="" id="menuBranch1" class="actuator"> Sub Menu </a>
          </span>
          <ul id="branchItems1" class="menu"> 
               <li class="menuItem">
              <span class="menuItemSpan">
                <a href="#"> Link 1 </a>
              </span>
            </li>
            <li class="menuItem">
              <span class="menuItemSpan">
                <a href="#"> Link 2 </a>
              </span>
            </li>
           </ul>
        </li>
        <li class="menuItem">
          <span class="menuItemSpan">
            <a href="#"> Link 3 </a>
          </span>
        </li>
      </ul>
    </li>
    <li class="menuBranch">  
      <span class="menuBranchSpan">
        <a href="" id="menuBranch2" class="actuator"> Another Menu </a>
      </span>
      <ul id="branchItems2" class="menu"> 
           <li class="menuItem">
          <span class="menuItemSpan">
            <a href="#"> link </a>
          </span>
        </li>
       </ul>
    </li>
  </ul>
</div>
			

Without Any HTML Classes it would look like this:

Now lets go on to look at how CSS and DHTML can be used to make the menus dynamic.

Now we have our menu lets make it more functional. This is easily done by switching on and off the display of parts of menu, so that they expand and contract.

First lets look at the same menu, with CSS styles and DHTML functionailty:

The above html is the same as the previous list! So whats different?

• Javascript hides and displays elements
• CSS Styles the look of the list

The Javascript:
Once the list is made we initialise the menu, and set up what to display and what not.
Each branch is given an id and the child list elements are given a branch items id:

<li class="menuBranch">	
  <span class="menuBranchSpan">
    <a href="" id="menuBranch0" class="branch"> Top Menu </a>
  </span>
    <ul id="branchItems0" class="menu">
      ... menu items here ...
		

This way each menu list to hide is easily identifiable. The javascript function looks at the each branch and hides its child elements. It also sets an onclick parameter for the actuator, so that when a branch element is clicked it toggles the display of that element.

Javascript: 

if (!document.getElementById)
  document.getElementById = function() { return null; }
The initialize Menu function:	
function initializeMenu(menuId, actuatorId) {
1) Set the menu and actuator objects
 var menu = document.getElementById(menuId);
 var actuator = document.getElementById(actuatorId);
2) Check they are valid.
 if (menu == null || actuator == null) return;
 actuator.parentNode.parentNode.className = "menuBranch";
3) Set the onclick function.
 actuator.onclick = function() 
 {
   var display = menu.style.display;
   4) When clicked toggle the display
   this.parentNode.parentNode.className =
   (display == "block") ? "menuBranch" : "menuBranchMinus";
   menu.style.display = (display == "block") ? "none" : "block";
   return false;
 }
}
		

So thats two versions of the menu we've seen a plain and stylised version. Now lets look at more styles and how this changes the look of the same menu.

As CSS has such distinct control over lists, it is easy with a change of style sheet to change the look and feel of the menu.

Also you can modify the javascript to produce any number of effects:

There are many other effects that can be done with the list menu.
Have a look at some of hundreds of tree menus available to when searching via google.

Sources:
www.alistapart.com : Supplied the The Tab Menu.

The XML User Interface Language (XUL) is a markup language for creating rich dynamic user interfaces.

Perhaps the future of these menus is through XUL. I only heard about XUL very recently and the technology is exciting. Having briefly investigated the language its great potential is obvious. However, its not quite there yet and standards need to be implemented so that it is supported across browsers.

The following link is an example of the previous menus in XUL.
This example is Firefox and Mozilla compatable only.
XUL Example Menu