CSS Menu Writer - a former stand-alone extension that is now included in Design Extender - allows you to easily build navigation for your website.
This tutorial presents the steps for creating database-driven drop-down navigation, meaning we will build navigation with multiple tiers where the names and links of the menu items are based on information in your database. In this tutorial, we display categorized products in a drop-down menu, but this concept can be applied to any nested menu items.
- Dreamweaver CS3 or higher.
- Design Extender (alternatively, CSS Menu Writer) installed and activated in Dreamweaver.
- Site defined in Dreamweaver. For assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
- PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
- MySQL database that includes one table for product categories and another table for products. If you do not have a database, you can download our free eCommerce MySQL database in this tutorial.
To easily apply your navigation to all the pages in your site, it is advised that you insert your menu within a Dreamweaver template that is applied to all the pages in your site. This way, menu updates that you save will be quickly applied to all pages.
The database used in this example contains two tables, products and productcategories. These two tables are connected by the ProductCategoryID column, the unique key column for the productcategories table. In the products table, make sure that each product has a numeric value in the ProductCategoryID column that matches one of the values in the CategoryID column of the productcategories table.
In the products table, ProductCategoryIDs match...
...a CategoryID in the productcategories table.
The first step in creating a dynamic menu uses the productcategories table from the eCommerce MySQL database. Alternately, you can use any database table with at least two columns.
- Go to Webassist > CSS Menu Writer to open the wizard.
- In the Contents, choose one of the menu presets.
- Choose your desired Type, Category, and Theme.
- Next to Contents, click the Define button.
- Within the menu tree structure, use the Add and Delete icons to modify the menu items.
- Select the menu item (i.e. Products) that will contain the dynamic menu items (i.e. product categories).
- Click the Add icon.
- Select Add new dynamic link.
You must be using a a PHP page to be presented the interface for choosing a dynamic link.
- Click OK.
- In the Dynamic Menu Item interface, choose your database connection.
- Choose the productcategories database table.
- From the Label menu, choose CategoryName.
- From the Key column menu, choose CategoryID.
- In the Link field, enter the link you wish to use for each menu item. If the link is to be dynamic, choose the Add to link icon to specify a parameter to be set. Use # if no link is desired. If you have used DataAssist to create product results pages, you would likely want to link to them. In this situation, follow these steps.
How to create a link to a DataAssist results page: - Select the browse icon and choose your results.php page. This name may vary based on your DataAssist options.
- Append ?CategoryID= where CategoryID is the key column you selected above.
- Click the Add to link icon and choose the CategoryID option.
- For example, results.php?CategoryID=[CategoryID]
- Filtering and sorting is optional.
- Click Finish.
When you return to the CSS Menu Writer interface in Dreamweaver, the dynamic option displays as a single item regardless of the database contents. You will also notice that in any preview windows, your dynamic options are not displayed.
- Select the dynamic option we just set up.
- Choose the Add icon.
- Select Add new dynamic link.
- Click OK.
- Choose the same database connection.
- Choose the products database table for your menu items.
- From the Label menu, choose the column from the database table that contains the names to be displayed in your menu, ProductName.
- From the Key column menu, choose ProductID.
- In the Link field, enter the link you wish to use for each menu item. If you have used DataAssist to create product details pages, you would likely want to link to them. In this situation, follow these steps.
How to create a link to a DataAssist details page: - Select the browse icon and choose your details.php page. This name may vary based on your DataAssist options.
- Append ?ProductID= where ProductID is the key column you selected above.
- Click the Add to link icon and choose the ProductID option.
- For example, details.php?ProductID=[ProductID]
- Under Filter & Sort, choose ProductCategoryID for Filter.
- From the adjacent select list, choose Nested.
Selecting Nested will filter the menu items based on their category ID.
- Sorting is optional.
- Click Finish.
- Click Finish.
- Optionally, check the box and enter a new name if you want to be able to use this preset in the future.
- Regardless of whether you save the preset, click Finish.
- Click Finish.
- Save your page. (Ctrl + S or Cmd + S)
- Go to File > Preview in Browser to preview the page in your selected browser.
If you are using a remote web server and database for testing, you may need to upload your files to your server before previewing the dynamic links in your browser.
Once you have created a dynamic menu, you can modify the settings from the CSS Menu Writer interface in Dreamweaver.
- Select the menu in design view.
- From the the Properties Inspector, click the Edit Menu button.
- Select the dynamic menu option you wish to edit, make changes, and click Finish.
What do you need to start?
Print tutorial
: 7 Years, 6 Months, 3 Weeks, 2 Days, 15 Hours, 4 Minutes ago
Pity you only support PHP. There are people who may not like using PHP but use.Net and ColdFusion for example.
: 8 Years, 2 Months, 2 Weeks, 2 Days, 23 Hours, 14 Minutes ago
Can this use MySQLi recordset?