ASP Driven DHTML Slider Menus Revisited! -- One Year Later

One year ago, I wrote an article on how to create an ASP Driven DHTML menu. It received more than 15,000 visitors and became my top article. The code improved over the year, but the article didn't keep up. Now, in this new REVISITED! article, I have added more comments and display entirely revamped and improved code. Please incorporate these code changes in your versions.

Unlike the previous article that had the original code embedded in the article, this article displays the code right off the hard drive -- meaning that when I update the code, the updates will automatically show in this article. -- Nannette

How would you like to create a slick DHTML menu like this for your web site? As I was surfing the net, I found a cool DHTML menu at: http://www.association.org/Start/dynamic.asp. (It's no longer there folks.) I snagged the javascript functions and the cascading style sheets and decided to revamp the code with some VBScript functions to make it fully customizable and ASP driven.

Newest Articles!

Hacker Query Check

Tree Select Demo

Adobe Extension Manager

Scandisk & Defrag Pointers

.htr IIS Security Issue

Articles: ASP, DHTML, HTML

HTML Tutorial

Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!

ASP Driven DHMTL Slider Menus REVISITED One Year Later! Part II

ASP Driven DHMTL Slider Menus

ASP Driven HTML Outlines

Reusing Code with ASP Include Files and Subroutines

.htr IIS Security Issue

Articles: Databases, Cookies

Functions to Open a Database Connection and Record Set

Setting Up and Using OraSession to Manage Your Oracle Database Objects

Storing Non-Durable Data for Cookie-less Sessions

Articles: JavaScripting with ASP

Smart Popups

JavaScript: Validate Numeric Fields

Javascript Confirm Form Submission

JavaScript: Dynamic Text Area Counter

JavaScript: Check and Uncheck All Checkboxes

JavaScript Field Validations -- Client Side Scripting

Articles: Miscellaneous Topics

Scandisk & Defrag Pointers

Articles: Programming Standards, Style, & Processes

Setting Up Your Own ASP Development Templates

Creating a Project Template for Estimations

To Host or Not To Host -- Service Provider vs. Purchasing Your Own

ASP Naming Conventions

HTML Naming Conventions & Visual Interdev HTML Generation

Working with and in spite of the Visual Interdev Design Mode

Commenting Your ASP Source Code

Web Sites by Nannette

Christian Singles Dating

Gifted Church

Techno Geek Wannabees - Computer How To and Source Code

BBS Door Games & Utilities

Shining Star Book Store

Wichita SDA Church

Kids Karnival - Stories, Games, and Fun for the Kids!

Home

The ASP Warrior Home Page

Shining Star Services

First off: Folks, don't track me down and ask me questions. I'm sorry, but I just don't have time for one on one help.

The below source code is taken from the source code off the hard drive. So it will automatically be updated in this article when I make changes to the code itself. This article was originally written in August of 1999. I decided a year later I really ought to update the article to match the changes I've made in the menu. It is the most popular article in my list.

DHTML is browser dependent. Sorry, folks, but Netscape's support of DHTML is stinky, so I'm only showing how to support this in IE. 8/00 note: I tested this with Netscape 6.0 and Netscape still stinks. Sigh. Netscape.

<%
if Session("DHTML") <> 1 and Session("DHTML") <> 2 then
Dim bc
	Set bc = Server.CreateObject("MSWC.BrowserType")
	
	if bc.Browser <> "IE" then
		Session("DHTML") = 2	' 2 means forget DHTML
	else
		if bc.Majorver >= 4 then
			Session("DHTML") = 1	' 1 means use DHTML
		else
			Session("DHTML") = 2
		end if
	end if
	Set bc = Nothing
end if

%>

If the Session("DHTML") variable hasn't been populated yet, this will check the browser version and set whether the browser supports DHTML or not.

Next, you will need a body tag which utilizes the Session("DHTML") variable, such as this:

<%
'------------------------------------------------------
'   /include/dhtml_body.asp
'   Sets up the default BODY tag for every page that uses the DHTML menu
'   Created:     5/1/1999 by Nannette Thacker
'   Last update: 8/24/00
'------------------------------------------------------

