Your first dynamic menu

Your first dynamic menu

In this section we will create a dynamic menu using FlexiMenus JS for Dreamweaver, the Developer Edition.

Tutorial files

This page will only explain how to configure the menu to use the data from the recordset.

You can download using bellow link an archive that contains text file that explains how to create the MySQL table and a PHP website that uses a recordset to get the data from that table.

Since this is a dynamic extension, in order to create the structure of the menu you will need a database table to store the information needed by each element. To get that data from the database we will use a PHP recordset.

Before going further, you need to install FlexiMenus JS on your computer (a free trial or a licensed version); you can find FlexiMenus JS on the Extend Studio Web site. More information about the extension installation and registering you can find in the Installation section of the documentation.

Create a new PHP page (or copy the one from the archive above) in the root folder of a Dreamweaver site. You also need to have a PHP/MySQL server and set it at as the testing server of the site you are using.

Now that we set up the stage, let's move to the actual menu creation and configuration.

Insert a new menu in the page by opening the "Insert" panel from Window->Insert and clicking on a "Insert Dynamic Menu" button
Once you insert a new menu on your page, the FlexiMenusJS interface will open.
Select a skin and set the dimensioning for your menu. When you are done, click on the configuration button from the top.
On the configuration tab, the left part of the interface it's the done that tells the menu from what recordset to take the data from and how to use it. Below you have a picture of how that part of the interface looks like and what each means :

dynamic menu configuration

Dynamic configuration

“Select recordset”: choose the recordset that will be used to generate to menu structure
“Select id column”: indicates the column that holds the unique id of each skin element
“Select parent column”: indicates the column that has the ID number of the parent of each skin element
“Select element type column”: indicates the column that will be used to define the type of each skin element
“Label”: insert the column that holds the labels of the buttons and headers
“Link”: insert the column that holds the links for the buttons
“Link target”: insert the column that holds the target of the URL’s

Set all the parameters as the are shown in the picture above. You can go ahead and test the menu now, as each skin has a default preset that will handle all the design settings, so you don't have to do this now.

Congratulations! You've just created your first FlexiMenusJS dynamic menu. I hope that this tutorial helped you to understand the basic workflow that needs to be followed when you create new menu using our extension. You might want to check out the rest of our tutorials for more detailed and complex usages of the extension.

Kind regards,

Extend Studio team