//
// DHTML Vertical expanding menu version 2.02
//
// Copyright (C) 2000 Roy C. Sinclair
//
// This library is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
//
// See the example files that accompany this routine for instructions on
// how to use this menu.
// Versions:
// 1.00 Initial version
// 2.00 Added support for Gecko (Netscape 6, Mozilla...)
// 2.01 Pre-Cache IMG files to reduce reloading in Gecko
// Compensate for 'lost' onmouseout events in Gecko
// 2.02 Fixed Highlighted text problem in Netscape 4
// Fixed problems with cached images
// First set up the browser type detection variables
MenuNS4 = (document.layers) ? 1 : 0
MenuIE = (document.all) ? 1 : 0
MenuDOM = (document.childNodes)? 1 : 0
MenuOk = (MenuNS4 || MenuIE || MenuDOM) ? 1 : 0
// Now set up the global variables which contain and define the menus
MenuEnd = 0
MenuLevelsEnd = 0
MenuEntry = new Array
MenuLevels = new Array
MenuIsOver = null // To overcome a missing event bug in the Gecko engine
MenuTransPixel = "transpixel.gif" // To overcome Netscape 4's nasty habits
// This function is used to create the menu item objects
function MenuItem (Depth, NameOfLink, URLOfLink)
{
if (Depth >= MenuLevelsEnd)
{
return
}
this.Depth = Depth
this.NameOfLink = NameOfLink
this.URLOfLink = URLOfLink
// Now create items that will be used internally
this.Expanded = 0
this.Showing = 0
this.NSLayerNo = 0
// Include the menu level items
this.BackgroundColorNormal = MenuLevels[Depth].BackgroundColorNormal
this.BackgroundColorHighlight = MenuLevels[Depth].BackgroundColorHighlight
this.FontName = MenuLevels[Depth].FontName
this.FontSize = MenuLevels[Depth].FontSize
this.FontWeight = MenuLevels[Depth].FontWeight
this.FontColorNormal = MenuLevels[Depth].FontColorNormal
this.FontColorHighlight = MenuLevels[Depth].FontColorHighlight
this.BorderWidth = MenuLevels[Depth].BorderWidth
this.BorderColorNormal = MenuLevels[Depth].BorderColorNormal
this.BorderColorHighlight = MenuLevels[Depth].BorderColorHighlight
this.MarginLeft = MenuLevels[Depth].MarginLeft
// Include the menu level images too
this.NoURLExpanded = MenuLevels[Depth].NoURLExpanded
this.NoURLHExpanded = MenuLevels[Depth].NoURLHExpanded
if (URLOfLink == null)
{
this.Normal = MenuLevels[Depth].NoURLNormal
this.Highlight = MenuLevels[Depth].NoURLHNormal
}
else
{
this.Normal = MenuLevels[Depth].Normal
this.Highlight = MenuLevels[Depth].Highlight
}
MenuEnd++
}
// This function is used to create the menu level objects
function MenuLevel (BGC1, BGC2, FName, FSize, FWeight, FC1, FC2, BW, BC1, BC2, ML)
{
if (BGC1 != null)
{
this.BackgroundColorNormal = BGC1
if (BGC2 != null)
{
this.BackgroundColorHighlight = BGC2
}
else
{
this.BackgroundColorHighlight = BGC1
}
}
else
{
// If no background color is specified there is also no highlight color
this.BackgroundColorNormal = null
this.BackgroundColorHighlight = null
}
this.FontName = FName
this.FontSize = FSize
this.FontWeight = FWeight
if (FC1 != null)
{
this.FontColorNormal = FC1
if (FC2 != null)
{
this.FontColorHighlight = FC2
}
else
{
this.FontColorHighlight = FC1
}
}
else
{
// If no font color is specified there is also no highlight color
this.FontColorNormal = null
this.FontColorHighlight = null
}
this.BorderWidth = BW
if (BC1 != null)
{
this.BorderColorNormal = BC1
if (BC2 != null)
{
this.BorderColorHighlight = BC2
}
else
{
this.BorderColorHighlight = BC1
}
}
else
{
// If no border color is specified there is no highlight color
this.BorderColorNormal = null
this.BorderColorHighlight = null
}
this.MarginLeft = ML
MenuLevelsEnd++
}
// Each Menu level item must be matched by a images item
function MenuLevelImages (I1, I2, I3, I4, I5, I6)
{
// Bail out if the browser doesn't support the DHTML we use for these menus
if (!MenuOk)
{
return
}
MenuLevels[MenuLevelsEnd - 1].NoURLNormal = new Image()
MenuLevels[MenuLevelsEnd - 1].NoURLExpanded = new Image()
MenuLevels[MenuLevelsEnd - 1].NoURLHNormal = new Image()
MenuLevels[MenuLevelsEnd - 1].NoURLHExpanded = new Image()
MenuLevels[MenuLevelsEnd - 1].Normal = new Image()
MenuLevels[MenuLevelsEnd - 1].Highlight = new Image()
if (I1 != null)
{
MenuLevels[MenuLevelsEnd - 1].NoURLNormal.src = I1
if (I2 != null)
{
MenuLevels[MenuLevelsEnd - 1].NoURLExpanded.src = I2
}
else
{
// Use the normal image if there's no expanded image
MenuLevels[MenuLevelsEnd - 1].NoURLExpanded.src = I1
}
if (I3 != null)
{
MenuLevels[MenuLevelsEnd - 1].NoURLHNormal.src = I3
}
else
{
// Use the normal image if there's no highlight image
MenuLevels[MenuLevelsEnd - 1].NoURLHNormal.src = I1
}
if (I4 != null)
{
MenuLevels[MenuLevelsEnd - 1].NoURLHExpanded.src = I4
}
else
{
// Use the Expanded image if there's no highlighted expanded image
MenuLevels[MenuLevelsEnd - 1].NoURLHExpanded = MenuLevels[MenuLevelsEnd - 1].NoURLExpanded
}
}
if (I5 != null)
{
MenuLevels[MenuLevelsEnd - 1].Normal.src = I5
if (I6 != null)
{
MenuLevels[MenuLevelsEnd - 1].Highlight.src = I6
}
else
{
// Use the normal image if there's no highlight image
MenuLevels[MenuLevelsEnd - 1].Highlight.src = I5
}
}
}
// This routine creates the style sheets used to format the text and backgrounds
function MenuHead ()
{
if (!MenuOk)
{
return
}
if (MenuNS4) // DOM Checked
{
MenuOriginalWidth = innerWidth
MenuOriginalHeight = innerHeight
onResize = MenuNewSize
}
document.write ("")
}
// This routine is used to place the Netscape layers into position
// after their visibility has been changed. IE does this for you so
// there's no need for an IE equivalent.
function MenuArrange() // Netscape version 4 only
{
if (!MenuNS4) // DOM Checked
{
return;
}
for (i = 0; i < document.layers.length; i++)
{
if (document.layers[i].name == "MenuBegin")
{
// This fixed layer is used to position the top of the menu
nextY = document.layers[i].pageY
nextX = document.layers[i].pageX
OriginalX = nextX
continue
}
if (document.layers[i].name == "MenuEnded")
{
// We've processed the whole menu now so we can ignore any
// additional layers
break
}
ind = document.layers[i].name
if (ind.substring(0,3) != "ME_")
{
// If it's not a menu item layer, get the next layer
continue
}
// Get the subscript of the MenuEntry array item that matches this Menu item
indno = ind.substring(3,ind.length)
MenuEntry[indno].NSLayerNo = i
if (MenuEntry[indno].Showing == 1 || MenuEntry[indno].Depth == 0)
{
if (document.layers[i].visibility == "hide")
{
// If it's supposed to be showing now then lets make the change
document.layers[i].visibility = "SHOW"
}
tHeight = document.layers[i].document.layers[1].document.height
fHeight = tHeight + (MenuEntry[indno].BorderWidth * 2)
fWidth = MenuWidth - MenuEntry[indno].MarginLeft
tWidth = fWidth - (MenuEntry[indno].BorderWidth * 2)
// Establish the left margin if it's present
if (MenuEntry[indno].MarginLeft == 0)
{
nextX = OriginalX
}
else
{
nextX = OriginalX + MenuEntry[indno].MarginLeft
}
// Add in the size of the border to the position of the inside content
tnextX = nextX + MenuEntry[indno].BorderWidth
tnextY = nextY + MenuEntry[indno].BorderWidth
document.layers[i].pageY = nextY
document.layers[i].pageX = nextX
document.layers[i].clip.bottom = fHeight
document.layers[i].clip.right = fWidth
document.layers[i].document.layers[0].visibility="INHERIT"
document.layers[i].document.layers[0].pageX=nextX
document.layers[i].document.layers[0].pageY=nextY
document.layers[i].document.layers[0].clip.bottom = fHeight
document.layers[i].document.layers[0].clip.right = fWidth
document.layers[i].document.layers[1].visibility="INHERIT"
document.layers[i].document.layers[1].pageX=tnextX
document.layers[i].document.layers[1].pageY=tnextY
document.layers[i].document.layers[1].clip.bottom = tHeight
document.layers[i].document.layers[1].clip.right = tWidth
document.layers[i].document.layers[2].visibility="HIDDEN"
document.layers[i].document.layers[2].pageX=tnextX
document.layers[i].document.layers[2].pageY=tnextY
document.layers[i].document.layers[2].clip.bottom = tHeight
document.layers[i].document.layers[2].clip.right = tWidth
document.layers[i].document.layers[3].visibility="HIDDEN"
document.layers[i].document.layers[3].pageX=nextX
document.layers[i].document.layers[3].pageY=nextY
document.layers[i].document.layers[3].clip.bottom = fHeight
document.layers[i].document.layers[3].clip.right = fWidth
document.layers[i].document.layers[4].visibility="HIDDEN"
document.layers[i].document.layers[4].pageX=tnextX
document.layers[i].document.layers[4].pageY=tnextY
document.layers[i].document.layers[4].clip.bottom = tHeight
document.layers[i].document.layers[4].clip.right = tWidth
document.layers[i].document.layers[5].visibility="HIDDEN"
document.layers[i].document.layers[5].pageX=tnextX
document.layers[i].document.layers[5].pageY=tnextY
document.layers[i].document.layers[5].clip.bottom = tHeight
document.layers[i].document.layers[5].clip.right = tWidth
document.layers[i].document.layers[6].visibility="INHERIT"
document.layers[i].document.layers[6].pageX=nextX
document.layers[i].document.layers[6].pageY=nextY
document.layers[i].document.layers[6].clip.bottom = fHeight
document.layers[i].document.layers[6].clip.right = fWidth
nextY += fHeight
if (MenuEntry[indno].Depth == 0)
{
document.layers[i].visibility = "show"
}
}
}
}
// For Netscape we'll set the sizes of the layers to 0 before they're
// shown to keep from having them pop up in unexpected places before
// we're ready to show them in the place they'll ultimately be at
//
function MenuInit() // Netscape version 4 only
{
// Bail out if the browser doesn't support the menus or it's not Netscape 4
if (!MenuOk)
{
return
}
if (!MenuNS4) // DOM Checked
{
return
}
for (i = 0; i < document.layers.length; i++)
{
if (document.layers[i].name == "MenuEnded")
{
break
}
ind = document.layers[i].name
if (ind.substring(0,3) != "ME_")
{
continue
}
document.layers[i].document.layers[0].clip.bottom = 0
document.layers[i].document.layers[0].clip.right = 0
document.layers[i].document.layers[1].clip.bottom = 0
document.layers[i].document.layers[1].clip.right = 0
document.layers[i].document.layers[2].clip.bottom = 0
document.layers[i].document.layers[2].clip.right = 0
document.layers[i].document.layers[3].clip.bottom = 0
document.layers[i].document.layers[3].clip.right = 0
document.layers[i].document.layers[4].clip.bottom = 0
document.layers[i].document.layers[4].clip.right = 0
document.layers[i].document.layers[5].clip.bottom = 0
document.layers[i].document.layers[5].clip.right = 0
document.layers[i].document.layers[6].clip.bottom = 0
document.layers[i].document.layers[6].clip.right = 0
}
// We can now call the MenuArrage function to position and show the top level items.
MenuArrange()
}
// When the mouse passes over a menu item we switch on the highlights
function MenuOver (m)
{
if (MenuNS4) // DOM Checked
{
i = MenuEntry[m].NSLayerNo
if (MenuEntry[m].Expanded == 1)
{
document.layers[i].document.layers[3].visibility = "INHERIT"
document.layers[i].document.layers[5].visibility = "INHERIT"
window.status = "Click to hide menu items"
}
else
{
document.layers[i].document.layers[3].visibility = "INHERIT"
document.layers[i].document.layers[4].visibility = "INHERIT"
if (MenuEntry[m].URLOfLink == null)
{
window.status = "Click to show menu items"
}
else
{
if (MenuEntry[m].NameOfLink != "")
{
window.status = MenuEntry[m].URLOfLink
}
}
}
return
}
// IE/DOM code
if (MenuIsOver != null)
{
MenuOut(MenuIsOver)
}
MenuIsOver = m
if (MenuDOM)
{
e = document.getElementById('ME_' + m)
if (MenuEntry[m].Normal != null)
{
im = document.getElementById('IM_' + m)
}
}
else
{
e = eval ('ME_' + m)
if (MenuEntry[m].Normal != null)
{
im = eval ('IM_' + m)
}
}
if (MenuEntry[m].FontColorHighlight != null)
{
e.style.color = MenuEntry[m].FontColorHighlight
}
if (MenuEntry[m].BorderColorHighlight != null)
{
e.style.borderColor = MenuEntry[m].BorderColorHighlight
}
if (MenuEntry[m].BackgroundColorHighlight != null)
{
e.style.backgroundColor = MenuEntry[m].BackgroundColorHighlight
}
if (MenuEntry[m].URLOfLink == null)
{
if (MenuEntry[m].Expanded == 1)
{
if (MenuEntry[m].NoURLHExpanded.src > '')
{
im.src = MenuEntry[m].NoURLHExpanded.src
}
window.status = "Click to hide menu items"
}
else
{
if (MenuEntry[m].Highlight.src > '')
{
im.src = MenuEntry[m].Highlight.src
}
window.status = "Click to show menu items"
}
}
else
{
if (MenuEntry[m].Highlight.src > '')
{
im.src = MenuEntry[m].Highlight.src
}
if (MenuEntry[m].NameOfLink != "")
{
window.status = MenuEntry[m].URLOfLink
}
}
}
// When the mouse leaves a menu item we switch off the highlights
function MenuOut (m)
{
window.status = ""
if (MenuNS4) // DOM Checked
{
i = MenuEntry[m].NSLayerNo
if (MenuEntry[m].Expanded == 1)
{
document.layers[i].document.layers[2].visibility = "INHERIT"
document.layers[i].document.layers[3].visibility = "HIDDEN"
document.layers[i].document.layers[5].visibility = "HIDDEN"
}
else
{
document.layers[i].document.layers[2].visibility = "HIDDEN"
document.layers[i].document.layers[3].visibility = "HIDDEN"
document.layers[i].document.layers[4].visibility = "HIDDEN"
}
return
}
if (MenuDOM)
{
e = document.getElementById('ME_' + m)
if (MenuEntry[m].Normal != null)
{
im = document.getElementById('IM_' + m)
}
}
else
{
e = eval ('ME_' + m)
if (MenuEntry[m].Normal != null)
{
im = eval ('IM_' + m)
}
}
if (MenuEntry[m].FontColorNormal == null)
{
e.style.color = document.style.color
}
else
{
e.style.color = MenuEntry[m].FontColorNormal
}
if (MenuEntry[m].URLOfLink == null)
{
if (MenuEntry[m].Expanded == 1)
{
if (MenuEntry[m].NoURLExpanded.src > '')
{
im.src = MenuEntry[m].NoURLExpanded.src
}
}
else
{
if (MenuEntry[m].Normal.src > '')
{
im.src = MenuEntry[m].Normal.src
}
}
}
else
{
if (MenuEntry[m].Normal.src > '')
{
im.src = MenuEntry[m].Normal.src
}
}
if (MenuEntry[m].BorderColorNormal != null)
{
e.style.borderColor = MenuEntry[m].BorderColorNormal
}
if (MenuEntry[m].BackgroundColorNormal != null)
{
e.style.backgroundColor = MenuEntry[m].BackgroundColorNormal
}
MenuIsOver = null
}
// When a menu item is clicked on we must change to a new document, expand a menu,
// collapse a menu or collapse one menu and then expand a new one.
function MenuClick (m)
{
if (MenuNS4) // DOM Checked
{
i = MenuEntry[m].NSLayerNo
}
// Call the hyperlink if one is present
if (MenuEntry[m].URLOfLink != null)
{
// If the hyperlink is a javascript call just run it
if (MenuEntry[m].URLOfLink.indexOf("javascript:") != -1)
{
eval(MenuEntry[m].URLOfLink)
return true
}
document.location = MenuEntry[m].URLOfLink
return true
}
// Not a hyperlink - lets work the menu
MenuHide(m) // Make sure no other menu at this level is opened first
if (MenuEntry[m].Expanded == 1)
{
MenuEntry[m].Expanded = 0
}
else
{
MenuShow(m)
MenuEntry[m].Expanded = 1
}
MenuOver(m)
return false // Netscape Version 4 selects text even with this!!
}
// This function is called to collapse a menu, all menus at lower levels are collapsed as well
// Note that this is the routine which collapses other menus at the level of a new one that's
// about to be opened.
function MenuHide (m)
{
for (j = 0; j < MenuEnd ; j++)
{
// Don't collapse a menu that's not showing or if it contains the clicked menu
if (MenuEntry[j].Showing == 0 || MenuEntry[j].Depth < MenuEntry[m].Depth)
{
continue
}
if (j != m)
{
MenuEntry[j].Expanded = 0
MenuOut(j) // Reset the image on menus that are collapsed
}
// Don't Hide menu items at the same level either
if (MenuEntry[j].Depth > 0 && MenuEntry[j].Depth == MenuEntry[m].Depth)
{
continue
}
if (MenuEntry[j].Depth > 0)
{
if (MenuNS4) // DOM Checked
{
document.layers[MenuEntry[j].NSLayerNo].visibility = "HIDDEN"
}
else
{
if (MenuDOM)
{
me = document.getElementById('ME_' + j)
}
else
{
me = eval ('ME_' + j)
}
me.style.display = "none"
}
MenuEntry[j].Showing = 0
}
}
if (MenuNS4) // DOM Checked
{
MenuArrange ();
}
}
// This function is call to expand (or show) a menu from it's collapsed state
function MenuShow (m)
{
for (j = m + 1 ; j < MenuEnd ; j++ )
{
if (MenuEntry[j].Depth >= MenuLevelsEnd)
{
continue
}
if (MenuEntry[j].URLOfLink == null && MenuEntry[j].Depth == (MenuLevelsEnd - 1))
{
continue
}
if (MenuEntry[j].Depth == MenuEntry[m].Depth)
{
break
}
if (MenuEntry[j].Depth == MenuEntry[m].Depth + 1)
{
if (!MenuNS4) // DOM Checked
{
if (MenuDOM)
{
me = document.getElementById('ME_' + j)
}
else
{
me = eval ('ME_' + j)
}
me.style.display = 'block'
}
MenuEntry[j].Showing = 1
}
}
if (MenuNS4) // DOM Checked
{
MenuArrange()
}
}
// This routine creates the actual menu items for inclusion in the web page and which are
// manipulated by the rest of the code.
function MenuBody ()
{
if (!MenuOk)
{
document.write('Menu requires a version 4 or later Netscape or Internet Explorer browser')
return
}
if (MenuNS4) // DOM Checked
{
// Netscape layers arrangement:
//
// Seven layers per menu item nested within a containing layer (eight layers per item)
// Layers are:
// 0 = Normal Border
// 1 = Normal Unexpanded menu or URL
// 2 = Normal Expanded menu
// 3 = Highlighted Border
// 4 = Highlighted Unexpanded menu or URL
// 5 = Highlighted Expanded menu
// 6 = Transparent overlay image layer with event hooks
//
// All layers exist for each menu item even if it is not needed to simplify later code
//
document.write ("")
for (var i = 0; i < MenuEnd; i++)
{
if (MenuEntry[i].Depth >= MenuLevelsEnd)
{
continue
}
if (MenuEntry[i].URLOfLink == null && MenuEntry[i].Depth == (MenuLevelsEnd - 1))
{
continue
}
// Outer layer
document.write ("")
if (MenuEntry[i].Depth == 0)
{
MenuEntry[i].Showing = 1
}
// Layer 0
document.write ("")
// Layer 1
document.write ("")
// Layer 2
document.write ("")
// Layer 3
document.write ("")
// Layer 4
document.write ("")
// Layer 5
document.write ("")
// Layer 6
document.write ("")
document.write ("")
document.write ("![](\"")
")
document.write ("")
// End outer layer
document.write ("")
}
document.write ("")
return
}
// IE/DOM code
for (var i = 0; i < MenuEnd; i++)
{
if (MenuEntry[i].Depth >= MenuLevelsEnd)
{
continue
}
if (MenuEntry[i].URLOfLink == null && MenuEntry[i].Depth == (MenuLevelsEnd - 1))
{
continue
}
document.write ("")
}
}
// This code fixes a problem with resizing windows in Netscape 4, it puts the menu into it's proper new location
function MenuNewSize()
{
if (innerWidth != MenuOriginalWidth || innerHeight != MenuOriginalHeight)
{
MenuArrange();
}
}
// Use this code to create a menu for a user of a browser that doesn't support DHTML
// This menu can be one part or two part depending on how you want the page to look
// If you don't know what a 'Luddite' is take the time to research those people in
// historical references.
// Type is used to create either the full menu (value = 1) or a top level items menu
// (value = 0). The top level items menu will have links to point to the top level
// items in the full menu which means you can create a useful menu system even for
// those who have been stuck with a browser that can't handle the new menus.
function MenuLuddite (type,TopFontSize,TopFontColor,LFontSize,LFontColor,TopImage,TopName)
{
LastDepth = 0
for (var i = 0; i < MenuEnd ; i++)
{
if (MenuEntry[i].Depth == 0)
if (type == 0)
// Top level items only
{
if (MenuEntry[i].URLOfLink == null)
{
document.write ("")
}
else
{
document.write ("")
}
if (TopFontSize != null || TopFontColor != null)
{
document.write ("")
}
document.write (MenuEntry[i].NameOfLink)
if (TopFontSize != null || TopFontColor != null)
{
document.write ("")
}
document.write ("
\n")
LastDepth = 0
continue
}
else
// Full menu
{
if (i > 0)
{
document.write ("
")
}
document.write ("")
if (TopImage != null && TopName != null)
{
document.write ("![\"\"](\"",TopImage,"\")
")
}
if (TopFontSize != null || TopFontColor != null)
{
document.write ("")
}
if (MenuEntry[i].URLOfLink != null)
{
document.write ("")
}
document.write ("",MenuEntry[i].NameOfLink,"")
if (MenuEntry[i].URLOfLink != null)
{
document.write ("")
}
if (TopFontSize != null || TopFontColor != null)
{
document.write ("")
}
document.write ("\n\n")
LastDepth = 0
continue
}
if (type == 0 || MenuEntry[i].Depth >= MenuLevelsEnd)
{
continue
}
if (MenuEntry[i].URLOfLink == null && MenuEntry[i].Depth == (MenuLevelsEnd - 1))
{
continue
}
if (LastDepth > MenuEntry[i].Depth)
{
document.write ("
")
}
LastDepth = MenuEntry[i].Depth
if (MenuEntry[i].URLOfLink == null)
{
document.write ("")
if (LFontSize != null || LFontColor != null)
{
document.write ("")
}
document.write (MenuEntry[i].NameOfLink)
if (LFontSize != null || LFontColor != null)
{
document.write ("")
}
document.write ("
")
}