How to Add Button Image to Dreamweaver Spry Menu

Welcome to Adobe-Masters.com!

This short write up will be good for customizing a menu bar in dreamweaver with a button image. The menu will be a spry type and vertical.

How to Make A Vertical Menu In Dreamweaver

Feel free to read this link for instructions on how to create a vertical menu bar. See the MsMoneyGirl.net: Paid Shopping vertical menu example below.

After creating your vertical menu you’ll see that’s its very basic. It will look like this at first. Adding a button to the menu will make the page more stylish. The button used in the example shown above is a gradient pink outlined in a yellow stroke.

How to Add A Button to Dreamweaver’s Spyry Menu

The easiest way to add a button to your new spry menu is to head over to the CSS menu to locate the “u1.menubarvertical a” style. It can be found under SpryMenuBarVertical.css within your html document.

Then, you’ll need to click on “Add Property” to insert the button image. After doing so you should see the new appearance of your new button.

You can stop here or add a colored text box with round corners to make the page even more interesting.

Oh, and I just remembered that the wine affiliate template tutorial shows off a spry menu too, but its horizontal.

Where to Find Buttons

This tutorial assumes that you already have a button that you’d like to use. If not, check out this How to Use Free Illustrator Buttons In Photoshop and On Website article. You’ll find the same nice button download link I used for the example menu bar example shown above.