<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro
<DHTML (and other) Menus >


Menus: Menus become an important part of a website, especially when we start to build larger sites. Many clients wish to have slick menu systems that are pretty and useful. JavaScript can play a significant part in such menu systems.

DHTML: The term DHTML earlier was to market the Microsoft and Netscape capabilities of their version 4 browsers. We use DHTML in the present context to define any HTML elements that appear to "move" on a page.

DHTML menus then describe many of the various types of menus in use today. These menus frequently use CSS, positioning, the DOM and/or JavaScript to create the effect of movement.

Fixed Menu: Menus can simulate the appearance of movement by changing alignment in a CSS class. Here is an example menu: fixedMenu.htm

Clam Shell Menu: A clam shell menu is so named because when a menu item is "clicked" it opens and closes, like a clam. This effect relies on a span for each "hidden" menu item, all given a similar ID number (menu1, menu2 and menu3 for example). Each of these are set inside CSS to be set initially to "display:none", which will take the element, and all containing elements out of the HTML flow, and will not display them, making them in effect "disappear".

The menu relies on a JavaScript function to change the "display" property of the selected menu span to "block", which puts the span back into the flow of the HTML, and makes it appear:

if (domStyle.display =='block')

When the menu is clicked repeatedly, the menu toggles open and shut like a clam: clamshell.htm

Here is the same menu, only this one uses the "onmouseover" instead of the "onclick" event to trigger the menu: clamshell2.htm

Here is the same functionality, (with extensive CSS) in a mock up of a customer's page: newground.htm

Drop Down Menu: A drop down menu is usually positioned horizontally, and the menu options open downward onmouseover. Here is a simple drop down that is free to use, with a plug! anylink drop down menu

Flyout Menu: A flyout menu is similar to a drop down, with the additional ability to have sub menus "fly out" of the side of the menu: There are several ways this can be done. Here is an example: suckerfish drop down

Here's a dropdown/flyout menu done only with CSS: CSSPlay Dropdown/Flyout

Creating Movement: The previous covered menus produce the appearance of movement, but elements jump abruptly from one position to another.

We saw before that we can absolutely position an object, and change it's position via the DOM and JS:

document.getElementById("myDiv").style.left = "500px";

This makes the div jump across the page. However, with DHTML, objects can be made to move somewhat gracefully across a page: Move Objects Along A Path

This movement is created by

function initSoccerBall(){
document.getElementById("soccerBall").animationTimer = setInterval('moveObjectDecelerate(document.getElementById("soccerBall"), 500, 0, 25)', 50); }

setInterval() calls a function at specified intervals (in milliseconds). setInterval() will continue calling the function until clearInterval() is called or the window is closed. setInterval() is similar to setTimeout() which triggers only once. The function that does the move, moveObjectDecelerate() is attached to the object as property, animationTimer, so it can be shut off via clearInterval() when the object reaches it's destination.

After some math calculations, the new X and Y coordinates are set to the object, identified as target:

target.style.left = parseInt(target.floatingPointLeft) + "px";    
target.style.top = parseInt(target.floatingPointTop) + "px";  

If the object has reached it's final coordinates, it stops:

if (target.floatingPointLeft == destinationLeft && target.floatingPointTop == destinationTop){
      clearInterval(target.animationTimer); //stops animation 

The details of this example are in a great book called The JavaScript Anthology, by Edwards & Adams. This is a great place to go if you want to learn more about animation via the DOM. Here's some more fun with Animation and the DOM

Sliding Drop Down Menu: So far our menus have kind of "popped" from one state to the other. Now we'll look at a menu that is able to 'slide' the div's smoothly into view: heigeber drop down menu.

Examples like the heigeber drop down have the movement piece worked out to a point where we have smooth movement, and very professional behavior. This example is free (and non-supported) so what if you end up using it for a customer, and down the road a new browser version breaks the code?

Menu APIs: DHTML menus can be so advanced that we may elect to subscribe to the talents of other developers for our menu system. Even when we are talking about sophisticated menus that drop down, slide and flyout, all with control over various settings, this can be done cheap-to-free, as long as you can tolerate some advertising. An example of such a menu is the "HV" (Horizontal-Vertical) menu: HV Menu Demo

Hover on the menu, and watch pictures of cats pop up. He has a site to explain, and allow download of his menu: HV Menu Info

Eventually, you may want to bite the bullet, and convince your IT department to fork for fifty bucks, and get a flexible menu system, like milonic.

Sustainable Products: If you're building a website that has enough content to warrant a flyout menu such as we have been examining, you can certainly build something to suit. However, unless you plan to support such a product, it makes more sense in a professional environment to advocate using a third party product that is sustainable. This means that when you are down the road working on another site, your previous customer can still get assistance for the menu you installed, from the original source. If that product is somehow sustainable, (meaning it is a good candidate to exist going forward) and can be updated to the newest browsers for 'cheap to free' then that may be a good choice.

Ultimately, if a business can't afford a few bucks to buy a menu and have you install it, they may not be able to afford you. Further, the third party may have no compelling interest to maintain development. Here's an example of a dead product line

Keep Your Eyes Peeled: Be sure to search whenever you are to create a new menu. I always check Dynamic Drive for JS & CSS related effects, like menus



Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved