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.
HTML Code for The Menu
The menu is constructed with an HTML table (<table> </table>).
Each main menu and each submenu is coded as a row in the table (<tr> </tr>).
Each submenu row contains two cells or table data elements (<td> </td>).
Each main menu row contains one cell with its colspan attribute set to 2.
<tr>
<td colspan="2"><a href="#" onClick="expandMenu(0); return false;">
<img id="m0" border="0" src="closed.gif"">&:nbsp;Menu 0</a></td>
</tr>
Shown above is code for the first main menu item. Note that the table cell contains
a link, and that the normal function of the link is disabled (by href="#" and return false;)
and that instead the links onClick event is used to call a function named
expandMenu, passing it the number of the menu (in this case 0, the first menu).
The link uses both an image (closed.gif) and text (Menu 0). Note the image has an
id attribute which we can access with Java Script to change the image when
the link is clicked. You change the text to the name of your menu item.
<tr id="sm00" style="display:none">
<td>&:nbsp;</td>
<td><a href="#">Submenu 0</a></td>
</tr>
Shown above is code for the first submenu item. Note that the table row has the
style attribute set to display:none. This causes the table row to NOT
be displayed. Note that the table row has an id attribute which we can access
with Java Script to change the display style (to block to make it visible).
The first cell in the submenu row contains only a &:nbsp; (non-breaking
space character code) which causes the submenu item to appear indented. The second
cell in the submenu row contains a link. Replace the # in this link with
the URL for your submenu item. The second cell in the submenu row also contains
text (Submenu 0). You change the text to the name of your submenu item.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Menu 0
RSS Feed
Follow @Stephen Bucaro
General Web Design