if Session("DHTML") = 1 or strPage = "asp_dhtmlmenu" then

	Dim intMaxMenus, intMenuSubMax, intLineDepth, intClearDepth
	Dim intContainerDepth, intMenuWidth, intContainerWidth
	' how many menus are there?
	intMaxMenus = 7		' start at 0 count
	' what is the maximum count of items in the biggest menu?
	intMenuSubMax = 11	' start at 1 count	(web sites listing)
	intLineDepth = 18 ' if view fonts medium, 18 is good

	' depth to clear at bottom of the menu, add 1 for intMaxMenu start with 0
	intClearDepth = intLineDepth * (intMenuSubMax + (intMaxMenus + 1))
	' how deep should the container be? add 10 gutter
	intContainerDepth = intClearDepth + 10
	
	intMenuWidth = 375	' how wide do you want this to be?
	intContainerWidth = intMenuWidth + 12
	%>
	<!--#include VIRTUAL ="/articles/include/dhtmlmenu_include.asp" -->
	<!--#include VIRTUAL ="/articles/include/dhtmlmenu_ASPfuncs.asp" -->
	<link rel="stylesheet" href="/articles/include/lnkstyle.css">
	<BODY  onload="Setup();" <%=bodytag%>>
<%else%>
	<BODY  <%=bodytag%>>
<%end if%>
<BASEFONT SIZE="3">
<base target="_top">

In the above code, you set your default values to be used by your menu. If you have more than one menu on your site, you can change the default values for the menu, and use the same include files shown, without making any alterations to the functions.

intMaxMenus defines how many headers are in your main menu. Mine has 3, so I set it to 2. The count starts at 0, and is used in Javascript for setting up the arrays.

intMenuSubMax defines the maximum number of submenus under one header. At the time of this writing, my largest menu had 10 submenus, so I've set the intMenuSubMax count to 10. This count starts at 1.

intLineDepth sets the leading or depth between lines. I've set this to 18, which looks good if the "View Fonts" setting is set to "Medium."

intClearDepth, intContainerDepth, and intContainerWidth are calculations which should not require alteration, but are dependent upon your previous values entered.

intMenuWidth is the width of the menu. I don't want my text to wrap, so I've set my menu rather wide. If you are using a menu with only a few words, you'll want to set this much smaller.

You will then want to define your menu items based on if the browser accepts DHTML or not.

<font size=2>
<%if strPage = "asp_dhtmlmenu" or Session("DHTML") = 1 then%>
	<!--#include VIRTUAL ="/articles/include/dhtml_menu.asp" -->
<%else

	if siteID <> "FT" then%>
	Visit these ASP how-to articles and tutorials:<P>
	<!--#include VIRTUAL ="/articles/include/toc_include.asp" -->
	<P>
	<% end if%>
	
<%
'	Sites of interest include:<br>
'	<!--include VIRTUAL ="/articles/include/website_include.asp" -->
'	<P>
end if%>
</font>

<div id="idMenuContainer" class="mnContainer"
style="width:<%=intContainerWidth%>;height:<%=intContainerDepth%>;">
<%
Dim NewWin
NewWin = "true"	' open in new window
Dim SameWin
SameWin = "false" ' open in same window

dim menctr,nummenu,strTitle, strURL
menctr = 1
nummenu = 1

' in dhtml_body.asp update counter max when add a new item here
' and update intMenuSubMax when add new menu headers...
	'intMaxMenus = 8		' start at 0 count
	' what is the maximum count of items in the biggest menu?
	'intMenuSubMax = 11	' start at 1 count	(web sites listing)

' 8/24/00 below is where I contantly add new articles
' I want the newest article to be on top, so I use the menctr
' variable to increment the value
' with this new style, if you don't like the order or placement of
' something, move it! and your code is still intact without a lot of editing!

' open in the same window with SameWin or a new window with NewWin
' ---------------------------------------------------

