Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to create a Drop-up menu for the site footer with FlexiMenus JS

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.

This tutorial was made using:

Creative DW Menus Developer version

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.
See more

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” skin. Go to the configuration tab.

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!

Facebook comments:



Leave a Reply