Easy Three-level Expanding Menu Code

By Stephen Bucaro

In a previous article, I described an easy method to create an expanding menu similar to Windows Explorer, but with only one level of sub-menus. This article provides code for a similar expanding menu, except with two levels of sub-menus.

This example requires three blocks of code, html to create the menu, CSS to style the menu and add mouse over effects, and Java Script to toggle the menu elements display properties which causes them to expand and unexpand. I promise you that all this code is extremely simple and I'll explain it in excruciating detail. First let's start with a basic description of the html.

Shown below is an example of code for a folder containing two files.

<a class="folder" href="#" onclick="toggleMenu('s1')">
<img id="is1" align="left" border="0" src="closed.gif">Sub Menu 1</a><br />

<div id="s1" style="display:none; margin-left:16px;">
  <a class="menulink" href="#">Link Text</a><br />
  <a class="menulink" href="#">Link Text</a><br />
</div>

Contained Within the bottom div are two links with class="menulink". These represent links to files within a folder. In these two links, you would edit Link Text to your link's text, and you would replace the # character with the complete or relative path to your destination page. You can simply cut-and paste lines to add more links, or delete a line to remove a link.

• Note that I applied an inline style attribute to this div. Some designers would say this is high treason against the basic principles of CSS. Since there are only two rules in this style definition, I wouldn't save much bandwidth by using a class attribute.

Immediately above the div is a link who's onclick event executes a function named toggleMenu passing the id of the above mentioned div to the function. This function toggles the display property of the div. We'll describe this function a little later. You would change the text Sub Menu 1 to the name of your folder.

Shown below is an example of code for a folder containing a subfolder which contains two files.

<a class="folder" href="#" onclick="toggleMenu('t1')">
<img id="it1" align="left" border="0" src="closed.gif">Top Menu 1</a><br />

<div id="t1" style="display:none; margin-left:16px;">

  <a class="folder" href="#" onclick="toggleMenu('s1')">
  <img id="is1" align="left" border="0" src="closed.gif">Sub Menu 1</a><br />

  <div id="s1" style="display:none; margin-left:16px;">
    <a class="menulink" href="#">Link Text</a><br />
    <a class="menulink" href="#">Link Text</a><br />
  </div>

</div>

Can you see the code we described previously nested inside the new div? Immediately above the new div is a link who's onclick event calls the toggleMenu function, passing the id of the new div. This causes the new div and its entire contents to toggle between visible (display:block;) and invisible (display:hidden;). In other words to expand or unexpand.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed