|
|
top drop down
This simple drop down menu uses CSS rules and the hidden and visible attributes of the style object. The menu is always there – it’s just set to hidden. When you mouse over it, the property is changed to visible and you see the menu. Simple.
We use the getElementById() method to access the page properties and change only the hidden or visible property. Use a menu as simple or as complicated as needed. It doesn’t really matter. Change its appearance through the use of simple CSS rules. I’ve included 8 rules, and there are many more than that.
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu {
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt) {
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt) {
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="120">
<tr>
<td class="menu"><a href="page.html">List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item </a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item </a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item </a></td>
</tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href=" page.html ">Scripting</a
<table class="menu" id="scripting" width="120">
<tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a>
<table class="menu" id="validation" width="120">
<tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr><tr>
<td class="menu"><a href=" page.html "> List Item</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The list items are displayed as they appear within the table given. Notice that are a few nested tables used. You can do this in any complexity you need and include any valid HTML coding using any formatting options. You can even put images and/or a form with many input elements in each drop down list.
| |
