Home » Tutorials » Dreamweaver
| Note: This tutorial is done by Macromedia
Dreamweaver MX. |
Save this image to your PC, or if you want to use any other
image of your own, please go ahead.
|
Create a new page and save it as menu.html.
Place the image you have downloaded above inside your menu.html
Then go to Window > Behaviors (Shift+F3)
to open the Behaviors panel. (If it is not open). |
Now select your image and click on the +
sign on the Behaviors panel. From the popup
menu choose Show Pop-Up Menu

|
Now type the first menu item in the Text
field, I entered Company. Then enter the
destination url for the menu item. This is the url where
user will be redirected when he chooses this menu item.
I have entered as company.html
Then click + to enter another menu item

|
|
|
Add more menu items as shown below. We need more menu items
to put them under the sub-category

Now as you see Web Design & Web Hosting could be placed
under Services. |
Select the Web Design from the menu and click on the
Indent Item to put it under Services
Now put Web Hosting under Services too. |
Now go to next step by selecting Appearance.
Choose the FONT, FONT SIZE, and MENU COLORS as you like
fo your menu.

|
Click on Advanced if you want to customize your menu more.
For example I have set a fixed cell width, which is 150pixels.
And also the Cell Padding to 4, as well as Text Indent to
5.

|
Finally Choose Position for the positioning
of the menu. I have selected the second one which will display
the menu under the image. You can explicitly define the
position by entering X: and Y: values directly in their
fields. And tick the Hide Menu on onMouseOut Event, otherwise
your menu will stay after you remove your mouse from the
menu.

Click on OK, and save your menu.html.
View it in your browser (F12 for IE).
 |
Related Dreamweaver Tutorials |
| |
 |
How to backup Dreamweaver New
Backup your templates, extensions, behaviors...etc |
| |
 |
Creating CSS in Dreamweaver MX 2004
Learn how to create and apply CSS in Dreamweaver |
| |
 |
Create Rollover/MouseOver effect
Rollover effect made easy with Dreamweaver |
| |
 |
Opening a Fixed Size Window
Learn how to open a window in a fixed size |
| |
 |
Redirection based on Browser Type
Learn how to make redirection script with Dreamweaver |
| |
|
|
|
 |
|