C#
C++ (7)
Delphi (604)
Java (8)
JavaScript (55)
Document (8)
Events (8)
Strings (3)
perl (40)
php (12)
VBScript (1)
Visual Basic (1)
Exchange Links
About this site
Creating a dropdown menu with Javascript
1 comments. Current rating: 
(1 votes). Leave comments and/ or rate it.
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>
| ||
 |  |
Comments:
| ||
