1. Computing
Send to a Friend via Email

Collapsible Menu

4. Adding Menus

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introduction Head Script The Stylesheet

Most of our collapsible menu is actually handled by the HTML in our web page. Simply by assigning appropriate classes and ids to the various parts of our HTML and adding an onclick event handler to the menu headings we can convert ordinary links into a collapsible menu.

Let's start by creating link tags for all of our links and group them inside of div tags to identify the groups that we want to have collapse separately. What links you want in your own menus and how you group them will differ from mine so you will want to start with your own list of links to be converted into a set of collapsible menus. I'll use the first two collapsible menus from page one of this article as an example of how we go from a list of links into a set of collapsible menus:

<div>
<a href="blclmenu1.htm">Head Script</a>
<a href="blclmenu2.htm">Stylesheet</a>
<a href="blclmenu3.htm">Add Menus</a>
</div>
<div>
<a href="blmenu.htm">Introduction</a>
<a href="blmenu1.htm">Head Script</a>
<a href="blmenu2.htm">Customize</a>
<a href="blmenu3.htm">Body Script</a>
</div>

Next we add class="mO" to each of the individual links and class="mL" to each div tag. We also need to give each div tag a unique id that we can reference in order to collapse and show the menu. The top few lines of our HTML now looks like this (the rest is changed similarly - I used menu2 and menu3 for the ids for the second and third menus respectively):

<div id="menu1" class="mL">
<a class="mO" href="blclmenu1.htm">Head Script</a>
<a class="mO" href="blclmenu2.htm">Stylesheet</a>

The next step is to add the always visible heading in front of each of our collapsible menus. We put it into its own div along with class="mH" and an onclick event handler to call our Javascript toggleMenu function passing the id we gave the immediately following collapsible menu.

<div class="mH"
onclick="toggleMenu('menu1')">+ Collapsible</div>

<div id="menu1" class="mL">

The final step is to wrap the entire menu into one more div with class="mC". The following shows the final HTML that displays the collapsible menus on our page:

<div class="mC">
<div class="mH"
onclick="toggleMenu('menu1')">+ Collapsible</div>
<div id="menu1" class="mL">
<a class="mO" href="blclmenu1.htm">Head Script</a>
<a class="mO" href="blclmenu2.htm">Stylesheet</a>
<a class="mO" href="blclmenu3.htm">Add Menus</a>
</div>
<div class="mH"
onclick="toggleMenu('menu2')">+ Dropdown</div>
<div id="menu2" class="mL">
<a class="mO" href="blmenu.htm">Introduction</a>
<a class="mO" href="blmenu1.htm">Head Script</a>
<a class="mO" href="blmenu2.htm">Customize</a>
<a class="mO" href="blmenu3.htm">Body Script</a>
</div>
</div>
Related Video
Add Menu Buttons in iDVD
Create Tables in HTML

©2014 About.com. All rights reserved.