Configure Database-driven CSS Menu Wizard

The Database-driven CSS Menu Wizard creates a CSS menu that has its items information (label, tooltip, URL page, target window etc.) retrieved from a database.  Use this command when you are creating large (or small) menus and you have their needed information stored in a database.

Note: Database-driven menus are sometimes referred as "dynamic" menus (because their items information is retrieved from a database).

You can apply the wizard in server model-based pages (.php, .asp, .cfm).  No prerequisite content is required in page (meaning that the page can be empty when you apply this wizard).  If later on you want to edit the dynamic menu you created, use the Database-driven CSS Menu server behavior added by the wizard.

Note: The wizard also adds a recordset (see below the elements added in page).  If you want to use your own recordset, after creating it apply the Database-driven CSS Menu server behavior.

The Database-driven CSS Menu Wizard is accessible from the InterAKT tab of the Insert bar (or InterAKT menu item from the Insert menu):

The Database-driven CSS Menu Wizard interface has four steps.

To set the interface options for the first step of the wizard, 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 complete explanations about configuring this wizard step.

2. Click Next to continue with configuring the wizard.

To set the interface options for the second step of the wizard, follow the instructions below:

1. In the Connection drop-down menu select the database connection to use for retrieving data.  If the (right) connection has not been defined yet, click the Define button and create it now.

2. In the Table drop-down menu select the database table that stores the menu records.
   Note: To mold perfectly with MX CSS Menus, the database table you are retrieving menu data from should have the following structure/columns:

3. • The primary key column, of numeric type, that uniquely identifies each menu item.

   • The self foreign key column, of numeric type (just like the primary key), that stores the ID of the parent menu item (for items that have "parents", meaning they are not on the first menu level).  For the first level menu items, the value stored in this column is NULL.

   • A column for the label/name of menu items.

   • [Optionally] A column for the tooltip (alternative text) of menu items.

   • [Optionally] A numeric column for the order of menu items - it gives the order in which menu items on the same level and with the same parent are displayed in the menu.

   • [Optionally] A column that takes only 0 and 1 as values and that tells if items are visible (1) in the menu or not (0).  It is useful when you plan a big complex menu for your site, but not all the corresponding pages are completed yet.  So what you do is to simply hide certain menu items, but still keep them in the database and use them when your site is completed.

   • A column for the URL link to which menu items point.  You can store values in this column in two ways:

   • • If each menu item points to a certain page from the site, store the site page (and if necessary, the passed URL parameter and its value) to which the menu item redirects (it is a site-relative link).
       Examples: company.php, product_detail.php?id_prd=5.
       Note: You can also store site external links - they should be completely given (including the protocol part: "http://", "ftp://" etc.).

     • If the menu items point to the same site page, the difference being the value of the passed URL parameter, store the URL parameter values.
       Examples: company, product_detail.

   • [Optionally] A column for the target type of the window that opens when menu items are clicked.  The interface control where to specify the target window is an editable drop-down menu, so if no table column will be used, you can type the wanted target: _blank, _parent, _self, _top.

3. In the Primary key drop-down menu select the table column (numeric) that uniquely identifies each menu item (record).

4. In the Parent ID drop-down menu select the table column (numeric) that stores for each menu item the ID of its parent one (NULL if it is a first level menu item).

5. In the Label drop-down menu select the table column that stores the menu item labels/names.

6. In the Tooltip drop-down menu select the table column that stores the menu item tooltips (alternative texts) displayed when the mouse pointer hovers a menu item.  If your database table structure does not have such a column, select the None option.

7. In the Order by drop-down menu select the table column (numeric) that specifies the order in which menu items are displayed.  If your database table structure does not have such a column, select the None option.

8. In the Visibility drop-down menu select the table column that specifies if items are visible (value: 1) in the menu or not (value: 0).  If your database table structure does not have such a column, select the None option.

9. Click Next to continue with configuring the wizard.

To set the interface options for the third step of the wizard, follow the instructions below:

