»
EnglishFrenchVietnamese

Print - Sub navigation - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » Sub navigation
URL: http://www.javascriptbank.com/sub-navigation.html

Sub navigation © JavaScriptBank.comA JavaScript menu with links that hovers up when the mouse moves over them. In select browsers, the links depress as well on mousedown.

Full version: jsB@nk » Menu » Navigation » Sub navigation
URL: http://www.javascriptbank.com/sub-navigation.html



JavaScript
<SCRIPT language=JavaScript type=text/javascript>var Menu = new Array ()var subMenu = new Array ()////// ADD MENU ITEMS  ////////////////////////////////////////////////////////////////////////////////////////////////  To add a new menu item, follow the format below.  Every "Menu" must adhere to the following rules////  1. Each menu has a number. i.e. "Menu[0]". This number must start at 0 and be incremented by one for each menu item added.//  2. Whether you want a sub menu or not, each menu must have the "subMenu[x] = new Array()" line, where x is the same as the //     main "Menu[x]" number.//  3. If you DO want a sub menu, you must assign it TWO numbers. i.e. "subMenu[x][x]". The first number is the same //     as the main "Menu" number, and the second must start at 0 and be incremented by one, for every sub menu item added.//  4. the script is CASE SENSITIVE. ////  -- Example --//  Menu[0] = new Array ("Link Name", "URL", "Frame Target")//    subMenu[0] = new Array()//    subMenu[0][0] = new Array ("Link Name", "URL", "Frame Target")//    subMenu[0][1] = new Array ("Link Name", "URL", "Frame Target")//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////   Menu[0] = new Array("Home", "http://ricom.co.uk/index.php","_top")     subMenu[0] = new Array()               Menu[1] = new Array("Services", "http://ricom.co.uk/services.php","_top")      subMenu[1] = new Array()     subMenu[1][0] = new Array ("Corporate Branding", "","_top")     subMenu[1][1] = new Array ("Typesetting", "","_top")     subMenu[1][2] = new Array ("Internet Design", "","_top")     subMenu[1][3] = new Array ("Presentations", "","_top")     subMenu[1][4] = new Array ("Graphic Design", "","_top")     subMenu[1][5] = new Array ("Templates", "","_top")               Menu[2] = new Array("Prices", "","_top")     subMenu[2] = new Array()     Menu[3] = new Array("Contacts", "","_top")      subMenu[3] = new Array()     subMenu[3][0] = new Array ("Address &amp; Telephone", "","_top")     subMenu[3][1] = new Array ("Feedback Form", "","_top")     subMenu[3][2] = new Array ("Guestbook", "","_top")    Menu[4] = new Array("Resources", "","_top")     subMenu[4] = new Array()     Menu[5] = new Array("Clients", "","_top")     subMenu[5] = new Array()  ////// FORMAT MENU  ///////////////////////////////////////////////////////////////////orientation = "horizontal"                 // Orientation of menu.  (horizontal, vertical)cellPadding = 3                            // Cell PaddingcellBorder = 1                             // Include table border (for no border, enter 0)verticalOffset = 0                         // Vertical offset of Sub Menu. (if set to 0, default offset will be used)horizontalOffset = 0                       // Horizontal offset of Sub Menu. (if set to 0, default offset will be used)subMenuDelay = 2                           // Time sub menu stays visible for (in seconds)// Main Menu ItemsborderColor = "#06578F"                    // Border Colour menuBackground = "#568DB1"                 // Cell Background ColourmenuHoverBackground = "#06578F"            // Cell Background Colour on mouse rolloverfontFace = "arial"                         // Font FacefontColour = "#FFFFFF"                     // Font ColourfontHoverColour = "#00FFFF"                // Font Colour on mouse rolloverfontSize = "8pt"                           // Font SizefontDecoration = "none"                    // Style of the link text (none, underline, overline, line-through)fontWeight = "normal"                      // Font Weight (normal, bold)// Sub Menu ItemssborderColor = "#568DB1"                    // Border Colour smenuBackground = "#ffffcc"                 // Cell Background ColoursmenuHoverBackground = "#A6A684"            // Cell Background Colour on mouse rolloverrsfontFace = "arial"                         // Font FacesfontColour = "#568DB1"                     // Font ColoursfontHoverColour = "#FFFFFF"                // Font Colour on mouse rolloversfontSize = "8pt"                           // Font SizesfontDecoration = "none"                    // Style of the link text (none, underline, overline, line-through)sfontWeight = "normal"                      // Font Weight (normal, bold)////// DO NOT EDIT BELOW THIS LINE  ///////////////////////////////////////////////////////////////////// Browser Sniffervar isIE = (document.getElementById && document.all)?true:false;var isNS4 = (document.layers)?true:false;var isNS6 = (document.getElementById && !document.all)?true:false;var timervar obj = (isIE)?"document.all":"document.getElementById"// Default horizontal and vertical offsetsif (verticalOffset == 0 || verticalOffset == "") {  verticalOffset = (orientation=="horizontal")?20:5}if (horizontalOffset == 0 || horizontalOffset == "") {  horizontalOffset = (orientation=="horizontal")?-1:70}// Menu Stylesdocument.writeln ('<style>');document.writeln ('.rcMenuStatic {font-family:'+fontFace+';font-size:'+fontSize+';color:'+fontColour+';font-weight:'+fontWeight+';background-color:'+menuBackground+'; cursor:hand; text-decoration:'+fontDecoration+'}');document.writeln ('.rcMenuHover  {font-family:'+fontFace+';font-size:'+fontSize+';color:'+fontHoverColour+';font-weight:'+fontWeight+';background-color:'+menuHoverBackground+'; cursor:hand; text-decoration:'+fontDecoration+'}');document.writeln ('.rcSubMenuStatic {font-family:'+sfontFace+';font-size:'+sfontSize+';color:'+sfontColour+';font-weight:'+sfontWeight+';text-decoration:'+sfontDecoration+';background-color:'+smenuBackground+'; cursor:hand}');document.writeln ('.rcSubMenuHover  {font-family:'+sfontFace+';font-size:'+sfontSize+';color:'+sfontHoverColour+';font-weight:'+sfontWeight+';text-decoration:'+sfontDecoration+';background-color:'+smenuHoverBackground+'; cursor:hand}');document.writeln ('</style>');// Build and show the main menu itemsfunction showMenus(){  if (orientation == "vertical")  {    document.writeln ('<table border="0" cellpadding="0" cellspacing="'+cellBorder+'" bgColor="'+borderColor+'">')  }  else  {    document.writeln ('<table border="0" cellpadding="0" cellspacing="'+cellBorder+'" bgColor="'+borderColor+'"><tr>')  }    for (x=0; x<Menu.length; x++)  {    if (orientation=="vertical") document.writeln('<tr>')    document.writeln ('<td onclick="tdMouseClick(\'mainLink'+x+'\')" onMouseOver="hoverMenu(); popDown('+x+', \'button'+x+'\'); " onMouseOut="clearMenu('+x+')" ><div id="button'+x+'"><table border="0" cellpadding="'+cellPadding+'" cellspacing="0" width="100%"><tr><td class="rcMenuStatic" id="cell'+x+'" nowrap>');    document.writeln ('<a id="mainLink'+x+'" href="'+Menu[x][1]+'" target="'+Menu[x][2]+'" class="rcMenuStatic">'+Menu[x][0]+'</a></td>');    document.writeln ('</tr></table></div></td>');        if (orientation=="vertical") document.writeln('</tr>')  }  if (orientation == "vertical")  {    document.writeln ('</table>');  }  else  {      document.writeln ('</tr></table>');  }   }  // Build the sub menu items  for (x=0; x<Menu.length; x++)  {     if (subMenu[x].length > 0)    {           document.writeln ('<div id="MENU'+x+'" style="visibility:hidden; position:absolute; z-index:2" >');      document.writeln ('<table border="0" cellpadding="'+cellPadding+'" cellspacing="'+cellBorder+'" bgColor="'+sborderColor+'">');      for (y=0; y<subMenu[x].length; y++)      {        document.writeln ('<tr><td id="subMenu'+x+y+'" class="rcSubMenuStatic" onMouseOver="hoverMenu(); highlightMenu(\'sub\','+x+','+y+')" onMouseOut="clearMenu('+x+');" onclick="tdMouseClick(\'subLink'+x+y+'\')" nowrap><a id="subLink'+x+y+'" href="'+subMenu[x][y][1]+'" target="'+subMenu[x][y][2]+'" class="rcSubMenuStatic">'+subMenu[x][y][0]+'</a></td></tr>');      }      document.writeln ('</table></div>');    }  } // Change colour or menu and submenu items when the mouse hovers over.  function highlightMenu(element,mainMenu,dropMenu,state){  state=(state == "hover")?"rcMenuHover":"rcMenuStatic"  if (element == "sub")  {    for (x=0; x < subMenu[mainMenu].length; x++)    {      eval(obj+'("subMenu'+mainMenu+x+'").className = "rcSubMenuStatic"')      eval(obj+'("subLink'+mainMenu+x+'").className = "rcSubMenuStatic"')    }       eval(obj+'("subMenu'+mainMenu+dropMenu+'").className="rcSubMenuHover"')    eval(obj+'("subLink'+mainMenu+dropMenu+'").className="rcSubMenuHover"')  }  else  {    eval(obj+'("cell'+mainMenu+'").className = "'+state+'"')    eval(obj+'("mainLink'+mainMenu+'").className = "'+state+'"')  }}// Find positioning for sub menusfunction getOffset(obj, dim) {  if(dim=="left")   {    oLeft = obj.offsetLeft;          while(obj.offsetParent!=null)     {         oParent = obj.offsetParent          oLeft += oParent.offsetLeft       obj = oParent     }    return oLeft;  }  else if(dim=="top")  {    oTop = obj.offsetTop;    while(obj.offsetParent!=null)     {      oParent = obj.offsetParent      oTop += oParent.offsetTop      obj = oParent     }    return oTop  }  else  {    alert("Error: invalid offset dimension '" + dim + "' in getOffset()")    return false;  }}// Show sub menusfunction popDown(param, id){  var menu;  var button;  if (id)  {        getOffset(eval(obj+'(id)'),'left');    getOffset(eval(obj+'(id)'),'top');  }    n = 0;      while (n < Menu.length)  {              //button = eval(obj+'("cell'+n+'")')    menu = "MENU"+n    if (param == n)    {        if (eval(obj+'(menu)'))        {          eval(obj+'(menu).style.visibility = "visible"')          eval(obj+'(menu).style.left = oLeft + horizontalOffset;')          eval(obj+'(menu).style.top = oTop + verticalOffset;')        }         highlightMenu('main',n,'','hover')         if (subMenu[param].length > 0)         {           for (x=0; x<subMenu[param].length; x++)           {             eval (obj+'("subMenu'+param+x+'").className = "rcSubMenuStatic"')             eval (obj+'("subLink'+param+x+'").className = "rcSubMenuStatic"')                    }         }      }      else       {                  if (eval(obj+'(menu)'))        {          eval(obj+'(menu).style.visibility = "hidden"')                    }        highlightMenu ('main',n,'','static')      }    n++  }  }// Re-set timer for sub menusfunction hoverMenu(){  if(timer)  clearTimeout(timer)}// Set timer for sub menusfunction clearMenu(menu){  setDelay = subMenuDelay*1000  delay = (subMenu[menu].length > 0)?setDelay:1    timer = setTimeout("popDown("+(Menu.length + 1)+")",delay)}// when you click the box, perform the same function as if the user had clicked the hyperlinkfunction tdMouseClick(theElement){  eval(obj+'(theElement).click()')}////// END MENU CODE  /////////////////////////////////////////////////////////////////////--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>  <TBODY>  <TR>    <TD align=left>      <SCRIPT>showMenus()</SCRIPT>    </TD></TR></TBODY></TABLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->