Open the menu page. This is where you will generate the site menu, and then you will include this page in the main one, using MX Includes.
Apply the Database-driven CSS Menu Wizard from the InterAKT tab of the Insert bar. The wizard has four steps.
Configure the first step of the wizard as shown below:
Select the Vertical layout.
Choose the nature skin.
Note: There are 23 available skins in MX CSS Menus. Click here to see all the provided skins and how they suit your menus.
The image below the two drop-down menus offers a preview of how the database-driven menu will look in browser.
Click Next to continue configuring the wizard.
Configure the second step of the wizard as shown below:
Select the conn_include_menu database connection.
Select the menu_mnu table to retrieve information about the menu items.
Select the id_mnu column as the primary key of the menu table.
As the parent ID column, select idmnu_mnu - it specifies the parent-child relation between menu items.
The menu item label is given by the label_mnu column.
Select the tooltip_mnu column to retrieve the alternative text displayed for each item when mouse-hovered.
Select the order_mnu column to retrieve the order of the menu items.
The visible_mnu column (having 1/0 values) specifies if the menu item is shown or not.
Click Next to continue configuring the wizard.
Configure the third step of the wizard as shown below:
Select the Built with URL parameter option regarding the link type.
Click the Browse button next to the URL text box and select the index page from the site root. Then enter ?mod= after the inserted filename in the text box.
The url_value_mnu column stores the values for the mod URL parameter (for certain menu items, it also stores another parameter that needs to be passed).
Leave the default value (blank) in the Target window drop-down menu.
Click Next to continue configuring the wizard.
Configure the forth step of the wizard as shown below:
Select to show All the menu levels.
Use the Fade animation for menu sub-items.
Check the Highlight current item option.
Leave the rest of the interface controls to their default values. To learn more about their role and default value, click the Help button on the bottom.
Click Finish when you are done configuring the wizard.
After following all these steps, the menu page in Dreamweaver, in Design view, should look like this:
Notice the elements added in the Server Behaviors tab of the Application panel (recordset and server behavior). If you want to edit any of these, double-click their name in the list.
Save the menu page and upload it to the server. You can preview it in browser (press F12) if you want to, but the index page to which menu items point is currently empty.
Continue with the next topic to create the site CSS layout.