1. Computing

Unobtrusive Collapsible Menu

2. HTML

To create our collapsible menu we first need to add the menus to the web page. Basically each menu consists of a heading (I used the h5 tag) and an unordered list. The menus are simply coded in the HTML where ever we want them to appear.

To these menus we add an id tag into each heading. For the script to work these ids all have to consist of the word "menu" followed by a number. The numbers must be consecutive starting from one.

The last thing to do is to wrap each group of menus inside a div with a class of "mC". Where the menus appear one immediately after the other one wrapper is sufficient. Where there are other headings and lists in between you need to wrap the groups of menus separately so that there is no code inside the divs that doesn't belong to the menus but which may be mistaken for part of one.

Here's what my collapsible menus on the introduction page look like with the modifications that are needed to attach the stylesheet and JavaScript as described above shown in bold.

<div class="mC">
<h5 id="menu1">+ Collapsible</h5>
<ul>
<li><a href="blucmenu2.htm">HTML</a></li>
<li><a href="blucmenu3.htm">Stylesheet</a></li>
<li><a href="blucmenu4.htm">JavaScript</a></li>
</ul>
<h5 id="menu2">+ Dropdown</h5>
<ul>
<li><a href="blsfmenu1.htm">Introduction</a></li>
<li><a href="blsfmenu2.htm">HTML</a></li>
<li><a href="blsfmenu3.htm">CSS</a></li>
<li><a href="blsfmenu4.htm">JavaScript</a></li>
</ul>
<h5 id="menu3">+ Sliding</h5>
<ul>
<li><a href="blsmenu.htm">Introduction</a></li>
<li><a href="blsmenu1.htm">The Script</a></li>
<li><a href="blsmenu2.htm">Make Menu</a></li>
</ul>
</div>

As you can see, the changes to the HTML to accomodate the script are minimal. To apply this script to your menus to make them collapsible you need to simply add the wrapper div and the ids to the headings and lists that you already have.

With the HTML in place the next step is to add the stylesheet.

©2014 About.com. All rights reserved.