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 JavaScript Menu in Dreamweaver using FlexiMenus JS

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.

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:

  • 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)

 

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:

  • parentID         : 0 ( the top buttons have no parent )
  • type                : button
  • label                : Clothing
  • link                  : “./clothing.php”
  • target              : _self

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

  • parentID         : Clothing button ID, (in our case 1)
  • type                : header
  • label                : Girls
  • link                  : null
  • target              : null

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 :

  • 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

 

Configuring the menu

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

  • Insert a new menu in the page that has the recordset
  • Once you insert a new menu on your page, the FlexiMenusJS interface will open. In order to edit an existing menu you need to click on the "Edit menu" button to open the interface.
  • In the left part of the interface you have all the parameters that have to be set to create your menu structure
    • “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 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!

Requirements

windows
Windows
  • OS: Windows 2000 (and above).
  • Environment: Adobe Dreamweaver CS3 and Adobe Dreamweaver CS4.
  • View :JavaScript enabled browser.
 
 
windows
Apple
  • 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.