Note: This is our second tutorial on customizing Spry menu bars in Dreamweaver CS3. The first covered customizing horizontal menu bars. Many of the steps for creating and customizing vertical menu bars are the same as those for horizontal menu bars. That information is repeated here so you won’t have to refer back to the previous article.
As I’ve said already Adobe has documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous. They’ve also included a help file that’s actually helpful. YOu can use the information you’ll find there to expand on the lessons of this tutorial.
Getting started:
Before you begin, make sure you have properly defined your website within Dreamweaver.
Creating a vertical menu bar:
- Open an existing document or create and save a new one. Dreamweaver CS3 won’t allow you to add a menu bar to an unsaved document. If you try, you’ll be prompted to save the document before proceeding.
- Select the location in your document where you want the menu bar to appear.
- Select the Spry tab in the Insert palette. (If the Insert pallet is not visible, select Insert from the Windows menu to display it.)
- Click on the Spry Menu Bar icon in the Insert palette.
- You will be asked to select horizontal or vertical for your menu bar layout. Since we’re making a verical menu bar, select verical and click OK. Your menu bar will be placed on the page.
- Immediately save the document. You will be informed that your menu bar requires a number of supporting files and prompted to save them. Click OK and DW will save the files in a SpryAssets folder it will create within the root folder of your website.
- With the menu selected, you can use the Properties palette to define the links, menus and submenus of your menu bar (to select the menu bar, click on the blue box labeled “Spry Menu Bar for xxxxx” that appears immediately above your menu bar).
Note that the Properties palette also contains a link, “Customize this widget.” That leads to the Help file that you are hoping to ignore by reading this. Take my word for it, clicking that link will be worth your while. Go ahead, I’ll wait for you.
Customizing the look of the menu bar:
Good, you’re back. 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 (SpryMenuBarVertical.css) that Dreamweaver graciously created in the SpryAssets folder. Since we’ll be editing these styles, you’ll need at least a minimal understanding of CSS styles in DW.
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.MenuBarVertical style. The color of the text will be defined elsewhere.
Menu bar width:
Note: This is the area that differs significantly from the procedure for customizing horizontal menu bars.
By default, the width of the top-level menu and each menu item is set to 8 ems.
To specify a specific pixel width for the top-level menu: In BOTH ul.MenuBarVertical and ul.MenuBarVertical li styles replace width: 8ems with width: XXXpx.
Note that changes made to ul.MenuBarVertical and ul.MenuBarVertical li affect only the items in your top level menu. The width of pull-down menus is not affected.
Menu bar height:
Caution! You can control the height of items in your menu bar by specifying a height attribute in the ul.MenuBarVertical a style. But be careful. This can cause type to be cropped or even disappear if text is resized or a menu item unexpectedly wraps to a second line. It’s more flexible to let the height of your menu items be determined automatically by the font-size (specified in ul.MenuBarVertical) and the padding (specified in ul.MenuBarVertical a).
Color of menu items:
The color of menu items in the link state (when they are not being hovered over or clicked) is determined by the ul.MenuBarVertical a style. To change the look of your menu items, simply change the default background-color and color styles DW has provided. This is also the place to add borders if you want to visually separate the menu items.
Rollover color of menu items:
To keep it simple, set the background-color and color styles to your preferred rollover colors in the following two style definitions:
- ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
- ul.MenuBarVertical a.MenuBarItemHover, etc.
In THEORY, the first definition determines the hover state of menu items and the second definition controls the appearance of menu items with open submenus. In REALITY that’s the way it works in Explorer. However in Firefox and Safari BOTH the hover state and the appearance of menu items with open submenus are governed by the second definition. I usually just make sure both definitions have the same settings for background-color and color and forget about it.
Menu bar arrows:
In DW’s vertical menu bars, menu items which open to submenus have a right-pointing arrow at their far right edge. These arrows are actually background images. If you change the background color of menu items or their rollover state, the arrows may become difficult to see.
To change the arrows, edit the background image attribute in the appropriate style definition as described below:
- Edit ul.MenuBarVertical a.MenuBarItemSubmenu for menu items with a submenu.
- Edit ul.MenuBarVertical a.MenuBarItemSubmenuHover for the hover (rollover) state of menu items with a submenu.
For reference, DW makes available the following images in the SpryAssets folder:
- SpryMenuBarRight.gif - black arrow pointing right
- SpryMenuBarRightHover.gif - white arrow pointing right
RSS feed for comments on this post. TrackBack URI
January 6, 2008
I am having a problem with IE6 (who isn’t) and my vertical menu. When a menu item is chosen to go to another location and you return to the menu, the appearance of the text has changed to what appears to be a default un-bolded font. Sometimes when a page loads the font’s are all default.
Any help, suggestions would be appreciated.
Thanks,
Joe
January 6, 2008
Joe,
I suspect it has to do with a visited link style (a:visited) which is different from the plain a or a:link style.
If you send me the url of the page I’ll try to take a look.
January 21, 2008
I am having the same problem but I can provide a few other details. I have defined a:visited (along with a:link, a:hover, a:active)in a CSS style sheet separate from the Spry Menu bar style sheet, along. The one that overrides the Spry Menu Bar is a:visited. It changes the menu bar colors to what is defined in a:visited once I have gone to that page. Naturally this only occurs in IE.
thanks
lance
March 1, 2008
Hi. I’ve been working with Dreamweaver CS3 and its Spry Menu Bar options. I created a really nice looking menu bar at the top of my pages and it worked great when I viewed it in Explorer 6, but when I actually uploaded it to my server and previewed it, it showed up as a bulletin list. What would cause this? I uploaded all the support files that went with the menu bar so that it would function correctly, but it did not work out. I also deleted all the files and recreated and re-uploaded it, but I had the same result. Any advice?
Thanks.
March 13, 2008
I am having a problem with IE 6.0 closing with the standard error saying that IE has to close because of…. when using the spry menu bar. Any ideas what may be causing this.
March 17, 2008
Help!!!
The above tutorial is great… Sorted out a problem I was having with sizing!! Thankyou! However.. I’m working on a website in Frames.. Within one of the frames I’m trying to create a spry menu bar that appears from a button. The button is already created with rollover effects.. Everything sits nicely together until I try to create the spry Menu.. Been a knightmare!! Anyone out there that could aid me?? Thanks in advance
Stu
April 14, 2008
Hi,
I’m having problems seeing the submenus on Firefox, and Opera. IE works but there’s something funky happening there aswell when rolling over the buttons with submenus. http://www.cedarsolutions.com.au. Can anyone help?
Thanks
Karine
April 18, 2008
I was wondering if anyone knows how to change the appearance of each individual tab. I have 3 images as buttons and want them to have the flyout appearance. When I apply the image it affects every box. Any help would be greatly appreciated!! thanks
April 18, 2008
@Gavin, you can do it by creating a separate style for each tab link and using your image as the css backgrounds for the links.
If you do that you’ll want to hide your actual link text in some way.
April 18, 2008
Thank you for the quick response. Could you give me an example of how to do that. The code for the first style is
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
color: #333;
text-decoration: none;
height: 65px;
}
can I create a different style (i.e.)
ul.MenuBarVertical2 a
{
display: block;
cursor: pointer;
color: #333;
text-decoration: none;
height: 65px;
}
notice the 2 that I put in?? thanks again…hopefully im not asking too much
April 18, 2008
@Gavin, more like this:
ul.MenuBarVertical a.contact {
background: url(/images/concord-menu_02.jpg);
}
ul.MenuBarVertical a.contact:hover {
background: url(../images/concord-menuOV_02.jpg);
}
with your link looking like this:
That should get you started anyway.
April 18, 2008
so this is what I have now…im a little new to this so if I am way off base im sorry.
Item 1.1
Item 1.2
Item 1.3
Item 2
Item 3
Item 3.1
Item 3.1.1
Item 3.1.2
April 21, 2008
[...] Design Refugee has a good tutorial showing how to create and customize a vertical Spry menu bar [...]
April 27, 2008
I am re-creating our school website. I am using frames. When I create my Spry in my left pane, how can I get the sub-menus to go to the main frame. I am using CS3. Mainframe is not an option in the drop-down list of th spry menu.
Thanks
April 29, 2008
Does anybody know how or where to find content on creating a down state or current tab style? For instance, when clicked and sent to another page, the tab stays a certain color. Any ideas?
May 1, 2008
I have a spry horizontal menu in a topframe. In the browser, when i click on item one the submenu opens behind the mainframe.
thanks for your suggestions.
rick
roe46
May 1, 2008
whoops. forgot to add the obvious. how do i make the submenus appear on top of the mainframe when opening in the topframe.
thanks
rick
roe46
May 1, 2008
@Brenda and rick,
Sorry but you can’t make menus from one frame extend over another frame. Each frame displays a separate html page and there is no way for the content of one page to display outside of its frame. I’m not sure why you would want to use frames in any case as they present a number of other problems as well.
May 1, 2008
Kitzmiller, I don’t know what would be involved in making that happen using DW menus but Pop Menu Magic plugin (http://www.projectseven.com/products/menusystems/pmm/index.htm)from ProjectSeven.com ($90) can do it. I’ve used it a lot and recommend it if you can justify the cost. Also, it requires a pretty extensive knowledge of CSS to customize the resulting menus beyond the variations that are built into the plugin.
May 1, 2008
thanks to Brenda and Rick
I have abandoned the frame idea and am moving on to css and templates.
May 9, 2008
anyone experience a left offset, when working with 2nd level submenu, in a horizontal Spry menu bar? It appears fine in IE but in Firefox and Netscape, the third submenu level appears shifted left by 18pixels, but not in IE. I have the margins set correctly but FF and Netscape (ie. 0 0 0 100% (as I did not want any offsetting but flush alignment with the 1st level submenu items) seem to be ignoring this property setting in the CSS file.
May 12, 2008
Hello, I’m hoping for a response since I’m really a beginner and I’m getting really frustrated. I have a beautiful site created, however, I haven’t figured out how to put my spry menubar into a template. I saved it as an editable region, but only when I go to create a new page based on the template, is the spry updated. In other words, I can’t get the rest of the pages I’ve made from the template to update when I make a change on the spry…any feedback would be wonderful! Thanks.
May 12, 2008
Just a note, there’s a new pure CSS menus Dreamweaver extension called CSS Menu Writer that creates horizontal or vertical multi-level navigation. It has a slick interface and the menus are completely customizable. Eric Meyer had a hand in development, so the code is compliant and validates.
May 18, 2008
Hello! I have added a few spry widgets to a page I am working on. In the beginning, if I would highlight the widget, the properties panel changed to allow me to edit the widget via it’s custom menu. For some reason, now when I highlight it, that option is not there. Does anyone know what happened? Or, what I can do?
May 19, 2008
Hi im really new at CS3 and im creating a vertical menu, i was wondering how to go about creating the menu using images at buttons
June 24, 2008
I am using DWCS3, I have added a Vertical Spry Menu Bar in my pages, it works fine in IE but it is flashing in Netscape. Any idea why?
Many thanks
July 9, 2008
I created a vertical spry menu in DW CS3. It works in Opera, Firefox and IE7. IE6 wont show the menu fonts unless you mouse over them? Any thoughts?
July 17, 2008
spry menu bar vertical not working in explorer 6 [it can not be sean at all] , it does work very well in explorer 7 and the new firefox
another problom is - in explorer only it ask if it is ok to use active X for this site?
can we do any thing to avoide that?
any ideas
July 20, 2008
Is there anybody who knows how to get a background image in every menu item?
Matthias
July 29, 2008
Hello!
I have the same problem than Derek Durbin. Could you give us any advice?
thanks a lot, cause I really have a headache with that spry….
Émilie
July 29, 2008
@ Émilie: For whatever reason, it looks like the link to your javascript and/or style sheet are not working. Double-check them.
@matthias: you can assign a background image to the link (a) tag.
@eddie: I’m not sure about that one. Sounds like javascript and.or active x support may be turned off you explorer 6.
@Kieth, we’d need to see an example.
August 15, 2008
Hi. I’ve been googling for hours trying to find out 2 things I suspect are very simple. Sorry to land them on you, but I’m out of options! It might make my questions easier to understand if you refer to my website (currently password protected until it is ready to go “live”).
User name: tester
Password: testing123
1. I only have 5 items in my horizontal menu, and they stop half way across the page. I want to extend the menu so it stretches right across the page/browser, as a table might do, while keeping the menu items left-aligned, where they are now. How do I do this, please?
2. If, instead of the above, I wanted to separate the buttons of the menu bar so they have equi-distant space between them, how would I do that, pls?
August 17, 2008
Hey all, Ive just started with CS3 and have inserted a vertical menu but all my site content comes after the bottom of the menu and not to its right hand side of it. Im a complete n00b but would like my menu down the left hand side and some text and images to the right. At the moment it seems as though the menu is full width of the page.
If I try to add text or images to the right, it just appears in the menu…eek..please help, in very basic terms please!
August 19, 2008
@jotto, make sure you’ve uploaded all the css and javascript files to your website.
August 19, 2008
@rossnroller check out our article on horizontal menubars and see if that helps. It’s at http://www.designrefugee.com/design-blog/spry-menu-bars.html