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

Use Directory Builder to create the directory_categories directory based on the directory_categories table in the Internet 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.
Use Grid Builder to create the directory_items_states grid that will display the list of items that match the selected menu category.
- On step 2 of the builder use the Build Query option to select 2 tables: directory_items and states, then select the fields you like to include in the grid from the directory_items table, plus the state_name field from the states table.
Open the Data Source property dialog and add the following Where parameter: directory_items.category_id equals(=) sub_category_id .
Enter # (## for ColdFusion) in the Href Source property of the CategoryLink link.
Select the current page in the Href Source property of the SubcategoryLink link, then in the same property dialog configure the following two parameters:
- Data Source Type = DataSource Column, Parameter Source = sub_category_id , Parameter name = sub_category_id
- Data Source Type = DataSource Column, Parameter Source = cat_category_id and Parameter name = cat_category_id
Switch to the HTML mode and add JavaScript functions as shown in the example.
While in the HTML mode, insert the label control called "CurrentSection" in between the quotes of the following JavaScript statement:
```
var CurrentSection = "";
```
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.
Insert the label control called "CurrentSubSection" in between the quotes of the following JavaScript statement:
```
var CurrentSubSection = "";
```
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.
Navigate to the HTML code of the directory, then remove the content of the SubcategoriesTail, CategorySeparator, ColumnSeparator, NoCategories blocks, but preserve block identifiers like  ,  , etc.
Insert the following HTML code after 
```
<table  cellspacing="1" cellpadding="3"> 
  <tr> 
  <th onclick="expandit(this)" id="">
```
(do not specify id="" in .NET)
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.
Insert the following HTML code before  :
```
</th> </tr>
  <tr style="display:none" id="cat_"> <td>
```
(do not specify id="cat_" in .NET)
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.
Insert the following HTML code after  :
```
<div id="sub_">
```
(do not specify id="sub_" in .NET)
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.
Insert the following HTML code before  :
```
</div>
```
Insert the following HTML code before  :
```
</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.