Menu based on Javascript
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
// written by Tan Ling Wee
// last updated 20 June 2003
// email : info@sparrowscripts.com
// url : www.sparrowscripts.com
//////////////////////////////////////////////////////////////////////////////////
// Layers
//////////////////////////////////////////////////////////////////////////////////
var layerQueue=new Array()
var layerIndex=-1
/* hides <select> and <applet> objects (for IE only) */
function hideElement( elmID, overDiv )
{
if( ie )
{
for( i = 0; i < document.getElementsByTagName( elmID ).length; i++ )
{
obj = document.getElementsByTagName( elmID )[i];
if( !obj || !obj.offsetParent )
{
continue;
}
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while( objParent.tagName.toUpperCase() != "BODY" )
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;
if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
else if( overDiv.offsetTop >= ( objTop + objHeight ));
else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
else
{
obj.style.visibility = "hidden";
}
}
}
}
/*
* unhides <select> and <applet> objects (for IE only)
*/
function showElement( elmID )
{
if( ie )
{
for( i = 0; i < document.getElementsByTagName( elmID ).length; i++ )
{
obj = document.getElementsByTagName( elmID )[i];
if( !obj || !obj.offsetParent )
{
continue;
}
obj.style.visibility = "";
}
}
}
function lw_createLayer (layerName, top_pos, left_pos, width, height, bgcolor, bordercolor, z_index) {
document.write("<div ONCLICK='event.cancelBubble=true' id='"+layerName+"' style='z-index:" + z_index + ";position:absolute;top:"+top_pos+";left:"+left_pos+";visibility:hidden;'><table bgcolor='"+bgcolor+"' style='border-width:1px;border-style:solid;border-color:" + bordercolor + "' cellpadding=2 cellspacing=0 width=0><tr><td valign=top width='"+width+"' height='"+height+"'><span id='"+layerName+"_content'></span></td></tr></table></div>")
}
function lw_getObj (objName) {
return (dom)?document.getElementById(objName).style:ie?eval("document.all."+objName) :eval("document."+objName)
}
function lw_showLayer (layerName) {
found=false
for (i=0;i<=layerIndex;i++)
{
if (layerQueue[i]==layerName)
{
found=true
}
}
if ((lw_getObj(layerName).visibility!="visible")&&(lw_getObj(layerName).visibility!="show"))
{
lw_getObj(layerName).visibility = (dom||ie)?"visible":"show"
layerQueue[++layerIndex] = layerName
hideElement( 'SELECT', document.getElementById(layerName) );
hideElement( 'APPLET', document.getElementById(layerName) );
}
}
function lw_hideLayer () {
showElement( 'SELECT', document.getElementById(layerQueue[layerIndex]) );
showElement( 'APPLET', document.getElementById(layerQueue[layerIndex]) );
lw_getObj(layerQueue[layerIndex--]).visibility = "hidden"
}
function lw_hideLayerName (layerName) {
var i
var tmpQueue=new Array()
var newIndex=-1
showElement( 'SELECT', document.getElementById(layerName) );
showElement( 'APPLET', document.getElementById(layerName) );
lw_getObj(layerName).visibility = "hidden"
for (i=0;i<=layerIndex;i++)
{
if ((layerQueue[i]!="")&&(layerQueue[i]!=layerName))
{
tmpQueue [++newIndex] = layerQueue[i]
hideElement( 'SELECT', document.getElementById(layerQueue[i]) );
hideElement( 'APPLET', document.getElementById(layerQueue[i]) );
}
}
layerQueue = tmpQueue
layerIndex = newIndex
}
function lw_closeAllLayers() {
while (layerIndex >= 0)
{
lw_hideLayer()
}
}
function lw_closeLastLayer() {
if (layerIndex >= 0)
{
while ((lw_getObj(layerQueue[layerIndex]).visibility!="visible") && (layerIndex>0))
{
layerIndex--;
}
lw_hideLayer()
}
}
function lw_escLayer (e) {
if (navigator.appName=="Netscape")
{
var keyCode = e.keyCode?e.keyCode:e.which?e.which:e.charCode;
if ((keyCode==27)||(keyCode==1))
{
lw_closeLastLayer()
}
}
else
if ((event.keyCode==0)||(event.keyCode==27))
{
lw_closeLastLayer()
}
}
var lw_leftpos = 0
var lw_toppos = 0
var lw_width = 0
var lw_height = 0
function lw_calcpos(obj) {
lw_leftpos=0
lw_toppos=0
lw_width = obj.offsetWidth
lw_height = obj.offsetHeight
var aTag = obj
do {
lw_leftpos += aTag.offsetLeft;
lw_toppos += aTag.offsetTop;
aTag = aTag.offsetParent;
} while(aTag.tagName!="BODY");
}
document.onkeypress = lw_escLayer;
document.onclick = lw_closeAllLayers;
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
// written by Tan Ling Wee
// last updated 20 June 2003
// email : info@sparrowscripts.com
// url : www.sparrowscripts.com
var orientation=0 // 0-horizontal 1-vertical
var imgPath = "sparowMenu/"
var mainItemForeground = "#000000"
var mainItemBorder = "#f0f0f0"
var mainItemBackground = "#f0f0f0"
var mainItemHoverForeground = "#000000"
var mainItemHoverBorder = "#a0a0a0"
var mainItemHoverBackground = "#d0d0d0"
var subItemForeground = "#000000"
var subItemBorder = "#ffffff"
var subItemBackground = "#ffffff"
var subItemHoverForeground = "#000000"
var subItemHoverBorder = "#a0a0a0"
var subItemHoverBackground = "#d0d0d0"
var menuFont = "verdana"
var menuSize = "11px"
/////////////////////////////////////////////////////////////////////////////
var ie=(navigator.appName=='Microsoft Internet Explorer')
var ns=(navigator.appName=='Netscape')
var dom=document.getElementById
var lw_menuId, lw_trigger, to1
var s1
/////////////////////////////////////////////////////////////////////////////
function Tmenu (id, parentId, url, description, img) {
this.id = id
this.parentId = parentId
this.url = url
this.description = description
this.numChild = 0
this.levelId = 0
this.img = img
}
/////////////////////////////////////////////////////////////////////////////
var menu = new Array()
var menuCounter = 0
var numLevel = 0
var prevMenuId = -1
var nNowAt = 0
function displayMenuItem(menuId) {
var sHTML
if (menu[menuId].parentId>0)
{
ItemForeground = subItemForeground
Border = subItemBorder
Background = subItemBackground
HoverForeground = subItemHoverForeground
HoverBorder = subItemHoverBorder
HoverBackground = subItemHoverBackground
}
else
{
ItemForeground = mainItemForeground
Border = mainItemBorder
Background = mainItemBackground
HoverForeground = mainItemHoverForeground
HoverBorder = mainItemHoverBorder
HoverBackground = mainItemHoverBackground
}
if ((orientation==1)||(menu[menuId].levelId>0))
{
sHTML += "<tr>"
}
if (menu[menuId].description!='-')
{
sHTML = "<td id='menu_"+menuId+"' style='cursor:pointer;cursor:hand;border-style:solid;border-width:1px;background-color:"+ Background +";color=\""+ ItemForeground +"\";border-color:"+ Border +"' onmouseover='clearInterval(s1);this.style.backgroundColor=\"" + HoverBackground + "\";this.style.color=\"" + HoverForeground + "\";this.style.borderColor=\"" + HoverBorder + "\";"
if (menu[menuId].numChild!=0) {
sHTML += "showSubmenu("+menu[menuId].id+",this);hideSubmenu(menu["+menuId+"].levelId+1);"
}
else
{
sHTML += "prevMenuId = "+menuId+";hideSubmenu(menu["+menuId+"].levelId);"
}
sHTML += ";nNowAt="+menuId+";clearAll("+menu[menuId].levelId+","+menu[menuId].parentId+")' onclick='document.location.href=\""+menu[menuId].url+"\"' onmouseout='s1=setInterval(\"resetMenu();hideSubmenu(0)\",1000);'><table cellpadding=0 cellspacing=0 border=0 width='100%'><tr>"
if (menu[menuId].levelId>0)
{
sHTML += "<td style='padding-left:3px' width=20><img src='"
if (menu[menuId].img=="")
{
sHTML += imgPath + "trans.gif"
}
else
{
sHTML += imgPath + menu[menuId].img
}
sHTML += "' width=16 height=16 border=0></td>"
}
if ((orientation==0) && (menu[menuId].levelId==0))
{
nArrowWidth = 0
}
else
{
nArrowWidth = 25
}
sHTML += "<td style='padding-left:5px;padding-right:5px' align=left>" + menu[menuId].description.replace(" "," ") + "</td><td style='padding-right:2px' align=right width="+nArrowWidth+">"
if (menu[menuId].numChild>0)
{
if ((orientation==0)&&(menu[menuId].levelId==0))
{
sHTML += "<img src='" + imgPath + "arrow_down.gif'>"
}
else
{
sHTML += "<img src='" + imgPath + "arrow_right.gif'>"
}
}
else
{
sHTML += " "
}
sHTML += "</td></tr></table></td>"
}
else
{
sHTML = "<td><img src='" + imgPath + "trans.gif' height=2></td></tr><tr><td onmouseover='' bgcolor='#d0d0d0'><img src='" + imgPath + "trans.gif' height=1></td></tr><tr><td><img src='" + imgPath + "trans.gif' height=2></td>"
}
if ((orientation==1)||(menu[menuId].levelId>0))
{
sHTML += "</tr>"
}
return sHTML
}
function clearAll(levelId, parentId) {
if (levelId>0)
{
Border = subItemBorder
Background = subItemBackground
}
else
{
Border = mainItemBorder
Background = mainItemBackground
}
for (i=0;i<menuCounter;i++)
{
if (menu[i].levelId==levelId)
{
if ((i!=nNowAt) && (menu[i].parentId==parentId) && (menu[i].description!="-")) {
lw_getObj("menu_"+i).backgroundColor=Background;
lw_getObj("menu_"+i).borderColor=Border
}
}
}
}
function mapID (id) {
for (var i=0;i<menuCounter;i++)
{
if (menu[i].id==id)
{
return i
}
}
return -1
}
function showSubmenu(menuId,trigger) {
lw_menuId = menuId
lw_trigger = trigger
if (ns)
{
to1 = setTimeout("showActualSubmenu(lw_menuId,lw_trigger)",50)
}
else
{
showActualSubmenu(lw_menuId,lw_trigger)
}
}
function showActualSubmenu(menuId,trigger) {
var nLevel = 0
var leftpos = 0
var nIndex=0
if (menuId>0)
{
lw_calcpos(trigger)
for (var i=0;i<menuCounter;i++)
{
if (menu[i].id==menuId)
{
nLevel = menu[i].levelId
nIndex = i
}
}
if ((orientation==1)||(menu[nIndex].parentId>0))
{
lw_getObj("menu_level_"+nLevel).top=lw_toppos
leftpos = lw_leftpos + lw_width + 5
if (nLevel==0) {
leftpos -= 3
}
}
else {
lw_getObj("menu_level_"+nLevel).top = lw_toppos + lw_height + 2
leftpos = lw_leftpos
}
lw_getObj("menu_level_"+nLevel).left=leftpos
sHTML = "<table cellpadding=0 cellspacing=0 border=0>"
for (var i=0;i<menuCounter;i++)
{
if (menu[i].parentId==menuId)
{
sHTML += displayMenuItem (i)
}
}
sHTML += "</table>"
document.getElementById("menu_level_"+nLevel+"_content").innerHTML=sHTML
lw_showLayer('menu_level_'+nLevel)
}
}
function hideSubmenu(levelId) {
for (var cnt=levelId; cnt<numLevel; cnt++)
{
lw_hideLayerName("menu_level_"+cnt)
}
}
function DrawMenu () {
for (var i=0; i<numLevel ; i++)
{
lw_createLayer("menu_level_"+i,0,0,0,0,"#ffffff","#d0d0d0",100)
}
sHTML="<table width=100% cellpadding=2 cellspacing=0>"
for (var i=0; i<menuCounter; i++)
{
if (menu[i].parentId==0)
{
sHTML += displayMenuItem (i)
}
else if (menu[i].parentId==-1)
{
sHTML += "<tr><td><img src='trans' height=2></td></tr><tr bgcolor='"+mainItemBackground+"'><td style='padding:5px'><b>" + menu[i].description + "</b></td></tr>"
}
}
sHTML += "</table>"
document.writeln(sHTML)
}
function getLevel (menuId) {
var pId=menuId
var nLevel=0
while (pId!=0)
{
nLevel++
for (var i=0;i<menuCounter;i++)
{
if (menu[i].id==pId)
{
pId = menu[i].parentId
}
}
}
return nLevel
}
function AddMenuItem (id, parentId, url, description, img) {
menu[menuCounter++] = new Tmenu (id, parentId, url, description, img)
if (parentId>0)
{
for (i=0;i<menuCounter;i++)
{
if (menu[i].id==parentId)
{
menu[i].numChild++
}
}
menu[menuCounter-1].levelId = getLevel(parentId)
if ( numLevel < menu[menuCounter-1].levelId)
{
numLevel = menu[menuCounter-1].levelId
}
}
else if (parentId==0)
{
menu[menuCounter-1].levelId = 0
}
else
{
menu[menuCounter-1].levelId = -1
}
}
function handleonclick() {
if (ns)
{
lw_closeAllLayers()
}
else
{
lw_closeAllLayers(event)
}
resetMenu()
}
function handlekeypress(e) {
if (ns)
{
var keyCode = e.keyCode?e.keyCode:e.which?e.which:e.charCode;
if ((keyCode==27)||(keyCode==1))
{
handleonclick()
}
}
else
if ((event.keyCode==0)||(event.keyCode==27))
{
handleonclick()
}
resetMenu()
}
function resetMenu () {
for (i=0;i<menuCounter;i++)
{
if (menu[i].levelId==0)
{
lw_getObj("menu_"+i).backgroundColor=mainItemBackground
lw_getObj("menu_"+i).borderColor=mainItemBorder
}
}
}
document.onkeypress = handlekeypress
document.onclick = handleonclick
</SCRIPT>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
AddMenuItem (1, 0, "http://www.java2s.com", "Home", "")
AddMenuItem (2, 0, "http://www.java2s.com", "Date Picker", "")
AddMenuItem (21, 2, "http://www.java2s.com", "Introduction", "")
AddMenuItem (22, 2, "http://www.java2s.com", "Downloads", "")
AddMenuItem (23, 2, "http://www.java2s.com", "Updates & Credits", "")
AddMenuItem (3, 0, "http://www.java2s.com", "Drop Down Menu", "")
AddMenuItem (21, 3, "http://www.java2s.com", "Introduction", "")
AddMenuItem (22, 3, "http://www.java2s.com", "Download", "")
AddMenuItem (4, 0, "http://www.java2s.com", "Testimonials", "")
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
DrawMenu()
//-->
</SCRIPT>
</html>
sparowMenu.zip( 4 k)Related examples in the same category