1. In the Link type drop-down menu select how the menu item links will be formed (the interface controls below this drop-down menu change according to your selection):
2. • Retrieved from database - there is a table column in which for each menu item the URL link it points to is stored. The URL link can be site-relative (page name and possible URL parameters passed) or external.
   • Built with URL parameter - there is a table column in which the value for the URL parameter passed is stored (all menu items point to the same page).
2. If you retrieve menu links from database, the dialog box looks like this:
   
   
                                    
3. • In the URL drop-down menu select the table column that stores the links corresponding to menu items.
   • In the Target editable drop-down menu select the table column that specifies the target type of the window that opens when menu items are clicked.
     The fact that this drop-down menu is editable is useful for the site developers who use frames: enter here the name of the frames container. You can also type the wanted target: _blank, _parent, _self, _top.
3. If you build menu links with URL parameter, the dialog box looks like this:
   
   
                                    
4. • In the URL text box enter the name of the file to which menu items point (and relative path if it is not in the same folder as the file you are working in).  Since all items point to the same page, it's compulsory to pass an URL parameter.  Make sure to specify its name (preceded by "?" and followed by "=") after the filename.
     You can use to Browse button to locate the file in the site structure, and in the window that opens you can click the Parameters button to add the URL parameter name.
   • In the URL parameter value drop-down menu select the table column that stores the values for the URL parameter passed.
   • In the Target editable drop-down menu select the target window for the page opened when a menu item is selected. The fact that this drop-down menu is editable is useful for the site developers who use frames: enter here the name of the frames container.
     The five available options are:

   • • default (blank option that if left selected, considers the chosen target as _self)

     • _self

     • _blank

     • _parent

     • _top

4. Click Next to continue with configuring the wizard.

To set the interface options for the forth (and last) step of the wizard, follow the instructions below:

1. In the Number of levels editable drop-down menu select or specify the number of levels for the dynamic menu you are building:

2. • For the Vertical and Horizontal layouts, there are four available options (if none of them suit your preference, enter another value): 1, 2, 3, All.

   • The Tab and Expandable layouts can have at most two levels, so the available options are: 1, 2.

2. Configure the rest of the controls in this interface section (animation, position, highlight, and persistent tab) as explained here.
   Note: The Persistent tab checkbox shows only for the Tab layout.

3. Check the Use images for first level option if you want to use images and not text/labels for the first menu level. If using images, know that the menu labels are part of the image, and the image is not seen as a background for the label.
   Note: If you are not using images for the first menu level, the six text boxes below this checkbox are disabled. If you check this option, the six interface controls become enabled.

4. In the Image folder text box enter the name (and path, if necessary) of the site folder where images for the first level are stored.  You can use the Browse button to locate the folder in the site structure.
   Note: There are three states in which a menu item can be: normal, hovered (on mouse-over), and selected.  That is why three images are needed for each menu item from the first level.  All these images have to be kept in the same site folder.

5. In the Image filename text box enter the extension (it has to be the same one) for the images shown when first level menu items are in the normal state (when they are not selected, nor when the mouse pointer hovers them).

6. Configure the Hover image filename and Highlight image filename text boxes as explained here.

7. In the Image size text boxes enter the width (in pixels), respectively the height (in pixels) of the images used for the first menu level (basically, the dimensions of the first level menu items):

8. • If the values you enter do not coincide with the dimensions of the actual images, a boxed-resize operation will be performed.

   • If the values you enter are not proportional with the dimensions of the actual images, the images will be stretched horizontally/vertically (in other words, ruined).

After clicking Finish, 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 Wizard. 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 Wizard (with the settings above) in an empty page:

As you can see, the wizard adds a recordset (automatically filtered by the visibility column and sorted ascending by the order column - in case you used these table columns) and the Database-driven CSS Menu server behavior. You can edit any of them by double-clicking their name in this list.

After generating the CSS menu, notice in the \includes\cssmenus2\skins site folder a folder named as the selected skin. It contains an images directory and four .css files, one for each of the four possible layouts.

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

Note: When creating an expandable menu with one of the two wizards, two links are generated in page above the menu, allowing you to show/hide all the items on the second level at once:

To see the Hide All | Show All links in action in browser, click here (the darko skin is used in this case).