Overview

In the following tutorial I will show you, step by step,  how to create a simple drop down menu using  Creative DW Drop Down Menu.




Here is what we will accomplish

 




Step 1. insert a menu in page

To get started, click on the “Insert a Drop Down Menu” icon   by accessing the Creative Menus Toolbar from the Dreamweaver Insert Toolbar in Dreamweaver MX, MX 2004, 8 and CS3.

The Insert Toolbar can be opened by pressing Ctrl+F2 or by selecting insert from the Window menu; It’s a toolbar that contains multiple categories. You need to select the Creative Menus category in order to see Creative Menus Toolbar.

Creative Menus category
Creative Menus Toolbar
NOTE: you may be prompted to create a Dreamweaver site if you haven’t created one



Step 2. create the menu structure

Menu Structure is the area where you are able to edit your menu which is displayed in a logical tree structure. To add a new entry, press   the button.  

A window will pop up where you will be able to add Button Name, URL, Target and ID (URL, Target and ID are optional parameters)

To create a submenu you have to select a button name and use the button .

Add Menu Item

You edit any newly created menu items by clicking on the editbutton.

The Edit Menu Structure window will pop up and you can edit every menu item, delete menu items or add new ones.

More about editing menu items can be find out by pressing the button

Edit Menu Structure



Step 3. set dimensions

In the General Settings area you will have to give a name to the newly created skin and set the menu dimensions. There are also two other layout options but more about this can be found in the documentations




Step 4. choose the skin and colors

In the Menu Skin section you are asked to choose a skin from the drop-down list and define its style by changing the colors using the given color pickers. For both the menu and the submenu you can set a main color and a highlight color.




Step 5. testing

If you're using one of the built in skins you can have the menu set up just by filling in the parameters on the General tab. The other tabs will be automatically filled in with the default values for the selected skin.

To test the menu you can use the built in Preview Mode that can be found in the Preview Tab or click OK and publish the page.




Step 6. editing

After publishing the page you can return and edit the menu by clicking the edit menu button.

You can spend some time playing with menu and buttons layout , animations & text settings. The options are organized in the following tabs Layout, Animation & Text giving you  endless possibilities  to create .

The Layout Tab
The Animation Tab
The Text Tab
The Preview Tab
The Presets Tab

When you are pleased with the result you can use the button Insert Existing Menu, so you’ll be able to insert the menu in all your pages.