Custom Menus - Letting Visitors Select A Menu To View

There may be times when you want visitors to a site to be able to select the menu to be displayed. That's fairly easy to do by using the Custom Menu feature of Sothink DHTMLMenu.

For this tutorial, we created two menus - menu1 and menu2 - and we had menu1 load when the page loads. You can switch back and forth between the two menus by using the buttons below.

     

Here are the steps we used to create this page:

1. Using Sothink DHTMLMenu, we created two menus as we normally would, with one exception: in Global Settings - Menu Type we checked Custom and entered a name for each menu:

custom

2. On the HTML page we placed the link to load stmenu.js in the <head> and we placed the links to load the two menu JavaScript files immediately below the opening <body> tag.

3. We modified the opening <body> tag as follows to load menu1 when the page loads:

<body onload="showFloatMenuAt('menu1',20,120)">

The numbers 20,120 in the code above are the x,y coordinates where the menu will be displayed.

4. We added mouse-over buttons to select the menus, but that adds another level of complexity to code that is already fairly complex. If you want to use mouse-over buttons instead of text links, you can look at the source code for this page, but an easier solution is to use text links, as follows:

<a href="javascript:;"onclick="event.cancelBubble=true;hideMenu('menu2');showFloatMenuAt('menu1',20,120);">Show Menu 1</a>

<a href="javascript:;"onclick="event.cancelBubble=true;hideMenu('menu1');showFloatMenuAt('menu2',20,120);">Show Menu 2 </a>

That's all, Folks.