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
The JavaScript code used in this example can be downloaded here. If you want to see this script in action click here for our example.
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
When creating hierarchical menus using JavaScript, there are two basic components to the menu. The first is actually the structure of the menu itself and depending on the way you setup your menus, these items can be stored in variables or in array (or set of arrays). The second component is the JavaScript required to actually show these items as the user moves their mouse over or clicks on a menu item.
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 JavaScript that drives the hierarchical menus you create is actually stored in a separate JavaScript (.js) file which you can use with multiple pages on your site and it contains all of the script required to show the different menus as the user moves their mouse across a menu item. This file also contains the JavaScript required to actually create the menus required from your site.
In order to access this script from your own web pages, you would need to add an external JavaScript file tag as shown below:
<script language=”JavaScript1.2″ src=”coolmenus4.js”>
From that point, you can then use all of the JavaScript functions that are contained within the external .js file and start setting up your menu.
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:
oCMenu.level[0]=new cm_makeLevel()
oCMenu.level[0].width=110
oCMenu.level[0].height=25
oCMenu.level[0].regClass=”clLevel0″
oCMenu.level[0].overClass=”clLevel0over”
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass=”clLevel0border”
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0
oCMenu.level[0].align=”bottom”
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.
This particular hierarchical menu provides consistent results across all three groups of browsers we defined earlier, as most current versions of these browsers support JavaScript 1.2 and the formatting techniques used in this example.
So regardless of whether you need to create one menu or many, some ready-made pre-defined JavaScript components can give you a jump-start to your own development and have your menus up and running in no time.
