Main page

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

  1. Switch to the HTML mode and insert the <style> section as shown in the HTML of the example.
  2. 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>
  3. 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).
  4. Open the 'Data Source' dialog of the menu Directory, then click on the 'Build Query' button and select menu_link field in both tables.
  5. While in the HTML mode remove the content of the SubcategoriesTail, CategorySeparator, ColumnSeparator, NoCategories blocks but keeping block identifiers (for example <!-- BEGIN SubcategoriesTail --><!-- END SubcategoriesTail -->)
  6. Insert the comma (,) between <!-- BEGIN SubcategorySeparator --> and <!-- END SubcategorySeparator -->
  7. Insert the following HTML code after <!-- BEGIN Directory menu -->
    var MENU_ITEMS = [
  8. Insert the following text before <!-- END Category -->
    ],
  9. Insert the following text before <!-- END Directory menu -->
    ];
  10. Change the CategoryLink link control to label.
  11. Change the SubcategoryLink link control to label.
  12. Place the cursor after the SubcategoryLink label and add a new label control Label1 , then set its Control Source property to sub_menu_link.
  13. 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