Building An Expanding DHTML Menu With CSS and JavaScript

By Joseph De Araujo

Introduction

Today I am going to show you the different parts that make up a dropdown vertical menu for your website. This is not like your normal dropdown menu, which appears at the top of your content, however -- these menus expand and remain visible until they are collapsed with the click of a mouse. The menu content actually expands with your page content, pushing the rest of whatever is below it down - so it can actually be used for more than just a menu (I might explore that a little later in another tutorial).

For now, let's get it started...

What does the finished menu look like and how does it function?

Here's a snapshot of what the menu looks like all coded up.

When you click on one of the links ie. Menu 1, Menu 2, Menu 3, Menu 4, Menu 5, this will expand or contract the submenu for that menu item. Basically, the end user must have JavaScript enabled to allow the submenus to work.

Let's build the menu html

First I'm going to start with the 5 menus items. Here's the code that I'm using, which is very simple; 5 hyperlinks. I will need to apply a style to these level one links, so I will make a class style called "menu1".

<a class="menu1">Menu 1</a>
<a class="menu1">Menu 2 </a>
<a class="menu1">Menu 3 </a>
<a class="menu1">Menu 4 </a>
<a class="menu1">Menu 5 </a>

Now I will create the menu1 class style and put it in the head of my document. So far we haven't done anying revolutionary. I won't explain the style that I've applied here because it's pretty straight forward - it's just a background image and the display:block makes it display like a rectangle.

<style type="text/css">
.menu1{
background-image:url(images/menudiv1bg.gif);
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
</style>

Now I'll add the sub menus in place exactly where they will appear. In this part, we will use some small tricks to setup the alignment. Firstly, we'll wrap the whole submenu in a div that has a unique id for each menu. You can choose your own names for the div tags, but the main purpose of the div having a unique id is so that JavaScript can target that div specifically and make it appear or disappear. I also add a class style called 'hide' so that I can choose to hide all of the submenus from within my style sheet. The links are then listed within the div just like the main menu items and are given a submenu class style, to allow me to control the look of those in my style sheet as well:

<a class="menu1" >Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a class="menu1">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a class="menu1">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a class="menu1">Menu 4 </a>
    <div id="mymenu4" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a class="menu1">Menu 5 </a>
    <div id="mymenu5" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>

I'll add the submenu and the 'hide' style to my style sheet now:

.submenu{
background-image: url(images/submenu.gif);
display: block;
height: 19px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}

.hide{
display: none;
}

I'll also create the style that will show the hidden div tags (submenus):

.show{
display: block;
}

Creating the JavaScript

If you're not too familiar with JavaScript or are in a rush, feel free to just copy and paste the code shown below into your page header as is. There are no further tricky parts to setup as the JavaScript simply compares the current state of the chosen submenu and then swaps it, meaning that if it's hidden, then it will be made visible, and vice versa.

Here's the code:

Some Geek Speak, for those who just want to know what's happening in the code.

Ok. What's happening here is that when the page loads, the JavaScript and CSS styles in the head will load first and then your menu links will appear in the body of the page. JavaScript is loaded from top to bottom by the browser, so let's read from inside the script tags:

The menu_status = new Array(); line will create a container ready to store the current state of your menu. This corresponds to the sections of the code that actually say what this menu_status now equals. eg. menu_status = 'show'; and menu_status = 'hide';

There's a function called showHide(theid) but this won't do anything unless it is called from within your HTML code. 'theid' is the id of the menu being shown or hidden, and it's called during the onClick even of that menu, such as onclick="showHide('mymenu5')".

Ok, so the function loads ready to be used, but the page continues to load...

Your main links and submenus load, but only the main links show because the 'hide' style that's applied to the submenus will hide the submenus. The submenus have in fact loaded already, they just aren't showing just yet.

If you click on a main menu link, then here's what happens:

The onClick event will fire up the showHide function and JavaScript will know which object we are working with by the id of the link.
JavaScript will get the menu element in question by the id that's passed to the function
JavaScript now has to check whether the current menu_status is visible or not, and then swap it. If it's not 'show' eg. if(menu_status[theid] != 'show') then the status_id will be made to equal 'show'. If it's not hide, eg. if(menu_status[theid] != 'hide') then it will be made to equal 'hide'.

Conclusion
In this article I've shown you how to build a basic vertical drop down menu using DHTML and JavaScript. This is a groovy little script that will allow you to create a nice menu, or even save you some space if you currently have multi level menus laid out on your site. You can probably do more with this script if you're familiar with JavaScript or don't mind experimenting, but we'll leave it at that for now!

88 Responses to "Building An Expanding DHTML Menu With CSS and JavaScript"

Fill in the form below to leave a comment and share your thoughts.

Jennifer

said this on 26 Dec 2005 3:02:22 PM CDT

This is excellent! Thank you very much! Your tutorial of an expanding menu was just about the only one that I understood, and wasn't needlessly complicated. It is also very cross-platform, which isn't something I can say for some of the others I've run across. I will definetely reccomend your tutorial(s) to others when asked. Linked in my favorites and from my website.

Thank you again,
Jennifer