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.

RSS Feed

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

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.