Configure Database-driven CSS Menu server behavior

The Database-driven CSS Menu server behavior helps you achieve the same results as the Database-driven CSS Menu Wizard, but there is a major difference in the way you get there.  Obviously, the result is a database-driven menu (items information such as label, tooltip, URL page, target window etc. is retrieved from a database) generated in your page.  The difference is that the server behavior requires a recordset from where to retrieve data, so a recordset has to created in page before applying the server behavior.

The Database-driven CSS Menu server behavior can be accessed from the Application panel, Server Behaviors -> + -> InterAKT. If you attempt to apply it in an empty page (or a page with no recordset created yet), the following alert window will pop-up:

In order to create a recordset to be used when applying the Database-driven CSS Menu server behavior, go to the Application panel, Bindings -> + -> Recordset (Query), and configure the dialog box that opens as it follows:

1. Name the recordset suggestively.

2. Select the database connection used to retrieve data.

3. Select the database table that stores the menu information you want to retrieve.
   Note: Click here to see how the database table should be structured.

4. Select all or only some of the table columns to be included in the recordset.

5. If your table structure contains a visibility column, filter the recordset by this column, having the stored value 1.

6. If your table structure contains an order column, sort the recordset by this column, ascending.

7. You can press the Test button to see the records retrieved according to the current settings.

8. Click OK to create the recordset.

After creating the recordset, access the Database-driven CSS Menu server behavior. The dialog box that pops-up has five tabs.

To set the interface options for the Layout tab, follow the instructions below:

1. Use the Layout and Skin drop-down menus to set a layout, respectively a skin for the database-driven menu. Click here for more information about these two drop-down menus and the image below them.

2. Click the Edit CSS Skin button to open the CSS Skin Editor and visually edit the current skin used for the menu, or to create a new skin starting from this one.

3. The three buttons in the top-right part of the interface (visible for all five tabs) offer the next functionalities:

4. • Click OK when you are done configuring the server behavior.

   • Click Cancel to exit without the new settings to be applied.

   • The Help button brings you to this help page.

4. Click the next tab to continue with configuring the server behavior.

To set the interface options for the Data source tab, follow the instructions below:

1. In the Recordset drop-down menu select the previously created recordset from where to retrieve menu items information.

2. In the following drop-down menus select the recordset table columns that specify the primary key, parent ID, label, and tooltip for each menu entry, as explained here.

3. Click the next tab to continue with configuring the server behavior.

To set the interface options for the Links tab, follow the instructions below:

1. In the Link type drop-down menu select one of the two options regarding the way menu item links are formed (the interface controls below this drop-down menu change according to your selection):

2. • If you chose the Retrieved from database option, configure the interface as explained here:
     
     
                   

   • If you chose the Built with URL parameter option, configure the interface as explained here:
     
     
                   

2. Click the next tab to continue with configuring the server behavior.

To set the interface options for the Settings tab, follow the instructions below:

1. Configure these controls as shown here. The only difference is that the Menu absolute position checkbox does not appear in the server behavior, but only in the wizard(s).

2. Click the last tab to continue with configuring the server behavior.

To set the interface options for the Sub-items tab, follow the instructions here:

After clicking OK, you will notice in the Dreamweaver page the translator (illustration corresponding to the code block behind the action) added in Design view by the Database-driven CSS Menu server behavior. The translator indicates the selected skin and layout:

This is how the Server Behaviors tab of the Application panel looks like after applying the Database-driven CSS Menu server behavior (with the settings above) in a page where only the required recordset was previously created:

As you can see, only the Database-driven CSS Menu server behavior is added next to the recordset. You can edit any of them by double-clicking their name in this list.

To see how the page looks in browser after saving and uploading it to the server, click here.