Horizontal JavaScript Menu

Description

This menu example demonstrates an implemention of a horizontal JavaScript menu based on Tigra menu component.

Supported Web browsers as of December 2004 include: Internet Explorer 5 and above, Opera 7 and above, Netscape 6 and above, Mozilla Firefox 0.9 and Mozilla 1.7.

Note: This example is implemented as a two-level menu. For three or more menu levels you can use custom code to output the array used by the JavaScript menu as shown in Vertical JavaScript Menu example.

Steps to recreate

Switch to the HTML mode and insert the <style> section as shown in the HTML of the example.

Add the following section into the <head> tag, below </style>:

<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src= "menu_tpl.js"></script>
<script language="JavaScript"></script>

Place the cursor before the last </script> tag and use Directory Builder to create the menu Directory (based on the menu table in the Intranet database).
- On step 2 of the builder leave the Root Category identifier field empty and uncheck the 'Create a directory path for the current directory' checkbox.
Open the 'Data Source' dialog of the menu Directory, then click on the 'Build Query' button and select menu_link field in both tables.
While in the HTML mode remove the content of the SubcategoriesTail, CategorySeparator, ColumnSeparator, NoCategories blocks but keeping block identifiers (for example )
Insert the comma (,) between  and 
Insert the following HTML code after 
```
var MENU_ITEMS = [
```
Insert the following text before 
```
],
```
Insert the following text before 
```
];
```
Change the CategoryLink link control to label.
Change the SubcategoryLink link control to label.
Place the cursor after the SubcategoryLink label and add a new label control Label1 , then set its Control Source property to sub_menu_link.

Substitute the following label blocks:

<!-- BEGIN Category --> 
<!-- BEGIN Subcategory--> <!-- END Subcategory -->

with:

<!-- BEGIN Category -->['', null, null , 
<!-- BEGIN Subcategory -->['','']<!-- END Subcategory -->

This example uses the free license of JavaScript-based Tigra menu and it works by using the Directory component to output an array of values for the menu script. Similar method can be used with various other menu scripts.

Database Tables used

Database: Intranet

Tables: menu