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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Three-level Expanding Menu Code

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.

Expanding menu

<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.

Expanding menu

<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 RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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