A vertical collapsible, expandable menu is a great way to organize a large site and create a much more user friendly experience. A navigation menu is probably one of the most critical pieces in web design. So making your navigation subcats easy to find and all in one location can be a great way to help your user’s find things on your website.

In this article I show by example a vertical collapsible, expandable menu which is extremely easy to implement and can be great for organizing large navigation systems.

Start by organizing your menu subcats into categories and subcategories.

Menu Example

Click on the links below to expand and collapse the categories.

• Category 1
  • subcat 1a
  • subcat 1b
  • subcat 1c
  • subcat 1d
• Category 2
  • subcat 2a
  • subcat 2b
  • subcat 2c
  • subcat 2d
• Category 3
  • subcat 3a
  • subcat 3b
  • subcat 3c
  • subcat 3d
• Category 4
  • subcat 4a
  • subcat 4b
  • subcat 4c
  • subcat 4d
• Category 5
  • subcat 5a
  • subcat 5b
  • subcat 5c
  • subcat 5d

The first thing you’ll need is the Javascript code which collapses and expands the menu.

var myvar;
function menuinit() {
document.getElementById(‘m1′).style.display = ‘none’;
document.getElementById(‘m2′).style.display = ‘none’;
document.getElementById(‘m3′).style.display = ‘none’;
document.getElementById(‘m4′).style.display = ‘none’;
document.getElementById(‘m5′).style.display = ‘none’;

}
function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById(i).style.display = ‘none’;
myvar = ”;
}
else {
document.getElementById(i).style.display = ‘block’;
myvar = i;
}
}

if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, menuinit, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, menuinit );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
menuinit();
};
}
else
window.onload = init;
}

To add additional categories to this you’ll need to add to the Javascript as well. For example to add a sixth category to this menu, simply add the following line of code to the end of the menuinit() function.

document.getElementById(‘m5′).style.display = ‘none’;

You can add as many extra categories as you need this way.

The HTML code

<ul id=”nav”>
<li> <a id=”pm1″ onclick=”menuexpand(‘m1′);return false;” href=”#”>Category 1</a>
<ul id=”m1″>
<li><a href=”#”>subcat 1a</a></li>
<li><a href=”#”>subcat 1b</a></li>
<li><a href=”#”>subcat 1c</a></li>
<li><a href=”#”>subcat 1d</a></li>
</ul>
</li>
<li> <a id=”pm2″ onclick=”menuexpand(‘m2′);return false;” href=”#”>Category 2</a>
<ul id=”m2″>
<li><a href=”#”>subcat 2a</a></li>
<li><a href=”#”>subcat 2b</a></li>
<li><a href=”#”>subcat 2c</a></li>
<li><a href=”#”>subcat 2d</a></li>
</ul>
</li>
<li> <a id=”pm3″ onclick=”menuexpand(‘m3′);return false;” href=”#”>Category 3</a>
<ul id=”m3″>
<li><a href=”#”>subcat 3a</a></li>
<li><a href=”#”>subcat 3b</a></li>
<li><a href=”#”>subcat 3c</a></li>
<li><a href=”#”>subcat 3d</a></li>
</ul>
</li>
<li> <a id=”pm4″ onclick=”menuexpand(‘m4′);return false;” href=”#”>Category 4</a>
<ul id=”m4″>
<li><a href=”#”>subcat 4a</a></li>
<li><a href=”#”>subcat 4b</a></li>
<li><a href=”#”>subcat 4c</a></li>
<li><a href=”#”>subcat 4d</a></li>
</ul>
</li>
<li> <a id=”pm5″ onclick=”menuexpand(‘m5′);return false;” href=”#”>Category 5</a>
<ul id=”m5″>
<li><a href=”#”>subcat 5a</a></li>
<li><a href=”#”>subcat 5b</a></li>
<li><a href=”#”>subcat 5c</a></li>
<li><a href=”#”>subcat 5d</a></li>
</ul>
</li>
</ul>

Download the files

The CSS File
The Javascript File