Response.write PrintMenuHeader(nummenu,"Newest Articles!")

strTitle = "Hacker Query Check"
strURL = "/articles/articles/vbscript/hackerquerycheck.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Tree Select Demo"
strURL = "/articles/articles/javascript/treeselectdemo.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Adobe Extension Manager"
strURL = "/articles/articles/flash/extension_manager.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = "Scandisk & Defrag Pointers"
strURL = "/articles/articles/misc/scandefrag.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = ".htr IIS Security Issue"
strURL = "/articles/articles/misc/htr.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1




' end of menu group
' this function starts at the next item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"


' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write PrintMenuHeader(nummenu,"Articles: ASP, DHTML, HTML")

strTitle = "HTML Tutorial"
strURL = "/articles/articles/html/htmltutorial.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!"
strURL = "/articles/articles/misc/select.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "ASP Driven DHMTL Slider Menus REVISITED One Year Later! Part II"
strURL = "/articles/articles/dhtmlmenu/asp_dhtmlmenuP2.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "ASP Driven DHMTL Slider Menus"
strURL = "/articles/articles/dhtmlmenu/asp_dhtmlmenu.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "ASP Driven HTML Outlines"
strURL = "/articles/articles/misc/outline.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Reusing Code with ASP Include Files and Subroutines"
strURL = "/articles/articles/standards/includefiles.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = ".htr IIS Security Issue"
strURL = "/articles/articles/misc/htr.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"

' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write PrintMenuHeader(nummenu,"Articles: Databases, Cookies")

strTitle = "Functions to Open a Database Connection and Record Set"
strURL = "/articles/articles/database/datafunctions.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = "Setting Up and Using OraSession to Manage Your Oracle Database Objects"
strURL = "/articles/articles/oracle1/oracledataobjects.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Storing Non-Durable Data for Cookie-less Sessions"
strURL = "/articles/articles/misc/cookieless_sessions.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"

' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write PrintMenuHeader(nummenu,"Articles: JavaScripting with ASP")

strTitle = "Smart Popups"
strURL = "/articles/articles/javascript/popups.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "JavaScript: Validate Numeric Fields"
strURL = "/articles/articles/javascript/checkNumeric.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = "Javascript Confirm Form Submission"
strURL = "/articles/articles/javascript/confirmsubmit.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "JavaScript: Dynamic Text Area Counter"
strURL = "/articles/articles/javascript/dynamictextareacounter.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "JavaScript: Check and Uncheck All Checkboxes"
strURL = "/articles/articles/javascript/checkboxes.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "JavaScript Field Validations -- Client Side Scripting"
strURL = "/articles/articles/javascript/javascriptvalidations.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"



' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write PrintMenuHeader(nummenu,"Articles: Miscellaneous Topics")

strTitle = "Scandisk & Defrag Pointers"
strURL = "/articles/articles/misc/scandefrag.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"

' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write _
PrintMenuHeader(nummenu,"Articles: Programming Standards, Style, & Processes")

strTitle = "Setting Up Your Own ASP Development Templates"
strURL = "/articles/articles/standards/usingtemplates.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Creating a Project Template for Estimations"
strURL = "/articles/articles/standards/ProjectTemplateEstimations.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "To Host or Not To Host -- Service Provider vs. Purchasing Your Own"
strURL = "/articles/articles/misc/serviceprovider.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "ASP Naming Conventions"
strURL = "/articles/articles/standards/namingconventions.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "HTML Naming Conventions & Visual Interdev HTML Generation"
strURL = "/articles/articles/standards/HTMLnamingconventions.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Working with and in spite of the Visual Interdev Design Mode"
strURL = "/articles/articles/standards/VIDesignMode.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

strTitle = "Commenting Your ASP Source Code"
strURL = "/articles/articles/standards/commentsource.asp"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1

' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"






' ------------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

' open all of these in a new window
Response.write PrintMenuHeader(nummenu,"Web Sites by Nannette")


