<!--- I'm using the cfBookclub example database that comes with coldFusion --->
<!--- 1. build you query --->
<CFQUERY NAME="getMenus" DATASOURCE="cfbookclub">
Select TITLE, BOOKID
From BOOKS
</CFQUERY>
<html>
<head>
<!--- Set up Style for the elements --->
<style>
body{font-family:arial;}
table{font-size:80%}
a{color:black;text-decoration:none;font:bold}
a:hover{color:##9933ff}
td.menu{background:#ffffcc}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<!--- the hide and show functions --->
<script type="text/javascript">
//show function
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
// hide function
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
</head>
<body>
<h3>Dynamic Drop Down</h3>
<table width="200">
<tr bgcolor="#99ffff">
<!--- notice the mouseover and mouse out effects --->
<td onmouseover="showmenu('nBooks')" onmouseout="hidemenu('nBooks')">
<a href="books.cfm">Books</a><br />
<!--- assign the id --->
<table class="menu" id="nBooks" width="120">
<!--- display query results --->
<cfoutput query="getMenus"><tr><td class="menu"><a href="display.cfm?id=#BOOKID#">#TITLE#</a></td></tr></cfoutput>
</table>
</td>
</tr>
</table>
</body>
</html>
<!--- and thats all there is to it --->
buid a dynamic drop down menu, coldfusion and javascript
9 Sep, 2005 - 04:55 AM
| 