|
Easy Expanding Menu Code
By Stephen Bucaro
If you want your Web site visitors to stick around for a while, you need to provide
lots of high quality content. But just having lots of high quality content isn't enough.
Visitors must know that the content is there to be had, and it must be easily accessible.
The best solution is to place a complete menu on every page. But if you have a large
quantity of content, your menu could get excessively long. One way to solve this problem
is to provide an expanding menu. But most of the example code on the web for expanding
menus is way too complicated to adapt for your own use.
In this article, I provide you with simple code that you can easily adapt to your own
Web site. To keep it simple, the code will create a menu that expands only one level.
Actually one level of expansion is all you should use, because going deeper causes loss
of easy access to the content.
To use the code, you could simpley cut and paste, or download, the code and immediately
modify it for your use. But you would be wise to work through the expanation below so
that you become the master of the code.
The basic function of the expanding menu relies on the style sheets "display" property.
To expand a submenu, we will set the "display" property of the submenu items to "block".
This value causes an element to be followed by a line break. The line break will keep
the menu items in a nice column. To hide a submenu, we will set the "display" property
of the submenu items to "none". This will cause the submenu items to disappear.
Open a text file and enter the code for a table, as shown below. This defines the
basic structure of the expandable menu.
<table>
<!-- MENU 0 -->
<tr>
<td> </td>
<td><a href="#">Menu 0</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 0</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 1</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 2</a></td>
</tr>
<!-- MENU 1 -->
<tr>
<td> </td>
<td><a href="#">Menu 1</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 0</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 1</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 2</a></td>
</tr>
<!-- MENU 2 -->
<tr>
<td> </td>
<td><a href="#">Menu 2</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 0</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 1</a></td>
</tr>
<tr>
<td> </td>
<td><a href="#">Submenu 2</a></td>
</tr>
</table>
 Note: If you've
fogotten basic html, the tags <tr></tr> define a table row. Within a table row,
the tags <td></td> define a table cell.
| 
Free Downloads
RSS Feed