strTitle = "Christian Singles Dating"
strURL = "http://www.christiansinglesdating.com"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "Gifted Church"
strURL = "http://www.giftedchurch.com"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "Techno Geek Wannabees - Computer How To and Source Code"
strURL = "http://www.shiningstar.net/geek"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "BBS Door Games & Utilities"
strURL = "http://www.shiningstar.net/bbsdoors"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "Shining Star Book Store"
strURL = "http://www.shiningstar.net/books"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "Wichita SDA Church"
strURL = "http://www.shiningstar.net/wichitasda"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

strTitle = "Kids Karnival - Stories, Games, and Fun for the Kids!"
strURL = "http://www.kidskarnival.com"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1

' end of menu group
' this function starts at the next item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"

' ---------------------------------------------------

nummenu = nummenu + 1	' increment for next menu
menctr = 1		' default to 1

Response.write PrintMenuHeader(nummenu,"Home")

' this is used only by this site, remove the siteID if/else statement
' and simply define your strTitle
if siteID = "ROLLA" then
strTitle = "Nannette From Rolla Home Page"
else
strTitle = "The ASP Warrior Home Page"
end if

strURL = "/articles/"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,SameWin)
menctr = menctr + 1


strTitle = "Shining Star Services"
strURL = "http://www.shiningstar.net"
Response.write PrintMenuSub(nummenu,menctr,strURL,strTitle,NewWin)
menctr = menctr + 1
' end of menu group
' start at the final item and print blanks to the max
PrintMenuLoop nummenu,menctr	
Response.Write "</div>"

' ------------------------------------------------------

Response.Write "</div>"
%>

First, you have created the container class for your menu. It will use the container width and depth variables which were previously defined for determining the size.

<SCRIPT LANGUAGE=VBScript RUNAT=Server>

Function PrintMenuHeader(intMenuNum,strMenuName)
	Dim strPrintThis
	Dim intIndex
	intIndex = intMenuNum + 2
	Dim intTop	' where is the top
	intTop = ((intMenuNum - 1) * intLineDepth)+ 4
	strPrintThis =  "<div id=""id" & _
		intMenuNum & "_Container"" class=""mnSection"" style=""width:" & _
		intMenuWidth & ";top:" & intTop & _
		";left:0;z-index:" & intIndex & _
		";"" onclick=""showMenu(" & Cint(intMenuNum)-1 & ");"">"
	strPrintThis = strPrintThis & _
		"<div id=""idMn" & intMenuNum & _
		"_"" class=""mnTitle"" style=""width:" & _
		intMenuWidth & ";top:0;left:5;"">" & _
		strMenuName & "</div>" & vbCRLF
	PrintMenuHeader = strPrintThis
end function

Function PrintMenuSub(intMenuNum,intSubNum,strUrl,strMenuName,bNewWin)
	Dim strPrintThis
		strPrintThis =  "<div id=""id" & intMenuNum & _
			"_" & intSubNum & """ class=""mnItem"" style=""width:" & _
			intMenuWidth & ";top:" & _
			Cint(intLineDepth) * Cint(intSubNum) & ";left:5;"""
		strPrintThis = strPrintThis & _
			" onmouseover=""mOver(this);"" onmouseout=""mOut(this);"""
		
		' add & "?ID=" & siteID to pass any query string as needed
		' this part is used exclusively by my site and you won't need it
		strPrintThis = strPrintThis & _
			" onclick=""navTo(this,'" & strUrl & "?ID=" & siteID & "'," & _
			bNewWin & ");""> " & strMenuName & "</div>" & vbCRLF
	PrintMenuSub = strPrintThis
end function

