Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy Expanding Menu Code

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268