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">
<!--
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">
<!--
DHTML_Popup.DELAY = 300;
DHTML_Popup.ID = "navigation"
DHTML_Popup.mark = function(item) {
item.className = 'marked';
}
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">
<!--
DHTML_Popup.DELAY = 300;
DHTML_Popup.ID = "navigation"
DHTML_Popup.custom_show = Scrolling.scroll_in;
DHTML_Popup.custom_hide = Scrolling.scroll_out;
</script>