DelphiFAQ Home Search:
General :: Web publishing :: JavaScript
Code snippets to add functionality to your HTML pages, preferably cross-browser.

Articles:

This list is sorted by recent document popularity (not total page views).
New documents will first appear at the bottom.

Featured Article

Creating a dropdown menu with Javascript

Question:

How can I create a navigation menu on the fly?

Answer:

Take the HTML from below. It uses a little graphic for the downpointing arrow. You can download that graphic here. Save it in the same folder where your HTML page is.

The menu will look like this:

 

<html>
 <head>
 <style>
 #ddmenu a{ text-decoration:none; }
 #ddmenu a:hover{ background-color:#FFFF95; 
 }
 </style>
 </head>
 <body>
 
 <script language="JavaScript1.2">
 
 document.write('<span style="position:relative;width:50px;');
 document.write('height:20px;border:1px solid black;font:bold 10pt Verdana;');
 document.write('padding:2px" onClick="toggle_menu(1);');
 document.write('event.cancelBubble=1" ><span style="cursor:hand;width:100%">');
 document.write('Portals <img width=10 height=5 src="down.gif"></span>')
 document.write('<div id="ddmenu" style="position:absolute;left:2;top:16;width:90px;');
 document.write('height:80px;border:1px solid black;background-color:white;');
 document.write('overflow-y:scroll;visibility:hidden;">')
 
 function additem(linkname,dest){ 
   document.write('<b><a target=_blank href="'+dest+'">'+linkname+'</a></b><br>')
 }
 
 function toggle_menu(state){
 var theMenu=document.getElementById("ddmenu").style;
 if (state==0) { 
   theMenu.visibility="hidden" }
 else {
   theMenu.visibility = (theMenu.visibility=="hidden") ? "visible" : "hidden";
 }
 }
 
 additem("Google","http://www.google.com");
 additem("Yahoo","http://www.yahoo.com");
 additem("Teoma","http://www.teoma.com");
 
 document.onclick= function() {toggle_menu(0); }
 document.write('</div></span>')
 </script>
 
 
 </body>
 </html>
 

Generated 0:02:12 on Dec 13, 2017