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

Create a Drop Down Menu in Dreamweaver with Creative DW Drop Down Menu

In this tutorial we’re going to Create a Drop Down Menu in Dreamweaver using Creative DW Drop Down Menu. We will go through:

- the General tab;
- the Layout tab;
- the Animation tab;
- the Text tab.

This tutorial was made using:

Creative DW Drop Down Menu

Creative DW Drop Down Menu With Creative DW Drop Down MenuCreate Drop Down animated Flash menus in Dreamweaver 8, CS3 and CS4. 30 skins and over 35 button effects, 100% customizable, Liquid menu layouts, round corners and gradients, Advanced styling system to customize the menu colors & fonts, from the user interface.
See more

Finally, we’ll obtain an „.html” file which will contain our result – a dropdown menu. I’m going to show you how the menu looks like after every step and as well a final version of it; like this, you’ll get a glimpse of the menu’s high customizability. In order to be able to do this tutorial, the first thing you have to do is install Creative DW Drop Down Menus extension on your computer; if you encounter any problems doing that, check out the “How to install an extension” tutorial. Another important thing you should consider is the creation of a website in Dreamweaver before you start the work; “How to create a website” can help you if any problems occur.

1. Open Dreamweaver and create a new file; save it under the name of your choice.

2. Insert a new menu from the Insert bar (the top of the page).

Insert a DW Drop Down Menu

Insert a DW Drop Down Menu

Configuring the General tab

3. Let’s start with some general properties; apply the next changes to the selected parameters.

Configure the General tab

Configure the General tab

4. Let’s define the menu structure now, by accessing the top left panel. Click on „Menu Items” and then on „Edit item”. You should get a new window like the one below:

Menu structure

Menu structure

Edit menu structure

Edit menu structure

5. Let’s modify the structure of the menu. Click on the green plus from the bottom left and add a new item – name it Scroller.

Add menu item

Add menu item

6. By using the arrows in the menu place the new item in the following position:

Place the new item in position

Place the new item in position

Now it’s time to preview our file; just before that, select the menu on the page and align in centered. If any problems occur during previewing in browser, it’s very possible they are connected to the fact that you are testing the page locally. Try reading the “How to test a website locally” tutorial and that should solve the problem. Now, click F12 in order to preview – you will get something like this:

Preview your file (first time)

Preview your file (first time)

Configuring the Layout tab

7. Open the Layout configuration tab. If you closed the configuration panel, just click on the Edit menu button, next to Insert a new menu.

Edit the DW Dropdown menu

Edit the DW Dropdown menu

8. We’re going to make some changes to the Layout tab. Please apply the following changes for now; later you can experiment and find customizing solutions that suit you the best.

Configure the Layout tab

Configure the Layout tab

We just doubled the default button spacing and changed the submenu alpha parameter from 100 to 50; if you’ll put something under the submenu, it will be seen vaguely thanks to the transparency we applied on the submenu.

Let’s preview the file again and observe the differences:

Preview your file (second time)

Preview your file (second time)

Configuring the Animation tab

9. Next we’ll deal with the Animation tab, a tab which controls effects which will be visible only in the „.fla” file, so I’m not going to post a screen-shot of the menu after this step. When you solve the tutorial, you’ll see the differences as you preview your file at every step. Let’s begin; open the Animation tab from the configuration panel and make the following settings:

Configure the Animation tab

Configure the Animation tab

As you can see, I modified the highlighted effects, and I changed a bit their duration and the time delay as well. There are very many animations you can use and combinations to be done too.

Configuring the Text tab

10. The text tab deals with the way the text on the menus and sub-menus will look like. As in the previous tab, we’ll just need to make some changes and then the menu will be final. The changes I suggest are shown in the next image (they refer mainly to the text type and its size; as well I introduced an effect I personally like, the bolding of the text when in over position):

Configure the Text tab

Configure the Text tab

11. As I final step, let’s preview again our menu. Mine looks like this:

Preview your file (final time)

Preview your file (final time)

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com.

Facebook comments:



3 Responses to “Create a Drop Down Menu in Dreamweaver with Creative DW Drop Down Menu”

  1. Andy says:

    How do I link my pages with creative DW drop down menu. Currently pages load in another window.

  2. Hello Andy,

    You need insert “_self” in the target box of the buttons. This is possible from the “Edit Structure” panel.

    Regards,

  3. Dreamweaver has been for a while my personal goto software for a long time. I truly don’t know what I would do without it. There were periods when I initially started off utilizing the software, and I thought it was way too sophisticated. Now I fly around it, and it has turned into a great asset in my personal tool box. Anyways thank you for the posting.

Leave a Reply