Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
For the purpose of this tutorial I decided that the code provided by W3 schools is perfect and I give full credit to them for the piece of code I will be using to explain concepts. Other then the code, this tutorial is written entirely by me.
The full working drop-down menu code is provided at the very end so you can follow the steps before you actually see the entire code.
Step 1: Create the table which will contain your menu
You will need a nice table (you can also use <div> but it is a little harder to align) for your main menu bar and your cub sections. You have to remember that you want your main bar to show at all times and the sub-categories to be hidden unless moused over. The table is hidden through the CSS property: visibility="hidden". This will be described in the next step. For now let's focus on making a table:
*Note: I have removed the classes and id's associated with each table cell to illustrate the concept of the table without the CSS properties.
*Note: The links in the table are relative and will not work.
<table width="100%"> <tr bgcolor="#FF8080"> <td> <a href="/default.asp">Tutorials</a><br /> <table width="120"> <tr><td><a href="/html/default.asp">HTML</a></td></tr> <tr><td><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td><a href="/css/default.asp">CSS</a></td></tr> <tr><td><a href="/xml/default.asp">XML</a></td></tr> <tr><td><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td> <a href="/default.asp">Scripting</a><br /> <table width="120"> <tr><td><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td><a href="default.asp">DHTML</a></td></tr> <tr><td><a href="/asp/default.asp">ASP</a></td></tr> <tr><td><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td> <a href="/site/site_validate.asp">Validation</a><br /> <table width="120"> <tr><td><a href="/site/site_validate.asp">Validate HTML</a></td></tr> <tr><td><a href="/site/site_validate.asp">Validate XHTML</a></td></tr> <tr><td><a href="/site/site_validate.asp">Validate CSS</a></td></tr> <tr><td><a href="/site/site_validate.asp">Validate XML</a></td></tr> <tr><td><a href="/site/site_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table>
The table above is composed of one main table containing a smaller table in each column. Without CSS you will not see anything special.
Step 2: Provide the CSS formatting for your table
What we want to do in this step is assign different classes and id's in order to format the contents of our tables with as little code as possible. In the head of your file (or in a separate css file. You must properly reference the outside file if you are doing it.) you need to add the following code and assign the table cells their respective classes and id's:
*Note: in order for you to see the effect of the following modification you need to assign each cell the appropriate tags. I left them out for you to try and assemble both pieces of code and assign the tags; if you do not wish to try it yourself, scroll down the page and copy the complete code.
*Note: the absolute positioning of the table allows it to appear above anything that might get in it's way.
<style type="text/css">
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>
Step 3: JavaScript onmouseOver and onmouseOut functions for the table
In this step you will see the actual JS part of the code. The drop down menu should obviously "drop down" (You can also make it an onclick event if you like. Make sure you change the function names appropriately if you decide to do so.) when the user mouses over the option. To do so you need to add onmouseover and onmouseout events to your main table. These events will be called upon and show/hide the secondary table when needed. The JS functions are used to modify the visibility of each cell; as explained above it is crucial for the cells to be first set to hidden.
*Note: do not forget to add the events to your tables which need to call the JS functions!
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
Try on your own:
*Simple
- Modify the tables or add your own columns/rows
- Change the links for those that suit your needs
*Advanced
- Modify the JavaScript to create a sliding effect for the drop down menu
- Modify the table to create a "vertical" menu
You should now have a nice page which has a bar with a drop down menu appearing when the user mouses over the option. Thank you for reading and once again all the code has been created by W3 Schools and I take absolutely no credit for the code.
Link to the original code provided by W3 Schools: Tryit Editor v1.4
Thank you for reading and hopefully you now understand how a complete drop-down menu is created/works. In a future tutorial I will be showing you how to modify this peice of code to achieve a slightly different result to meet your website's needs.
Full code for the drop down menu:
<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>
<h3>Drop down menu</h3>
<table width="400px">
<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="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br />
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br />
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>
Back to top
