How to use MX CSS Menus with AJAX panels

Say in an AJAX-based site you want to create a CSS menu by using MX CSS Menus.

Note: Besides MX AJAX Toolbox, install this other Dreamweaver extension, namely MX CSS Menus - Try | Buy.

You want the menu items to be AJAX links that point to states of the main panel. For the main panel to be the only page area that refreshes in browser when you navigate through the site menu, you must insert the CSS menu inside an AJAX panel. For example, you could insert the menu in the Header panel, and choose the Horizontal or Tab layout, or you could insert it in the Menu panel (on the left), and choose the Vertical or Expandable layout. Click here to read more about the four menu layouts.

Remember the menu types that you can build with MX CSS Menus:

  1. Non database-driven CSS menus

  2. Database-driven CSS menus having the menu items links:

 

For a better view and understanding of how to use these two products together, consider the site you created in the Build a Company Presentation Website tutorial.

Note: You can replace/generate CSS menus in this manner in any AJAX-based sites, built with the New AJAX Site wizard or not. But remember, the menu has to be inside an AJAX panel.

You want to replace the menu on the left, inside the default (and only) state of the Menu panel with a vertical CSS menu. Remove the initial menu by following the steps below:

  1. Open the index master page.

  2. In the AJAX Panels tab of the Files panel, click the Master page/Menu/default state item to make it editable.

  3. Remove the four AJAX Link server behaviors from the Server Behaviors tab of the Application panel. Select each one of them and press the Minus (-) button above the server behaviors list.

  4. The menu items labels remain in page. In Design view, click inside the Menu panel and remove the existing text (press Ctrl+A and then Delete). Right where the cursor is placed you will insert the CSS menu, either:

Create a "static" CSS menu in an AJAX panel

To create a "static" CSS menu, launch the CSS Menu Wizard from the InterAKT tab of the Insert bar. The only thing that you need to configure differently than what you were used to is the URL text box in the second step of the wizard (remember that the menu items will be AJAX links in this case):

 

  1. For each menu item you add, click the Browse button next to the URL text box and in the dialog box that opens, select from the site structure the index page (do not click OK yet).

  2. Having in mind the syntax of an AJAX link, click the Parameters button to add the URL parameter passed. In the Parameters dialog box that opens:

  4. Click OK one more time to close the Select menu location file window.

Configure the rest of the settings according to your preferences. Once you are done, test the CSS menu in browser and see how the AJAX links behind the menu items work.

Create a "dynamic" CSS menu in an AJAX panel

In order to create a dynamic menu you need to connect to a database first. There are two script files provided in the \tutorials\Using MX CSS Menus\db folder from the .zip package. Depending on the way you want to build your menu links (retrieved from database or built with URL parameter), use one of them (url_link or url_param) to create a database. Then define a database connection in Dreamweaver.

To create a "dynamic" CSS menu, launch the Database-driven CSS Menu Wizard from the InterAKT tab of the Insert bar. If in the third step of the wizard you choose to:

  1. Retrieve the menu items links from the database, there is nothing different that you should do when configuring the wizard. The only difference is the way you specify the links in the database (e.g. index.php?Content__state=News). Please see the \tutorials\Using MX CSS Menus\db\url_link file to better understand. Notice that for the default state, no parameter value is specified.

    Note: Say one (or some) of the main panel states has dynamic content (retrieved from the database and filtered by an URL parameter) - for example, the product detail state displays different content for each product. If you want your site menu to have items pointing to each product, you need to pass another parameter besides the panel state one. So the link stored in the database should look similar to this: index.php?Content__state=Product_detail&id_prd=1.
                                       

  2. Build the menu items links with an URL parameter whose values (names of the main panel states) are retrieved from the database, pay attention when you configure the URL text box - the name of the passed URL parameter should be Content__state:


                                       
    Note:     If you are in the situation described in the previous note, the parameter value stored in the database should look similar to this: Product_detail&id_prd=1 (Product_detail is the state name). This way, you are passing another URL parameter besides the panel state one. The built-up link will be: index.php?Content__state=Product_detail&id_prd=1.

 

Configure the rest of the settings according to your preferences. Once you are done, test the CSS menu in browser and see how the AJAX links behind the menu items work:

 

Notice how only the main panel refreshes when you select different menu items, and how the "active" one is highlighted (only if you checked the Highlight current item option when you configured the wizard for creating the CSS menu).

Login to Add New Note