Unobtrusive Collapsible Menus

This is a rewrite of my collapsible menu script that uses modern unobtrusive techniques to attach the JavaScript to the menus making for more user friendly HTML that will still work as a menu even with JavaScript and stylesheets disabled.

This script allows you to have multiple collapsible menus on your page just as the earlier version did with each menu being able to be expanded and contracted independently. The difference from the earlier version is that with this version each menu is defined as a heading followed by a list in the HTML and there is only one class reference to add to the HTML to style the whole thing, and one id per menu to give the JavaScript something to interact with. The only actual JavaScript is added as an external script linked into the page immediately prior to the closing body tag.

The way that this script is coded should make it fairly easy to add the functionality to existing menus within your page.

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 a group of collapsible menus might look like after you have applied all of these adjustments.

<div class="mC">
<h5 id="menu1">+ Collapsible</h5>
<li><a href="blucmenu2.htm">HTML</a></li>
<li><a href="blucmenu3.htm">Stylesheet</a></li>
<li><a href="blucmenu4.htm">JavaScript</a></li>
<h5 id="menu2">+ Dropdown</h5>
<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>
<h5 id="menu3">+ Sliding</h5>
<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>

As you can see, the changes to the HTML that would display the menus as ordinary lists that we need to make to accommodate 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.

The next thing we need to do once we have the HTML for our collapsible menu set up is to style it. To do this simply add the following code either into your external stylesheet attached to the head of your page or put it between <style type="text/css"> and </style> in the head of the page.

.mC {width:100px; margin:5px; float:right;}
.mC h5 {color:#60c; cursor:pointer; font-weight:bold; border-top:1px solid #300;}
.mC ul {display:none; margin-left:0; margin-bottom:10px; padding-left:0; list-style: none;}
.mC li {margin-left:0; display:block;}

Should you decide to use a different heading tag for your menu then simply change the h5 reference to whatever heading tag you used. You can also change the width of the whole thing and/or the colour and font weight for the heading without affecting the menu operation but the rest of the styles must be as shown for the menus to display correctly. I haven't styled the <a> tags within my menu since how those are styled for their appearance does not affect the operation of the menu.

One potential accessibility issue with this script is that with the stylesheet in place the menus themselves will only be accessible via JavaScript. You may therefore want to provide an alternative way for people to use the menu if they do not have JavaScript.

The final step in allowing our now collapsed menus to be able to expand is to add the JavaScript. The first step to do this is to copy the script itself (below) and save it into its own file (eg. ucmenu.js).


Now all we need to do is to link that script into our page by adding the following code immediately before the </body> tag.

<script type="text/javascript" src="ucmenu.js"></script>

Our collapsible menus will now be fully functional provided that JavaScript is enabled and you didn't miss any numbers in assigning the ids to the headings.

One thing that I have received requests for is a variant of collapsible menus that will collapse any already open menu when opening a new one so that only one is open at a time. I didn't provide a version that does that with the original version of my collapsible menu script but since with this version has all the JavaScript in one place we'll next look at the changes to the JavaScript needed to get that effect.



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow