How to create a menu structure in FlexiMenusJS Dynamic PHP

Summary

In this tutorial we will re-create the menu from the Itsy-Bitsy sample page, using a database to create the menu structure. The design details of the menu (skin,color scheme, label fonts etc.) can be changed the same way as in FlexiMenusJS designer version, using the same interface parameters.

The Itsy-Bitsy menu

The Itsy-Bitsy menu

Note: Before starting this tutorial you need to create a website that uses a server technology (ASP, PHP, etc). Also, you need a testing server and a database management program.
If you don’t a database already created for your website, please create an empty one before continuing.

 

Creating the data holding table

The most important part of this tutorial is the structure of the table that will hold the data for the menu. Take another look at the Itsy-Bitsy menu that we want to create. Vizualize its structure and how the different elements are connected with each other. All the elements of the menu will be stored the database and will be held in a table. Create a new table in your database and insert these columns in it:


Now you can insert data for your elements that will be used.

Examples:
For the “Clothing” button from the top menu we will have these values in the table:

For the “Girls” header from the clothing submenu the values should be:

Here’s a final look at how the table should look with the apropriate values for the Itsy Bitsy menu.

The Itsy-Bitsy menu data

The Itsy-Bitsy menu data

Creating the recordset

Now that we have our data ready we have to make it available for the menu. We do that by the using Dreamweaver recordsets. This is how you create a new recordset :

Recordset configuration

Recordset configuration

Configuring the menu

In this section we will tell the extensions from where to take the data and how exactly to use it.

The menu configuration for our Itsy-Bitsy menu will look something like this:

The Itsy-Bitsy menu configuration

The Itsy-Bitsy menu configuration


This was the final step in setting the structure of the Itsy-Bitsy menu. All left to do now is to set the design you want.

In behalf of all the Extend Studio team, thank you for following this tutorial!