Inside Technique : DHTMLLib 2.0 : Menu Demonstration

The sliding drop-down menu above the banner ad creates a simple menu with a swipe animation. The animation is created by manipulating the clip property exposed on all absolutely positioned elements (this property is not supported on relatively positioned elements).

This example is very easy to create. First we created the link that acts as the drop-down source. Immediately following the link, we added a line-break and then absolutely positioned a table. The table has no top or left position defined. This causes the table to be absolutely positioned at its position in the flow. For this example, this causes the drop-down to automatically be positioned below the drop-down link freeing us from having to calculate its position.

When the link is clicked on, we run a simple timer that makes the menu visible. The menu swipes into view by dynamically changing the clip attribute. This demonstrates how the clip attribute can be used to slowly hide or unhide elements. When a click occurs anywhere else on the page, we hide the menu by again changing the clip values.

Below is the complete source code for this example. Again notice that we performed no browser detection in the script. Other key points to notice are how we set the onmouseup on the document to hide the menu and how the event.cancelBubble property is set in the links onmouseup event handler. These onmouseup on the document works using event bubbling. The mouse going up anywhere on the page causes this event to occur. The cancelBubble on the link prevents the onmouseup on the link from reaching the document, hence preventing the menu from disappearing when it is supposed to expand. These are all topics that are discussed in our next section.

<SCRIPT>

// Animate the element
function animPopup(elName, val) {
	// Get the animated element
	var el = document.all[elName]
	// Which direction are we animating
	if (el._dir)
		el._pos+=val // increment - slide into view
	else
		el._pos-=val // decrement - slide out of view
	// Set the new clip value
	el.style.clip = "rect(0 " + el.offsetWidth + " " + el._pos + " 0)"

	// Check if done
	if ((el._pos0 && !el._dir))
		setTimeout("animPopup('" + elName + "'," + val + ")",50)
}

function displayPopup(elName) {
	if (document.readyState!="complete") {
		alert("Please try again when the page is finished loading")
		return
	}
	// Don't bubble event
	window.event.cancelBubble = true
	// Cancel the anchor's (drop-down button's) default action
	window.event.returnValue = false
	var el = document.all[elName]
	// Already animating onto the screen
	if (el._dir) return
	if (el._dir==null) { // Initialize
		el.style.clip = "rect(0 " + el.offsetWidth + " 0 0)"
		el._pos = 0
	}
	el.style.visibility = "visible"
	el._dir = true

	animPopup("navBar",Math.ceil(el.offsetHeight/10))
}

function hidePopup() {
	if (document.readyState!="complete") return

	var el = document.all.navBar
	// Already animating away, return
	if ((el._dir==null) || (!el._dir)) return
	el._dir = false
	if (ie4Mac) 
		el.style.visibility = "hidden"
	else
		animPopup("navBar",Math.ceil(el.offsetHeight/10))
}	

function doLoad() {
	setup()
	// Grab onmouseup to hide the popup
	document.onmouseup = hidePopup	
}

window.onload = doLoad;
</SCRIPT>

<P>
 <A ID=jump HREF="#" 
    ONCLICK="displayPopup('navBar')" 
    ONMOUSEUP='if (document.readyState=="complete") window.event.cancelBubble=true'>
      www.siteExperts.com
 </A><BR>
<TABLE ID=navBar 
       STYLE="position: absolute;visibility: hidden;
              layer-background-color: lightgrey; background-color: lightgrey" 
       cellspacing=0 cellpadding=0>
<TR><TD NOWRAP>
...The popup portion of the menu...
</TD></TR></TABLE>

For the menu to start working, the page must be completely loaded. By using the readyState property on the document, we are able to test whether the page is loaded before executing any script. This avoids any script errors that can occur if the script is called prematurely.

Macintosh Internet Explorer 4.x Note

This example does have add a simple detection for the Macintosh version of Internet Explorer 4.x. The Macintosh version of Internet Explorer does not support the clip property. While using this property will not cause any script errors, we needed to add a the check so the menu can be hidden (normally the menu clips itself out of view). The variable, ie4Mac, is defined by DHTMLLib making it easy to detect when you are running on the Macintosh version.

And now, presenting events

We are now ready to discuss event models. Internet Explorer extends the original 3.0 event model by adding consistency and reason to the set of events. In Internet Explorer, every element in the document is exposed and every element supports the same essential set of mouse and keyboard events. To make it easy to respond to events, Internet Explorer automatically supports event bubbling. Netscape Navigator supports the 3.0 object model, adds a few new events and some support for events on positioned elements, and a new event model for manually requesting events at different levels.

[Events]

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