Creative DW Menus Pack

Create 2 dependent dynamic menus in Dreamweaver with Creative DW Menus extension

Ever wanted to create a site with one main menu and a secondary menu that shows depending on what you have selected in the main menu? I bet you did, and if it sounded too complicated, well, it's not. All you need to have is a nice menu system that knows how to create the menu entries from a database, 2 database tables and very few PHP&MySQL skills to create the relation between the menus. Let me show you how to create 2 dependent dynamic menus in Dreamweaver, using Creative DW Menus extension.

First, let's picture what should be the final result. For this tutorial I'm using a nice template provided by JustDreamweaver: HorsePower, that has a layout based on a main upper menu and a secondary menu on the left sidebar. What I want to do is that the "Optional Side Links" change depending on what you clicked on the upper menu (Accessories, Lighting, ...). Here is a live demo of the site/menus to see how the result should look like.

Requirements for the tutorial:

• Dreamweaver (8, CS3 or CS4)
• Creative DW Menu Pack (demo or full version)
• A PHP&MySQL server
• Dreamweaver site set to run with PHP and MySQL

Tutorial Start

I will assume that you have the site set up in Dreamweaver to read a database called "horsepower" and at least an "index.php" page that contains the layout (in this tutorial I will use the layout provided by JustDreamweaver, but you can use any layout).

Let's create the databse tables that will hold the menu entries, one table for the upper main menu, and one table for the secondary menu (you can use only one table, but is easier to explain with 2 tables). The tables are very similar, in fact the only difference is that the table for the secondary menu contains one extra field that references the menu entry in the main upper menu (meaning in this field we need to have the id of the main menu entry - let's say the user clicks on "Accessories" which is the main menu button with the ID = 2, then all the entries from the submenu that should appear should have 2 as a value in the supplemental field).

Here are the 2 SQLs that you could use to create the tables:

- for the upper main menu

