If you enjoy this tutorial, you may be interested in our Dominate Dreamweaver training.
My 12-week online course which will take your from the Dreamweaver basics through building complex spry menubars and much more.
More to the point, they have documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous.
They’ve even included a help file that’s actually helpful.
Still, in my experience, a program’s documentation is the last place people look for help so I’ve put together this little tutorial.
For the most part the process of customizing horizontal and vertical menu bars is the same but there are differences so I’ll follow up this post with one devoted to vertical menus.
However, if you can’t wait, the instructions offered here should provide a good basis for your own experimentation with vertical menu bars. In case you didn't figure it out from the help file, I should let you know that the look of your menu bar is controlled by the styles in the CSS file (Spry Menu Bar Horizontal.css) that Dreamweaver graciously created in the Spry Assets folder.
Since we'll be editing these styles, you'll need at least a minimal understanding of CSS styles in DW.
For instance, you should know - or be able to figure out - that when I say “set width: 20%” you should change the style definition so that the width attribute is set to 20%.
Type style and size: DW does not specify styles for the text in its menu bars so the style attributes are picked up from the page element(s) that enclose the menu bar.
If you would like to use a specific font, size, weight, style, variant or case attribute for ALL the text in your menu bar, specify it in the ul. Menu bar width: By default, the width of each menu item is set to 8 ems and the overall menu width is set to auto (determined automatically by the width and number of menu items).
To specify a specific pixel width for a menu bar: In the ul.
Menu Bar Horizontal style replace width: auto with width: XXXpx AND set the width attribute in ul.