Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu nhiều cấp
URL: https://www.javascriptbank.com/sub-navigation.html
Hiệu ứng tạo một trình đơn nhiều cấp trên trang web, bạn có thể đặt trình đơn này ở vị trí bất kì trên trang web của mình.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu nhiều cấp
URL: https://www.javascriptbank.com/sub-navigation.html
<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 & 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--><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-->