CREATE TABLE `horsepower`.`main_menu` (

- for the secondary menu

CREATE TABLE `horsepower`.`secondary_submenu` (

Here is the sample database with some content as well.

Let me explain what each field does:

• id_menu/id_secondary: used to identify each menu element (should be set as auto-increment)
• parentID_menu/parentid_secondary: if the button is in a submenu, then this id used to identify the parent of the button
• label_menu/label_secondary: text to be displayed as label for each button
• target_menu/target_secondary: the target of the URL (_blank, self ...)
• highlight_menu/highlight_secondary - the parametters to identify the page as current and highlight it in the menu
• mainmenuID_secondary: this field exists only in the secondary menu table and indicates which secondary menu to show depending on the page you are.

Creating the upper menu

Will use Creative DW menus to create 2 menus based on the database content. But first, (as a best practice) you should create the menus in separate php pages and include the pages in the "index.php" page. This will help make easier updates on the menus if you have more php pages where you need to add the menus and will keep the code cleaner. So let's create a page "menu.php" and a page "secondarymenu.php". Open "menu.php", delete all the HTML code added there by default and let's create the main upper menu together.

Creating the recordset

Let's create a very simple Dreamweaver recordset to extract the upper menu entries. This is how you create a new recordset :

• Open the “Server behaviors” panel. ( to open that panel go to “Windows->Server Behaviors” from the top menu )
• Click on the “+” button and select recordset from the list
• Select your connection to the database and then the table 'main_menu' that we created
• You don't need to set any filters, but let's set the order ASCENDING on the id_menu
• Test the recordset to see if it displays the correct data from that table.

OK, now we should create a menu.

Working with Creative DW Menus

The good news when working with Creative DW Menus is that you can do all the menu settings from an interface, so you don't actually have to code anything. You can create both menus (upper main menu and secondary sidebar menu) with the Creative DW Menus Pack as it contains both vertical and dropdown menus. First, you need to locate the Creative DW Menus in the Dreamweaver interface.

Once you have the Recordset created, place your cursor somewhere below and click on Insert Menu (Drop-down). This will open up the Creative DW Drop-down interface. As we want to create a dynamic menu, select "Dynamic" as a menu type, then click on Insert dynamic element (follow the second red arrow in the below screenshot).

General tab

A new interface will pop-up, where we have to make the settings necessary to read the dynamic content from the database.

Let me explain each field:

• Select recordset: here you should choose which recordset is used to create the menu structure (especially useful if you have more recordsets in the page)
• Select ID column: the column that keeps the unique ids for each menu button
• Select parent column: if a button is a child of an upper level button, it should read the upper level button ID from here
• Select Top identifier: the default value that indicates that a button is part of the top level menu (home, accessories). Basically this value says that the button is not a child, and the value should be set to the default value of the parentID field when this field is empty.
• Button title: select the field that contains the text to be displayed on the buttons.
• URL: the link for the button. In our case, the link is composed from index.php pagem then we add a parametter "id_menu" that will be used later to conect the menus. Based on this parametter we will know which secondary menu we should show in the sidebar. id_menu={id_menu} will make id_menu equal with the id of the button you clicked (so if you click on Home, it will become automatically id_menu=1 and so on)
• Link target: this column is used to set how the new page will be displayed, in a new page, the same page, etc
• Highlight identifier: based on the values here, the menu will hightlight the current page button.

Click "Ok" - at this point we should have the menu structure ready and we only need to play with the look and feel. Let's make the menu 870 pixels wide and set the height to 60 pixels. Set the menu z-index to 1001 (setting the z-index to anything higher to 1000 will make the upper menu stay on top of the secondary menu if they overlap). Select the "Adobe" skin.

Layout tab

Switch to the layout tab and make the following changes: click on show arrow for submenus; align main button to left (the menu will appear left alligned); button resizing: fit to text (to accomodate the size of the labels as they come from the database);

Animation tab

On the animation tab we can play with the look and feel of the buttons (optional step). Choose the animation efect for the main menu and set the duration to 10:

You can choose an animation for the submenus as well (tip: to see how they are looking switch to the preview tab):

Text Tab

We should go to the text tab and make settings for the text labels that appear on the buttons: select verdana as the text font and choose the colors for the Up, Over, Down button states.

We are ready to go, press ok and this will insert the menu into the menu.php page.

Creating the secondary sidebar menu

The secondary menu should be created in a similar manner - the only differences are the type of menu to be used and the SQL that makes the secondary menu appear depending on what you have selected in the main upper menu. So I will focus mostly on the differences.

Open the page "secondarymenu.php" that we created earlier and let's do the SQL that will show the right secondary menu depending on what you have selected in the main menu. Create a new recorset - it should look like this:

Basically what the recorset is saying is: show me all the entries from the secondary_menu table, filter only the results that have the values in the mainmenuID_secondary equal with the URL value of the id_menu parameter (remember that we added this parameter to the "index.php" URL earlier) and filter the results ASCENDING on the buttons ID. To explain, in the main menu, when you click on "home", the URL should be index.php?id_menu=1 (where 1 is the id of "home" in the database). For accessories, the URL will be index.php?id_menu=2 so, in the recorset of the secondary sidebar menu we will always know what button the user has pressed in the upper main menu and what secondary sidebar menu we should show.

Create a Vertical menu

Click below the SQL in code view mode, and insert a Vertical Menu. Select "Dynamic" as a menu type, then click on Insert dynamic element (just like you did for the upper menu). Set the parameters like in the screenshot below:

In the URL field we have the following sintax: "index.php?id_menu={mainmenuID_secondary}&secondary_id={id_secondary}" which might look a bit strange, but what it actually does is setting the id_menu parameter to the same id of the button you have clicked in the upper main menu, and ads a secondary id for the secondary menu buttons. So when you click on a secondary menu, we will always know in the URL to what upper main button and secondary menu button the page page belongs to.

You can make settings for the look and feel of the menus, just like we did for the main menu - I leave this to your inspiration!

Adding the menus to the index.php page

Ok, so basically now we have 2 menus in 2 separate pages ("menu.php" and "submenu.php"). To show the menus in the "index.php" page, we will include these pages instead of the static menus that are already there.

Adding the main upper menu

Open the "index.php" page and delete the upper menu code (in the screenshot below you should delete the code between <div id="nav" style="margin-bottom: 10px;"> and </div>. Instead of the deleted code, add the following one: <?php require_once('menu.php'); ?> - this will include the file that contains the upper menu.

Adding the secondary sidebar menu

Do the same for the secondary menu: replace the code between <h3>Optional Side Links</h3> and <h3>Optional Sidebar Info </h3> with this one: <?php require_once('secondarymenu.php'); ?>. You are almost done, we just need to delete a chunk of duplicated code from the menu.php file. So, open "menu.php" and delete the following code:

<!-- Creative Menus - menu rendering scripts start -->
<script type="text/javascript"> buildMenu() </script>
<noscript>
This menu requires JavaScript in order to be properly displayed. Viewing requirements can be found at <a href="www.extendstudio.com">Extend Studio</a> (Flash components and extensions, Dreamweaver extensions, Tools for web design and development)
</noscript>
<!-- Creative Menus - menu rendering scripts end -->

We're done!

We have everything setup right now. To test how it works press F12 - it should look like this: