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

Find out more about FlexiMenus JS | Return to the tutorials list

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

Ever wanted to create JavaScript menus, downloaded one from a scripts site and had a hard time making the menus work the way you want? These times are over. In this tutorial we will change a static footer menu into a multilevel JavaScript menu with drop-up effects, without writing a single line of code.

We will start from a template provided curtesy of www.justdreamweaver.com and use Dreamweaver and FlexiMenus JS extension,

JustDreamveaver Template

 

and want to change this footer menu (Home | Contact Us | Business Directory | Site Map):

Static Menu

 

into a multilevel drop-up menu:

FlexiMenus JS drop-up menu

Note: Before starting this tutorial you need to download and install the FlexiMenus JS Dreamweaver extension and the Chamber of Commerce template from JustDreamweaver.com

 

Short overview

Things are actually quite basic:

• Download and Unzip the Chamber of Commerce template from JustDreamweaver.com
• Create a Dreamweaver site and install the FlexiMenus JS Dreamweaver extension
• We will use the FlexiMenus Drop-down menu and set it to Drop-up
• Choose a FlexiMenus skin to blend into the layout
• Make size settings to the menu buttons to fit the size of the footer
• Insert the menu into the page

 

Start FlexiMenus JS

If you look at the zip provided by JustDreamweaver, you will notice that it comes with a .dwt Dreamweaver template file. In this example, we edit the index_no_template.html file, but to save time, you can make the changes to the .dwt file to have everything done for all the pages using this template. Open the template.dwt file, delete the footer menu, and from the top tabs go to FlexiMenus JS and click on the Insert Drop Down menu button.

FlexiMenus JS drop-up menu

 

Select a menu skin that blends with the design

First, you should set "Use default skin dimensions" to off, so we could play latter with the sizes. Then, from below, select the "Flat"

FlexiMenus JS templates

 

Set the menu to Drop-up

From the Configuration Tab you should click on "Edit level 2", then from the "Vertical Positioning" list select Top (follow the red arrows).

FlexiMenus JS vertical positioning

Next thing to do is to change the button labels (FlexiMenus JS comes with some default button labels which we should change to match the old menu: Home | Contact Us | Business Directory | Site Map. To do this, on the left side, click on "Products", "Support" ... and change their labels from the right window (see the red arrow). If you already know the submenus, you can also edit them, define the links and their target.

FlexiMenus JS button labels

Once you're done, click on "Insert menu" button and preview the page in a browser clickling on F12. In this particular case, the preview shows that the menu is a bit too big to fit the layout:

Menu is bigger than it should

At this point, there are more things you could do to shrink the menu. We will change the font size, button margins and make the submenu arrows to go away. Click on the menu on the Dreamweaver Design view and from the FlexiMenus JS tab click on edit menu. Go to the Configuration tab.

 

Make the submenu arrows to go away, change the font size and button margins

Switch to "Edit level 1" then go to the "Button Tab". Slide the "Button content style" alignement, margins, font" up and change the Content margins (left) to 5 px and the font size to 10.

Change the font size and button margins

Slide it back and switch the Show Arrow for submenus to off:

Show Arrow for submenus off

 

Update the menu

Click on Update menu to update the files and F12 to preview the menu

 

You're done! On behalf of all the Extend Studio team, thank you for following this tutorial!