Menu based on Javascript : Menu : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Menu »

 

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(" ","&nbsp;") + "</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 += "&nbsp;"
    }
    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.navioo.com", "Home", "")
AddMenuItem (2, 0, "http://www.navioo.com", "Date Picker", "")
AddMenuItem (21, 2, "http://www.navioo.com", "Introduction", "")
AddMenuItem (22, 2, "http://www.navioo.com", "Downloads", "")
AddMenuItem (23, 2, "http://www.navioo.com", "Updates & Credits", "")
AddMenuItem (3, 0, "http://www.navioo.com", "Drop Down Menu", "")
AddMenuItem (21, 3, "http://www.navioo.com", "Introduction", "")
AddMenuItem (22, 3, "http://www.navioo.com", "Download", "")
AddMenuItem (4, 0, "http://www.navioo.com", "Testimonials", "")
//-->
</SCRIPT>


 <SCRIPT LANGUAGE="JavaScript">
<!--
DrawMenu()
//-->
</SCRIPT>

</html>

           
       

Download : Download nav_sparowMenu.zip nav_sparowMenu.zip


-

Leave a Comment / Note


Vérification Refresh
  
Enter code
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

Navioo GUI Components
» Menu
Ajax Layer Ajax Layer
Data Type Data Type
Date Time Date Time
Development Development
Document Document
Event Event
Event onMethod Event onMethod
Form Control Form Control
GUI Components GUI Components
HTML HTML
Javascript CollectionsJavascript Collections
Javascript Objects Javascript Objects
Language Basics Language Basics
Node Operation Node Operation
Object Oriented Object Oriented
Page Components Page Components
Security Security
Style Layout Style Layout
Table Table
Utilities Utilities
Window Browser Window Browser