DREAMWEAVER DROP DOWN MENUS

Drop down menus are easy to create with Dreamweaver MX (and later). They help improve site navigation and they give the site a professional look. Follow these steps to create drop down menus:

Step 1

Create a new document and save it. Then create a 300 x 25 pixel table that has 1 row and 3 columns.
Add a Bg Color (mine is #CCFFFF).

 

Step 2

Type Menu 1 in the first cell, Menu 2 in the second cell and ... guess what? ... Menu 3 in the last cell! You can use your own menu names here. Don't forget, these are main menu names, not the sub-menu names; those get set up in the Behaviors panel as drop down items under the main menu name.

Centre the text and apply formats for font and bold:

Step 3

Select Menu 1 and type # in the Link box on the Property panel. Repeat for Menu 2 and 3. This puts a temporary holding link onto the text which now appears blue and underscored:

 

Step 4

Now we need to attach the Drop-Down behaviour to each menu item.

Select Menu 1.

Choose Window/Behaviors (Shift+F3) to open the Behaviors panel.

Click the Plus button on the Behaviors panel, and from the menu choose Show Pop-Up Menu.

 

Contents Tab:

In the Text box type: Products
In the Link box: enter the URL link to the web page that Products will link to, logically the products.htm page! (Tip: create the underlying pages before you start this exercise!)

Now click the Plus button to add more menu items. For each one, type the text heading and the link URL:

 

Appearance Tab:

Choose Vertical Menu.
Change the font, size, and other formats to your requirement.
Change the Up State and Over State colours to your requirement.

 

Advanced Tab:

Cell width: 100 pixels (the same width as the cell for each main menu item - remember the table was 300 pixels wide with 3 cells, therefore each cell is 100 pixels wide.) You will need to choose Pixels from the popup before you can type in 100!
Cell Height: Automatic.
Menu Delay:  300 ms (the 1000 default is too slow!) - this controls the time it takes for the menu to appear and disappear when its rolled over with the mouse.

 

Position Tab:

This controls the drop down menu position. Click one of the 4 position buttons (I used the 2nd one) and the values are automatically entered into the x and y boxes. Or you can type in your own x and y values.

Play around with these settings to get the menu style you require.

Step 5:

Press OK when you have finished customising the behaviors. Click on the Code View button and you will notice that Dreamweaver has inserted Javascript into the code of your document. Cool!

Note: Dreamweaver also created a new javascript file named "mm_menu.js". This file must be uploaded with the new page into your web site folder for the menus to work properly.

Save your page and press F12 to preview it in the browser. Move your mouse to Menu 1 and you will see the drop down menu in action ...

Menu 1 Menu 2 Menu 3

 

 
 

 

Repeat the above for each main menu item.

Finally, if you need to change the sub-menu items, select the main menu name (Menu 1), and in the Behaviors panel double click on the "Show Pop-up Menu" option. This will take you back into the Show Pop-up Menu setup window.

 

 

Please contact us if you thought this tip was helpful - thanks.

FEEDBACK:

You cannot believe how much your tip on Dreamweaver and drop down menus helped me. I looked in manuals, all over the web - people were talking Java, Perl and Flash, etc. What a mess. I finally found something from a university that made it seem I could do this with just Dreamweaver and without knowing HTM. Steps were missing. Then I found your site. Awesome, clear and easy. Thank you so incredibly much!
SS, San Diego, USA.

I am a beginner at creating webpages and this tip was really useful - much better than the Dreamweaver help information! Thanks,
Sasha R.

Hey this was very helpful and straight forward. I had no problem following your directions and the results are exactly what I wanted. Thanks again!
SD, Alabama, USA.

Your tip on dropdown menus was brilliant. I struggled for ages to do this until my husband recommended this page and have produced what I needed in 15 minutes.
Anne B, UK.

I'm a real beginner and that tip (drop down menus) was just what I needed to know. Thanks!
Bob T, UK.

This was very helpful! Thanks for posting this information on the web! I look forward to looking into your site more for great ideas!
Kurt K, VA, USA.

Thanks so much – you’ve made today a success!
Mike W, Bucks, UK.

Your tutorial is really so cool.. Thank you very much. You've helped me a lot. Hope you continue sharing this kinda stuff to beginners like me. Thanks Again. Have a Nice Day.
Pam, UK.