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
 

How to create a JavaScript Drop-up menu for the site footer

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

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,

JustDreamweaver template

JustDreamveaver Template

 

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

Static menu

Static Menu

 

into a multilevel drop-up menu:

FlexiMenus JS 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:

 

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

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

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

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

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

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

Change the font size and button margins

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

Show Arrow for submenus 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!

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.