Function PrintMenuBlank(intMenuNum,intSubNum)
	Dim strPrintThis
	strPrintThis =  "<div id=""id" & _
		intMenuNum & "_" & _
		intSubNum & """ class=""mnItemBlank"" style=""width:" & _
		intMenuWidth & ";top:" & _
		Cint(intLineDepth) * Cint(intSubNum) & ";left:5""></div>" & vbCRLF
	PrintMenuBlank = strPrintThis
end function

Sub PrintMenuLoop(intMenuNum,intSubNum)
	Dim ctr
	ctr = intSubNum
	Do while ctr <= intMenuSubMax
		Response.write PrintMenuBlank(intMenuNum,ctr)
		ctr = ctr + 1
	Loop
end Sub

</script>

You will call the PrintMenuHeader() function and pass the menu number, along with the menu header to display. Notice this is where our setup variables are used to build the menu.

Here is the altered dhtmlmenu_include.asp file which was originally found at http://www.association.org/Start/dynamic.asp with ASP code added by Nannette.

<script language="javascript"><!--
var mlMaxMenus = <%=intMaxMenus%>;	// zero based - how many menus are created
var moActiveItem, mlAbsBot;	// which is the active item, where is the absolute bottom
var mlInterval = 0;
var maoSubMenus = new Array();	// menu array object

function SubMenu(Name,Ref,Max) {
	this.name = Name;
	this.ref = Ref;
	this.max = Max;
	this.move = false;
	this.pos = 1;
	this.item = new Array;
}

function Setup() {
	var lCount, lNum;

	// create the submenu objects for each sub menu
	<%
	dim ctr
	ctr = 0
	do while ctr <= intMaxMenus
		Response.write "maoSubMenus[" & ctr & _
			"] = new SubMenu(""" & _
			ctr+1 & "_"",id" & _
			ctr+1 & "_Container," & _
			intMenuSubMax & ");"
		ctr = ctr + 1
	loop
	%>
	
	// put the menu items in an array
	for (lNum = 0; lNum <= mlMaxMenus; lNum++) {
		eval("maoSubMenus[lNum].item[0] = idMn" + maoSubMenus[lNum].name);
		for (lCount = 1; lCount <= maoSubMenus[lNum].max; lCount++)	{
		   eval("maoSubMenus[lNum].item[lCount] = id" +
				maoSubMenus[lNum].name + lCount);
		}
	}
	// calculate the bottom of the menu
	mlAbsBot = (idMenuContainer.style.posHeight - 24) -
		(<%=intLineDepth%> * mlMaxMenus);

	showMenu(0);
	moActiveItem = id1_1;	// old active item, to reset to blank when changes
	mActive(id1_1);

}

function moveMenu() {
var lCount, lNum, bAll;
bAll = false;
for (lNum = 1; lNum <= mlMaxMenus; lNum++) {
bAll = (bAll || maoSubMenus[lNum].move);
if (maoSubMenus[lNum].move) {
	 if (maoSubMenus[lNum].pos == 1) {
	  maoSubMenus[lNum].ref.style.posTop += <%=intLineDepth%>;
	  lCount = Math.round((<%=intClearDepth%> -
		(maoSubMenus[lNum].ref.style.posTop - 4)) / <%=intLineDepth%>);
	  if (lCount <= maoSubMenus[lNum].max && lCount > 0)
			maoSubMenus[lNum].item[lCount].style.display = "none";
	  if (maoSubMenus[lNum].ref.style.posTop >=
		(mlAbsBot + (lNum * <%=intLineDepth%>))) {
	   maoSubMenus[lNum].move = false;
	   maoSubMenus[lNum].pos = 0;
	  }
	} else {
	 maoSubMenus[lNum].ref.style.posTop -= <%=intLineDepth%>;
	 lCount = Math.round((<%=intClearDepth%> -
		(maoSubMenus[lNum].ref.style.posTop - 4) -
		<%=intLineDepth%>) / <%=intLineDepth%>);
	 if (lCount <= maoSubMenus[lNum].max && lCount > 0)
		maoSubMenus[lNum].item[lCount].style.display = "";
	  if (maoSubMenus[lNum].ref.style.posTop <=
		(4 + (lNum * <%=intLineDepth%>))) {
	   maoSubMenus[lNum].move = false;
	   maoSubMenus[lNum].pos = 1;
	  }
	 }
}
}
if (!bAll) {
window.clearInterval(mlInterval);
mlInterval = 0;
}
}

