Main page

Two-level hierarchical menu implementation

Description

This menu example demonstrates an implementation of two-level menu using the Directory component.

Supported Web browsers as of December 2004 include: Explorer 5 and above, Opera 7 and above, Netscape 6 and above, Mozilla Firefox 0.9 and Mozilla 1.7.  This example may not work with Opera 5 or 6, or Netscape 4.7.

Usage

Navigate to the 'Software' category (Computers and Internet -> Software ) to view corresponding item entries.

Steps to recreate

  1. Use Directory Builder to create the directory_categories directory based on the directory_categories table in the Internet database.
  2. Use Grid Builder to create the directory_items_states grid that will display the list of items that match the selected menu category.
  3. Open the Data Source property dialog and add the following Where parameter: directory_items.category_id equals(=) sub_category_id .
  4. Enter # (## for ColdFusion) in the Href Source property of the CategoryLink link.
  5. Select the current page in the Href Source property of the SubcategoryLink link, then in the same property dialog configure the following two parameters:
  6. Switch to the HTML mode and add JavaScript functions as shown in the example.
  7. While in the HTML mode, insert the label control called "CurrentSection" in between the quotes of the following JavaScript statement:
    var CurrentSection = "";
  8. Add Retrieve Value for Control action to the Before Show event of the page. Set actions' properties as follows:
    Control Name = CurrentSection , Source Type = URL, Source Name = cat_category_id.
  9. Insert the label control called "CurrentSubSection" in between the quotes of the following JavaScript statement:
    var CurrentSubSection = "";
  10. Add Retrieve Value for Control action to the Before Show event of the page. Set actions' properties as follows:
    Control Name = CurrentSubSection , Source Type = URL, Source Name = sub_category_id.
  11. Navigate to the HTML code of the directory, then remove the content of the SubcategoriesTail, CategorySeparator, ColumnSeparator, NoCategories blocks, but preserve block identifiers like <!-- BEGIN SubcategoriesTail --> , <!-- END SubcategoriesTail --> , etc.
  12. Insert the following HTML code after <!-- BEGIN Category -->
    <table  cellspacing="1" cellpadding="3"> 
      <tr> 
      <th onclick="expandit(this)" id="">
    (do not specify id="" in .NET)
  13. Place the cursor within the quotes of the id attribute and add the label control called IDLabel, then set its Control Source property to cat_category_id.
  14. Insert the following HTML code before <!-- BEGIN Subcategory --> :
    </th> </tr>
      <tr style="display:none" id="cat_"> <td>
    (do not specify id="cat_" in .NET)
  15. Place the cursor before the quote after the  cat_ and add the label control called RowLabel, then set its Control Source property to cat_category_id.
  16. Insert the following HTML code after <!-- BEGIN Subcategory --> :
    <div id="sub_">
    (do not specify id="sub_" in .NET)
  17. Place the cursor before the quote after the  sub_ and add the label control called SubRowLabel, then set its Control Source property to sub_category_id.
  18. Insert the following HTML code before <!-- END Subcategory --> :
    </div>
  19. Insert the following HTML code before <!-- END Category --> :
    </td></tr></table>

 

Database Tables used

Database: Internet

Tables: directory_categories, directory_items, states

Events Used

Page's Before Show event - creates CurrentSection JavaScript variable based on the selected category.

Before Show events of the IDLabel, RowLabel and SubRowLabel labels are additionally used In .NET.