Need a menu for your Web app? Builder AU Technical Editor, David McAmis explains hierarchical menus and offers a free code download to get your project started.
Most Web sites and applications feature some sort menu system that you can use to navigate through the site, access features, etc. The most popular type of menu system would have to be hierarchical menus, with different levels of menu items that appear as you move your mouse across or select menu items (similar to how the Start menu works in Windows.)
Download the code
One of the most popular ways to create hierarchical menus is through DHTML and a bit of Javscript. In this article, we will look at how to create your own hierarchical menus and some of the options you may want to consider.
First of all, it is important to understand that not all menus are created equal. As you start working through some of the examples and options presented in this article, you will notice that the menus may not work for the Web browser you are targeting. For the sake of this article, we are going to break the different browsers down into three categories: Internet Explorer (v4.0 and above), Netscape (6.2) and "Others" (which includes Mozilla, Opera, etc.)
Creating Your Menus
It is the -action" script that takes the most time to code by hand —luckily there are a number of free or open source menu components that are available for download that can jumpstart your own menu development.
One of the most popular is CoolMenus which was created by Thomas Bratti and is free to use as long as you leave the copyright statement intact and is compatible with most browsers.
The first thing you will need to do is set the formatting attributes for your menus. This can be accomplished by setting the attributes for each menu level and if you set the formatting features at level 0, all of these attributes will be used for the underlying menu levels.
To set the formatting features, you can simply set the properties for the level you are working withÃ¢â¬"in this case, we are creating a new level and setting the attributes for this menu, as shown below:
Some of the properties you can set include the height and width of the menu, as well as the CSS class that should be used to display the menu item and the rollover effect. You can also add an arrow to indicate the menu item that is currently selected.
Next, after you have set the attributes for how your menu should appear, you can then go add all of the menus that you want to create using the -MakeMenu" method:
oCMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
In the example below, we are using this method to create a hierarchical menu that has three levels. The naming convention that we are using in this case is -top0" indicating the top-level menu that will be shown by default, followed by -sub00" for the first level underneath the top, then -sub01" and so on.
oCMenu.makeMenu('top0','',' Builder Example','menu0.html','')
oCMenu.makeMenu('sub00','top0','Menu Level 1','menu1.html')
oCMenu.makeMenu('sub001','sub00','- Menu Level 2','menu2.htm','',160,0)
oCMenu.makeMenu('sub002','sub00','- Menu Level 2','menu2.htm','',160,0)
oCMenu.makeMenu('sub003','sub00','- Menu Level 2','menu2.htm','',160,0)
oCMenu.makeMenu('sub01','top0','Menu Level 1','menu1.html')
You can create additional menus by using the makeMenu method, just make sure that you keep track of your naming convention so you don't end up with menus where they are not supposed to be!
For creating hierarchical menus dynamically, you can use these same methods with the results of a database queryÃ¢â¬"you would just need to loop through the result set and use the same method to create a menu item for each record you wanted to show in the database. You could store the menu item name and link in the database, as well as the level and order in which they should appear.