function showMenu(lNum) {

	var lCount;

	for (lCount = 1; lCount <= mlMaxMenus; lCount++) {
		if (lCount > lNum) {
			maoSubMenus[lCount].move = maoSubMenus[lCount].pos;
		} else {
			maoSubMenus[lCount].move = (!maoSubMenus[lCount].pos);
		}
	}
	mlInterval = window.setInterval("moveMenu()", 10);	// 1000 = 1 second
}

function mOver(oItem) {
	var szName = oItem.className
	if (mlInterval) return false;
	if (szName.indexOf("Hot") < 1) {
		oItem.className = szName + "Hot";
	}
}

function mOut(oItem) {
	var szName = oItem.className
	if (szName.indexOf("Hot") > 0) {
		oItem.className = szName.substring(0,szName.length - 3);
	}
}

function mActive(oItem) {
	moActiveItem.className = "mnItem";
	oItem.className = "mnItemActive";
	moActiveItem = oItem;
}

function navTo(oItem,szURL,bNewWin) {
	mActive(oItem);
	if (bNewWin)
		window.open(szURL);
	else
		window.self.location.href = szURL;
}

//--></script>

Here is the altered lnkstyle.css file which was originally found at http://www.association.org/Start/dynamic.asp, with *minor changes made by Nannette.

<STYLE>
BODY
{
FONT-SIZE: 1em;
COLOR: #ffffff;
LINE-HEIGHT: 1em;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #ffffff
}
.mnContainer
{
Z-INDEX: 2;
LEFT: 11px;
POSITION: relative;
TOP: 15px;
BACKGROUND-COLOR: #c3c3c3
}
.mnSection
{
WIDTH: 100px;
POSITION: absolute;
BACKGROUND-COLOR: #c3c3c3
}
.mnTitle
{
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #ffffff 1px solid;
WIDTH: 90px;
CURSOR: hand;
COLOR: #000000;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Trebuchet MS;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #c3c3c3;
TEXT-ALIGN: center
}
.mnItem
{
BORDER-RIGHT: #c3c3c3 1px solid;
BORDER-TOP: #c3c3c3 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #c3c3c3 1px solid;
WIDTH: 90px;
CURSOR: hand;
COLOR: navy;
BORDER-BOTTOM: #c3c3c3 1px solid;
FONT-FAMILY: Trebuchet MS;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #c3c3c3
}
.mnItemHot
{
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #ffffff 1px solid;
WIDTH: 90px;
CURSOR: hand;
COLOR: maroon;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Trebuchet MS;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #c3c3c3
}
.mnItemActive
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #000000 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #000000 1px solid;
WIDTH: 90px;
CURSOR: hand;
COLOR: navy;
BORDER-BOTTOM: #ffffff 1px solid;
FONT-FAMILY: Trebuchet MS;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #dddddd
}
.mnItemActiveHot
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #000000 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #000000 1px solid;
WIDTH: 90px;
CURSOR: hand;
COLOR: maroon;
BORDER-BOTTOM: #ffffff 1px solid;
FONT-FAMILY: Trebuchet MS;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #c3c3c3
}
.mnItemBlank
{
BORDER-RIGHT: #c3c3c3 1px solid;
BORDER-TOP: #c3c3c3 1px solid;
BORDER-LEFT: #c3c3c3 1px solid;
WIDTH: 90px;
BORDER-BOTTOM: #c3c3c3 1px solid;
POSITION: absolute;
HEIGHT: 18px;
BACKGROUND-COLOR: #c3c3c3
}
A.fav
{
FONT-SIZE: 0.8em;
COLOR: #ffffff;
FONT-FAMILY: Arial, Helvetica
}
.fav
{
FONT-SIZE: 0.8em;
COLOR: white;
FONT-FAMILY: Arial, Helvetica
}
</STYLE>

*The cascading style for the menu container came with the .mnContainer POSITION set to absolute. I altered this to make the POSITION relative. This allows me to insert it within my content on a page.