A simple and accessible drop down menu

• Download source code - 26.3 KB

Introduction

Most drop down menus you find on the web are not free, and the ones which are free have a lot of disadvantages. They may disappear too quickly, have hardcoded layouts, be time expensive to implement, and so on. I have had some bad experiences and therefore decided to write my own, which I hope you will find useful. However, this is still a free menu and may not be as perfect as those expensive ones which you can buy online.

Compatibility

I have tested it in IE6+, Firefox, and Opera. Most of the problems you will get are related to CSS incompatibilities between browsers; the code itself is quite simple and shouldn't cause any problems.

Background

My aim was to create a flexible, accessible, and at the same time, simple, drop down menu which would work horizontally, vertically, and in which the menu items could have different layouts. I wanted something generic, not code with dirty hacks.

These days, we work on different projects and different projects have different needs, therefore the layout is managed via CSS, and also, there are functions which can be overridden. This gives great flexibility because you can change the way menus are displayed; i.e., the user can apply different effects (I have included a scrolling effect in the zip file).

Accessibility

It is very important that your JavaScript components are accessible, therefore the menu itself is an unordered list, which means that even if your style sheets are disabled, you can view it without any problems. Also, you can use the Tab key and Enter to tab through the menus.

Using the code

Include the ddmenu.js and common.js files in your HTML page. common.js contains common functions, and most importantly, a garbage collector which to some extent takes care of JavaScript memory leaks.

<script language="JavaScript" type="text/javascript" src="common.js"></script>
<script language="JavaScript" type="text/javascript" src="ddmenu.js"></script>

You will also have to include a stylesheet which will manage the layout of your drop down menu. To start with, include the stylesheets from the zip file called common.css and default_view.css. Stylesheets can be found in the styles directory.

<link rel="stylesheet" type="text/css" href="styles/common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/default_view.css" media="screen" />

Create an unordered list like in one of the example pages from the zip file. For each submenu, set the class name to default. The default tells that the menu should be shown in the default mode which is defined in the stylesheet. In your stylesheet, you can also create different views and set the menu class name to whatever the new view name is. For example, view information in the examples. Note that the unordered list has to be wrapped by a div element and that the div element should have an ID!

Once you have created the unordered list, you will need to add some more JavaScript code at the top of your HTML page:

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

//-->
</script>

DHTML_Popup.DELAY tells the menu the delay in milliseconds when a menu has to be shown or hidden. DHTML_Popup.ID is the ID of the div element which wraps all the menus. What happens is that the code goes through all the elements within the div and does its stuff. That is all you have to do!

Advanced functionality

As I mentioned earlier, you can override functions to gain extra functionality. The menu offers marking and a custom way of showing and hiding menus.

Marking

To use marking, two functions DHTML_Popup.mark and DHTML_Popup.unmark have to be overridden. See the example below.

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

// you can override some functions to implement marking of the path 
// item is a LI element in the menu 
DHTML_Popup.mark = function(item) {
    item.className = 'marked'; 
}

// have to use unmark otherwise marked elements are not going to be 
// reset
DHTML_Popup.unmark = function(item) {
    item.className = 'unmarked'; 
}
    
//-->
</script>

Effects

You can apply different effects to change how menus are going to appear to the user, as with marking, both the opening and closing functions must be overridden. Note that the process is more complex, therefore I suggest you look at the source code if you are really interested.

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

// you can write your own effects how menus are going to appear
// I have created a scrolling effect as a sample 
// 
// What you have to do is override two more functions 

// Do a scrolling in effect when menu has to be shown 
DHTML_Popup.custom_show = Scrolling.scroll_in; 

// Do a scrolling out effect when menu has to be hidden 
DHTML_Popup.custom_hide = Scrolling.scroll_out; 
    
//-->
</script>