| |
| |
Open the home page as this is where you will generate the site menu, and then make it show on the other site pages as well.
In Design view, click inside the menu placeholder, select and remove the temporary text ("Menu placeholder"), and apply the CSS Menu Wizard from the InterAKT tab of the Insert bar. The wizard has three steps.
Configure the first step of the wizard as shown below:
Select the Tab layout.
Choose the simple 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 static menu will look in browser.
Click Next to continue configuring the wizard.
In the second step of the wizard you get to create (manually enter) the items of the CSS menu. Start with the first-level items (Home, Spring Pack, Company), and then continue with the sub-items. Configure the user interface as shown below:
Use text and not images for the first menu level.
Note: To see a concrete example of using images for the first level, click here.
Use the Items grid and the controls below it (disabled at first) to create the menu items:
To create the first menu item, click the Add item button on top of the Items grid. In the dialog box that opens enter the label for the menu item - Home, and then click OK. The item is added in the grid and it is automatically selected.
The Label and Tooltip text boxes are automatically filled with the value you just entered in the Add Menu Item dialog box, and the Target drop-down menu is set to its default option (blank). Leave these three controls set as they are.
Note: Leave the automatically generated values in the Label and Tooltip text boxes, and the default value in the Target drop-down menu as they are for all the other menu items you are about to add.
Click the Browse button next to the URL text box and in the dialog box that opens, select from the site structure the home page. Click OK to add the URL (no URL parameters need to be passed).
Having the Home item selected in the grid, click the Add item button to add another menu item on the same level (namely the first one):
When prompted for the menu item label enter Spring Pack, and then click OK.
For the URL link, browse to the spring_pack page from the site structure and select it (no URL parameters need to be passed).
Having the Spring Pack item selected in the grid, click the Add item button to add one more menu item on the same level (namely the first one):
When prompted for the menu item label enter Company, and then click OK.
In the URL text box leave the # default value (this means that the menu item will not point to any site page).
After adding these three items for the first menu level, continue with the sub-items:
The Home item on the first menu level has no sub-items.
The Spring Pack item on the first menu level has seven sub-items: MX RSS Reader-Writer, MX Site Search, MX Looper, MX Dynamic Table Sorter, MX Calendar, MX CSS Dynamic Menus, MX Navigation Pack.
The Company item on the first menu level has two sub-items: Overview, Contact.
Select the Spring Pack item in the grid and click the Add sub-item button to add a new menu item (child for the current one):
When prompted for the menu item label enter MX RSS Reader-Writer, and then click OK.
Click the Browse button next to the URL text box and in the dialog box that opens, select from the site structure the products page (do not click OK yet). The products page content is filtered by the id_prd URL parameter, so you need to pass this parameter as well when building the link.
Note: To make sure you pass the parameter with the correct value, check out the records in the database table:
In the Select menu location file dialog box (opened when you clicked the Browse button), after selecting the products page, click the Parameters button to add the URL parameter passed. In the Parameters dialog box that opens, enter id_prd for the parameter name and 1 for the parameter value (according to the table records above), then click OK to close this window:
Click OK one more time to close the Select menu location file window and complete the URL link for the MX RSS Reader-Writer menu item.
Note: If the filtered recordset created here (in the products page) were present in all site pages, the URL parameter value could have been retrieved dynamically as a recordset column (by clicking the Dynamic data icon).
To add the other six sub-items for the Spring Pack item, proceed as explained above, with just two differences: the menu item label that you are prompted for, and the value of the URL parameter.
Note: You can select the Spring Pack item in the Items grid and click the Add sub-item button above the grid, or you can select the last inserted sub-item for the Spring Pack item and click the Add item button.
|
Menu item name |
Parameter value |
|
MX Site Search |
2 |
|
MX Looper |
3 |
|
MX Dynamic Table Sorter |
4 |
|
MX Calendar |
5 |
|
MX CSS Dynamic Menus |
6 |
|
MX Navigation Pack |
7 |
|
|
|
Select the Company item in the grid and click the Add sub-item button to add a new menu item (child for the current one):
When prompted for the menu item label enter Overview, and then click OK.
For the URL link, browse to the overview page from the site structure and select it (no URL parameters need to be passed).
Having the Overview item selected in the grid, click the Add item button to add another menu item on the same level (namely the second one):
When prompted for the menu item label enter Contact, and then click OK.
For the URL link, browse to the contact page from the site structure and select it (no URL parameters need to be passed).
Click Next to continue configuring the wizard.
Configure the third step of the wizard as shown below:
Check the Persistent tab option.
Leave 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 home page in Dreamweaver, in Design view, should look like this:
Notice that nothing was added in the Server Behaviors tab of the Application panel. If you want to edit the menu later on, click inside its translator and use the corresponding Property Inspector.
Save the home file and upload it to the server. You can preview and test it in browser (press F12) if you want to, but the application is not complete yet. What is left to do is to make this menu appear on each page of the site. Continue with the next topic to learn how to do this.