Javascript: Static Top Menu Bar

ncthakur.itgo.com Javascript: Static Top Menu Bar
NEPAL \| ARTICLES \| KAVITAHARU \| MANTHAN \| COOL LINKS \| GUESTBOOK \| SEARCH

JAVASCRIPT As I have learned as a beginner: 1. Opening New Window 2. Use of Alert, Prompt & Confirm 3. Document Write 4. Use of Function 5. Event Handlers (Image Rollover) 6. If and Else Statement 7. Predefined Object (Date) 8. Cut & Paste JavaScript NEPAL Overview of Nepal Map & images Nepalese websites KAVITAHARU View few of my poems written in Nepali language ARTICLES Articles on crime prevention investigation & crime control COOL LINKS Computer Travel & Tour Police World Downloads Personality Test Nepal News Crime & Police News Nepali Music Health Horoscope Monthly Poll Other ADD EMAIL Search or add email to the search list. GUESTBOOK View to find out what other visitors have to say about this web site. KURAKANI Are you interested to chat? Go to Kurakani room. FREE E-CARDS Enormous free E-Cards of your choice. Send it to your friend and family members. FREE SITE SUBMIT Submit your web site to the major search engines here. ABOUT ME Click here to find out about me and view few of my photographs.		Cut and Paste JavaScript Static Top Menu Bar (Look at the TOP for example) To install this script, do the following 3 steps: 1) Add the following code inside the HEAD section of your page: <style> <!-- all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;} .clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;} A:hover {color: red;} --> </style> 2) Copy and paste the below code into your webpage, RIGHT AFTER the body tag (proceeding any other tags): <script language="JavaScript" src="menu.js"> /* Static Top Menu Script By Constantin Kuznetsov Jr. (GoldenFox@bigfoot.com) Featured on Dynamicdrive.com For full source code and installation instructions to this script, visit Dynamicdrive.com / </script> <script language="JavaScript" src="menucontext.js"></script> <script language="JavaScript"> showToolbar(); </script> <script language="JavaScript"> function UpdateIt(){ if (document.all){ document.all["MainTable"].style.top = document.body.scrollTop; setTimeout("UpdateIt()", 200); } } UpdateIt(); </script> 3) Upload the files "menu.js" and "menucontext.js" into your webpage directory (along with the above webpage, of course), and you're done! menu.js* if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";} if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";} window.onerror=new Function("return true") //////////////////////////////////////////////////////////////////////////// // Function Menu() // //////////////////////////////////////////////////////////////////////////// rightX = 0; function Menu() { this.bgColor = "#008080"; if (ie) this.menuFont = "bold xx-small Verdana"; if (n) this.menuFont = "bold x-small Verdana"; // this.fontColor = "white"; this.addItem = addItem; this.addSubItem = addSubItem; this.showMenu = showMenu; this.mainPaneBorder = 1; this.subMenuPaneBorder = 1; this.subMenuPaneWidth = 150; lastMenu = null; rightY = 0; leftY = 0; leftX = 0; HTMLstr = ""; HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n"; HTMLstr += "\n"; if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n"; // if (n) HTMLstr += "<layer name='MainTable'>\n"; HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n"; HTMLstr += "<tr>"; if (n) HTMLstr += "<td> "; HTMLstr += "<!-- MAIN MENU STARTS -->\n"; HTMLstr += "<!-- MAIN_MENU -->\n"; HTMLstr += "<!-- MAIN MENU ENDS -->\n"; if (n) HTMLstr += "</td>"; HTMLstr += "</tr>\n"; HTMLstr += "</table>\n"; HTMLstr += "\n"; HTMLstr += "<!-- SUB MENU STARTS -->\n"; HTMLstr += "<!-- SUB_MENU -->\n"; HTMLstr += "<!-- SUB MENU ENDS -->\n"; HTMLstr += "\n"; if (ie) HTMLstr+= "</div>\n"; // if (n) HTMLstr+= "</layer>\n"; HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n"; } function addItem(idItem, text, hint, location, altLocation) { var Lookup = "<!-- ITEM "+idItem+" -->"; if (HTMLstr.indexOf(Lookup) != -1) { alert(idParent + " already exist"); return; } var MENUitem = ""; MENUitem += "\n<!-- ITEM "+idItem+" -->\n"; if (n) { MENUitem += "<ilayer name="+idItem+">"; MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">"; MENUitem += "\| "; MENUitem += text; MENUitem += "</a>"; MENUitem += "</ilayer>"; } if (ie) { MENUitem += "<td>\n"; MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n"; MENUitem += "<a "; MENUitem += "class=clsMenuItemIE "; // MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' "; if (hint != null) MENUitem += "title='"+hint+"' "; if (location != null) { MENUitem += "href='"+location+"' "; MENUitem += "onmouseover=\"hideAll()\" "; } else { if (altLocation != null) MENUitem += "href='"+altLocation+"' "; else MENUitem += "href='.' "; MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" "; MENUitem += "onclick=\"return false;\" " } MENUitem += ">"; MENUitem += "\| \n"; MENUitem += text; MENUitem += "</a>\n"; MENUitem += "</div>\n"; MENUitem += "</td>\n"; } MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n"; MENUitem += "<!-- MAIN_MENU -->\n"; HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem); } function addSubItem(idParent, text, hint, location) { var MENUitem = ""; Lookup = "<!-- ITEM "+idParent+" -->"; if (HTMLstr.indexOf(Lookup) == -1) { alert(idParent + " not found"); return; } Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->"; if (HTMLstr.indexOf(Lookup) == -1) { if (n) { MENUitem += "\n"; MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n"; MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n"; MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; MENUitem += "</table>\n"; MENUitem += "</layer>\n"; MENUitem += "\n"; } if (ie) { MENUitem += "\n"; MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n"; MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n"; MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; MENUitem += "</table>\n"; MENUitem += "</div>\n"; MENUitem += "\n"; } MENUitem += "<!-- SUB_MENU -->\n"; HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem); } Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n"; if (ie) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n"; MENUitem += Lookup; HTMLstr = HTMLstr.replace(Lookup, MENUitem); } function showMenu() { document.writeln(HTMLstr); } //////////////////////////////////////////////////////////////////////////// // Private declaration function displaySubMenu(idMainMenu) { var menu; var submenu; if (n) { submenu = document.layers[idMainMenu+"submenu"]; if (lastMenu != null && lastMenu != submenu) hideAll(); submenu.left = document.layers[idMainMenu].pageX; submenu.top = document.layers[idMainMenu].pageY + 25; submenu.visibility = fShow; leftX = document.layers[idMainMenu+"submenu"].left; rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width; leftY = document.layers[idMainMenu+"submenu"].top+ document.layers[idMainMenu+"submenu"].clip.height; rightY = leftY; } else if (ie) { menu = eval(idMainMenu); submenu = eval(idMainMenu+"submenu.style"); submenu.left = calculateSumOffset(menu, 'offsetLeft'); // submenu.top = calculateSumOffset(menu, 'offsetTop') + 30; submenu.top = menu.style.top+23; submenu.visibility = fShow; if (lastMenu != null && lastMenu != submenu) hideAll(); leftX = document.all[idMainMenu+"submenu"].style.posLeft; rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth; leftY = document.all[idMainMenu+"submenu"].style.posTop+ document.all[idMainMenu+"submenu"].offsetHeight; rightY = leftY; } lastMenu = submenu; } function hideAll() { if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;} } function calculateSumOffset(idItem, offsetName) { var totalOffset = 0; var item = eval('idItem'); do { totalOffset += eval('item.'+offsetName); item = eval('item.offsetParent'); } while (item != null); return totalOffset; } function updateIt(e) { if (ie) { var x = window.event.clientX; var y = window.event.clientY; if (x > rightX \|\| x < leftX) hideAll(); else if (y > rightY) hideAll(); } if (n) { var x = e.pageX; var y = e.pageY; if (x > rightX \|\| x < leftX) hideAll(); else if (y > rightY) hideAll(); } } if (document.all) { document.body.onclick=hideAll; document.body.onscroll=hideAll; document.body.onmousemove=updateIt; } if (document.layers) { document.onmousedown=hideAll; window.captureEvents(Event.MOUSEMOVE); window.onmousemove=updateIt; } menucontext.js function showToolbar() { // AddItem(id, text, hint, location, alternativeLocation); // AddSubItem(idParent, text, hint, location); menu = new Menu(); menu.addItem("webmasterid", "Web Building Sites", "Web Building Sites", null, null); menu.addItem("newsid", "News Sites", "News Sites", null, null); menu.addItem("freedownloadid", "Free Downloads", "Free Downloads", null, null); menu.addItem("searchengineid", "Search Engines", "Search Engines", null, null); menu.addItem("miscid", "Miscellaneous", "Miscellaneous", null, null); menu.addSubItem("webmasterid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/"); menu.addSubItem("webmasterid", "Website Abstraction", "Website Abstraction", "http://www.wsabstract.com/"); menu.addSubItem("webmasterid", "Web Review", "Web Review", "http://www.webreview.com/"); menu.addSubItem("webmasterid", "Developer.com", "Developer.com", "http://www.developer.com/"); menu.addSubItem("webmasterid", "Freewarejava.com", "Freewarejava.com", "http://www.freewarejava.com/"); menu.addSubItem("webmasterid", "Web Monkey", "Web Monkey", "http://www.webmonkey.com/"); menu.addSubItem("webmasterid", "Javascript", "Javascript", "http://ncthakur.itgo.com/cutpastejs.htm"); menu.addSubItem("webmasterid", "Jars", "Jars", "http://www.jars.com/"); menu.addSubItem("newsid", "CNN", "CNN", "http://www.cnn.com"); menu.addSubItem("newsid", "ABC News", "ABC News", "http://www.abcnews.com"); menu.addSubItem("newsid", "MSNBC", "MSNBC", "http://www.msnbc.com"); menu.addSubItem("newsid", "CBS news", "CBS News", "http://www.cbsnews.com"); menu.addSubItem("newsid", "News.com", "News.com", "http://news.com"); menu.addSubItem("newsid", "Wired News", "Wired News", "http://www.wired.com"); menu.addSubItem("newsid", "TechWeb", "TechWeb", "http://www.techweb.com"); menu.addSubItem("freedownloadid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/"); menu.addSubItem("freedownloadid", "Download.com", "Download.com", "http://download.com/"); menu.addSubItem("freedownloadid", "Nepali Font", "Nepali Font", "http://ncthakur.itgo.com/download.htm"); menu.addSubItem("freedownloadid", "Tucows", "Tucows", "http://tucows.com/"); menu.addSubItem("freedownloadid", "WinFiles.com", "WinFiles.com", "http://winfiles.com/"); menu.addSubItem("searchengineid", "Yahoo", "Yahoo", "http://www.yahoo.com/"); menu.addSubItem("searchengineid", "Infoseek", "Infoseek", "http://www.infoseek.com/"); menu.addSubItem("searchengineid", "Excite", "Excite", "http://www.excite.com"); menu.addSubItem("searchengineid", "HotBot", "HotBot", "http://www.hotbot.com"); menu.addSubItem("miscid", "Hitbox.com", "Hitbox.com", "http://www.hitbox.com/"); menu.addSubItem("miscid", "Cnet", "Cnet", "http://www.cnet.com/"); menu.addSubItem("miscid", "Andover.net", "Andover.net", "http://www.andover.net/"); menu.addSubItem("miscid", "RealAudio", "RealAudio", "http://www.realaudio.com/"); menu.addSubItem("miscid", "MP3.com", "MP3.com", "http://www.mp3.com/"); menu.showMenu(); } The contents of the menu is stored inside "menucontext.js" To edit them, simply open up "menucontext.js" using any text editor, and change the links/text to your own. Save the modified file, and reupload it. If you wish the menu to push right up against the edges of your browser screen, add the following code into the tag itself, like this: <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"> BACK