FlexiMenus JS for Dreamweaver

Download a free trial of   FlexiMenus JS for Dreamweaver - Designer Edition
Buy FlexiMenus JS for Dreamweaver
  • Drop down, tabbed and vertical animated JavaScript menus
  • 15 ready made skins, each with multiple color schemas
  • 30 eye-catching transition effects: fade, slide, reveal and more
  • Create menus in PHP, ASP or Coldfusion
  • Multiple databases support like MS SQL, Oracle & MySQL and more

TUtorial: Create a dynamic vertical menu with FlexiMenusJS for Dreamweaver

This tutorial was made using FlexiMenus JS Dreamweaver extension
box FlexiMenus JS for Dreamweaver

FlexiMenus JS is a JavaScript menu extension for Dreamweaver. Thanks to the powerful styling system, every menu design element can be individually customized with new fonts, colors, margins, images and text styles.  FlexiMenus JS for Dreamweaver comes with 30 eye-catching transition effects like Fade, Slide, Reveal and 15 menus skins that can be managed from the Dreamweaver UI, with no coding required.

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:

  • create the database table that will keep the elements data;*
  • create a new php page with a recordset that will get the data from the database;*
  • insert a FlexiMenu on the page and tell it to use the previously created recordset;
  • create the first level of the menu that contains buttons with icons;
  • create the second level of the menu that contains buttons and spacers;
  • create the third level of the menu that contains buttons that use custom html;


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 available 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.

Database records example
Bugatti button from the main menu:
  • ID : 2
  • parentID : 0
  • type : button
  • label : Bugatti
  • link : null
  • target : _self
  • icon : ./pics/bugatti.png
  • param_img : null
  • param_name : null
  • param_desc : null
First separator from the Bugatti submenu:
  • ID : 14
  • parentID : 2
  • type : separator
  • label : sep21
  • link : null
  • target : _self
  • icon : null
  • param_img : null
  • param_name : null
  • param_desc : null
Type 12-2 level 3 menu (custom HTML):
  • ID : 40
  • parentID : 15
  • type : button
  • label : null
  • link : null
  • target : _self
  • icon : null
  • param_img : <img src=”./pics/bugatti-type-12-2.jpg” />
  • param_name : Bugatti Type 12-2
  • param_desc : Lorem ipsum dolor sit amet,<br /> consectetur adipisicing elit, <br /> sed do eiusmod tempor…


Creating the PHP recordset

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 required 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.
Recordset configuration

Recordset configuration


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.

Dynamic parameters  
  • “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


Creating menu’s first level

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:

Level 1 configuration

Level 1 configuration

Creating menu’s second level

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”.

Creating menu’s third level (Custom HTML buttons)

Finally we made it to the third level of the menu, the one that will use custom HTML buttons.

  • First, you should click on the “Add new level” button in order to create the third level;
  • Select the third level and open the Button tab;
  • Change the content type to “Custom HTML”
  • Click on the “Define HTML source” button, insert the html from the box bellow and click save;
    Custom HTML <div style=”width:200px; height:300px; “>
    <div align=”middle” style=”padding-top: 15px;”>{image}</div>
    <div style=”padding-top: 15px; width:200px; padding-right:5px; padding-left:5px;”>
    <p style=”font-family: ‘Lucida Sans Unicode’,'Lucida Grande’,sans-serif; font-size: 12px; font-style: normal; color: rgb(255, 255, 255);”>
    <span style=”font-size: 18px;”>{name}</span><br/>
    <span style=”font-family: ‘Lucida Sans Unicode’,'Lucida Grande’,sans-serif; font-size: 14px;”>Lorem ipsum</span>
    <br/><br/>{desc} </p></div>
  • Connect each parameter to his respective column from the table;
Level 3 configuration

Level 3 configuration


  • OS: Windows 2000 (and above).
  • Environment: Adobe Dreamweaver CS3 and Adobe Dreamweaver CS4.
  • View :JavaScript enabled browser.
  • OS: Mac OS X 10 (and above).
  • Environment: Adobe Dreamweaver CS3 and Adobe Dreamweaver CS4.
  • View : JavaScript enabled browser.

Compatible Browsers : Firefox 3, Internet Explorer 6, IE7 ,IE8, Opera 9 and Opera 10, Netscape Navigator, Google Chrome, Safari 3 and Safari 4, Flock, SeaMonkey, Galeon, Midori, MidBrowser.