How to create the "Extreme" sample menu using FlexiMenusJS Dynamic version
Summary
In this tutorial we will create a dynamic version of the menu from the Xtreme sample page. You can see bellow a copy of that menu that we want to reproduce by the end of this tutorial. By creating this menu you will learn how to use two very important features of our extension: how to add icons on buttons and how to create a button using custom HTML.
Here's a list of all the steps needed to get to the final result:
* You can jump over these steps by downloading the tutorial files.
Extreme menu
Creating the database table that will hold the element data
If you don't have a database created already, please create one know (or, you can use the one from the tutorial package that's avaialable for download).
After you set up the database create a new table. The table will contain these columns:
ID (unique) : used to identify each menu element (should be set as auto-increment)
parentID : used to identify the parent for each element
type : specifies if the element is a button, header or a spacer
label : text to be displayed as label ( will not be used by spacers)
link : button URL ( applicable only for buttons)
target : the target of the URL (applicable only for buttons)
icon : the address of the image that will be used as an icon
param_img : the "img" tag that will be used in the custom html buttons
param_name : the string that will be placed as a title for the custom html
param_desc : the description of each custom html button
Once the table is created, all you have to do now is to populate it with menu elements.
The data from database will get to our menu by the use of Dreamweaver recordsets. Before creating a recordset you need to create a database connection. (A PHP page with a recordset and connection already created can be downloaded from the "Tutorial files" area, above).
A new database connection can be created by clicking on the plus sign in the "Databases" panel. Fill in the form with the requiered connection settings and test the connection to make sure it works
After the database is created, you can now create the recordset. Follow these steps in order to create it:
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 that you’ve created on step one.
Test the recordset to see if it displays the correct data from that table.
Inserting the menu in the page and configuring the dynamic parameters
We can now insert a FlexiMenusJS on the page. Open the "Insert" panel from "Window->Insert" and click on the "Insert Dynamic Menu".
The visual aspects of the design of the menu will not be covered in this tutorial. Just select the Darkblue skin and set the color-scheme to "red" for now.
Once you've selected the skin and size of the menu, open the configuration tab. The dynamic parameters reside on the left part of the interface. I will explain what each of them does.
“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
The first level of the "Extreme" menu contains 5 buttons with an icon on each one. While creating this level you will learn how to add icons to your buttons.
Let's move our attention to the right part of the interface now.
Select the tab that corresponds to the first level and open the "Button" tab;
Change the content type to "Icon+Label";
Three textfields will appear, one for each state of the button. Since we want to have the same icon on all three states, insert the icon column in all the textfields.
The button configuration should look something like this:
The second level of the menu contains 3 or 4 buttons that make the connection with the last level. Also, between each two buttons a separator is inserted.
There isn't much you can do here besides handling the visual aspects. The buttons and the separators are created automatically from the database.
You just need to make sure that the button content type on "Level 2" is set to "label".
