Building An Expanding DHTML Menu With CSS and JavaScript

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!

—

Are
you a web designer, developer or freelancer who’s looking to get the
edge on your competitors? If so, we can help. To learn more about us,
how we can help you attract new customers, increase your profits,
product and service offerings, please visit our website at http://www.interspire.com

Share and Enjoy:

This entry was posted on Wednesday, October 18th, 2006 at 12:00 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

QuickPipe