I should start by saying that Adobe has done an excellent job implementing spry menu bars in DWCS3. 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.
Note: 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.
Getting started:
Before you begin, make sure you have properly defined your website within Dreamweaver.
Create a horizontal menu:
- 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 horizontal menu bar, select horizontal 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 (SpryMenuBarHorizontal.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. 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.MenuBarHorizontal style. The color of the text will be defined elsewhere.
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.MenuBarHorizontal style replace width: auto with width: XXXpx AND set the width attribute in ul.MenuBarHorizontal li to an appropriate value in either percent or pixels.
In other words, if ul.MenuBarHorizontal is set to width: 600px and there are four items in the top-level menu, an appropriate setting for ul.MenuBarHorizontal li would be either width: 150px OR width: 25%. For a 600 pixel wide top-level menu with 5 items the appropriate setting for ul.MenuBarHorizontal li would be width: 20% or width: 120px. Just make sure everything adds up or you may get unexpected results.
Note that changes made to ul.MenuBarHorizontal li affect only the items in your top level menu. The width of pull-down menus is not affected. Also, you should avoid adding borders to the ul.MenuBarHorizontal li style. They’ll throw off the width calculations we made above.
Menu bar height:
Caution! You can control the height of your menu bar by specifying a height attribute in the ul.MenuBarHorizontal 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.
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.MenuBarHorizontal 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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
- ul.MenuBarHorizontal 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:
The way DW menu bars are constructed, menu items which open to submenus have an arrow (downward -pointing for top-level menus, right pointing for sub-menus) 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.MenuBarHorizontal a.MenuBarItemSubmenu for top level menu items with a submenu.
- Edit ul.MenuBarHorizontal a.MenuBarItemSubmenuHover for the hover (rollover) state of top level menu items with a submenu.
- Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenu for submenus with a second-level submenu beneath them.
- Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover for the hover (rollover) state of submenus with a second-level submenu beneath them.
For reference, DW makes available the following images in the SpryAssets folder:
- SpryMenuBarDown.gif – black arrow pointing down
- SpryMenuBarDownHover.gif – white arrow pointing down
- SpryMenuBarRight.gif - black arrow pointing right
- SpryMenuBarRightHover.gif - white arrow pointing right
Up next:
That’s enough for now. We’ll look at vertical menu bars next time and then explore further customization options down the road.
RSS feed for comments on this post. TrackBack URI
September 11, 2007
How do I do this in Dreamweaver MX 2004? Just a simple menu, no images etc. Text should change colour on rollover only.
What I want is that I have a text menu:
xx yy zz aa bb ccc
If I rollover yy, it should have a text submenu that pops up:
xx yy zz aa bb ccc
ddd dddd dddd ddd dddd ddd
I have just started using dreamweaver, so not much I know!!
Would be grateful if you could help!
Thanks
Arati
September 24, 2007
Sorry to be slow to respond I’ve been out of the office the last two weeks.
It’s not easy in MX 2004 (one good reason to upgrade). It can be done by putting the submenu in a hidden div that is displayed (using the “show-hide elements” behavior) when rolling over the relevant link but it can be a bit tricky to implement.
October 15, 2007
Another interesting you can do is duplicate ul.MenuBarHorizontal a.MenuBarItemSubmenu and all similar files but add a new name. From here you can change the arrow image to another image of your choosing and if you specify a new width which is in concordance with the width of the box and you center the image within the box, you can create a separate background image for each menu item as long as you have specified a new name for each style and assigned each style to a different box. I was trying to figure it out and I found your site in my search, just thought I’d point this out to anyone who, like me was trying to put an image into the menu bar! Great tutorial by the way!
October 23, 2007
I am new to DW CS3 and am trying to use the spry vertical menu to improve our aged website. I have got it looking great in dreamweaver and test it in the browsers but when I try to put it online it just looks like an expanded UL / LI list. I’ve meticulously checked all the linked CSS and JS and cannot find anything the matter. Is there something else I’m missing? Thanks for any help you can give me!
November 26, 2007
@sierra it’s normally a matter of making sure you upload all the external files DW creates to make the menu work. In addition to what you’re used to there may be files in the “SpryAssets” folder that need to be uploaded.
January 10, 2008
Hi!
I’m working with horizontal Spry Menu. I already figured out how to apply a background image but it applies it to every item. Can I apply a different background image to each item in the main nav and the apply the same bg image to all the sub nav items?
How do I do this?
Tahnk you very much.
Alejandra
January 11, 2008
I’ve created a horizontal menu bar for the main site navigation. In FF it displays fine. In IE7, the sub-menus display below the main bar but horizontally rather than vertically. It is unstable and sometimes they display vertically too. Any help you can provide is greatly appreciated.
March 14, 2008
Hi, there –
I’m trying to set up a horizontal spry menu bar, but I’d like the submenu items to open horizontally as well, just below the parent item. Is this possible?
Thanks so much,
Lisa
March 31, 2008
Hey. I cant seem to adjust the width of the main menu in Safari. adjusting from *ems to 7 or 9 changes in firefox, but not Safari. Any ideas? thanx.
April 6, 2008
Hi
I was wondering is there any way to make the spry menu have rounded edges, rather then the standerd box shape?
April 7, 2008
Yes, I am trying to create a horizontal menu with horizontal submenu just below the parent menu. Can’t figure out how to tweak the spry css file to do this. Anyone successful yet?
April 25, 2008
Created the menu just fine and it works great when looking at the site in a browser. However in dreamweaver CS3 the menu is fully expanded and will not close which makes it very hard to make changes to the surrounding items. Also I don’t get the little eye that lets you expand each panel.
I figured it was corupt but all of my backups do the same thing.
Any ideas,
Thanks,
May 8, 2008
Please tell me is there any way to assign a unique color to each of the tabs in the menu of the Spry Menu. I know how to set the same color to all of them but want to be able to assign unique color to each of the tabs.
July 13, 2008
Hi,
I hope you can help me.
I’ve MenuBarHorizontal in my testpage.
Anyway I’ve decided to use frames for my website. So the menue is in the topfram and under I’ve the mainframe with a statrpage.
Anyway when I then try to look at it in my webbrowser it doesn’t work properly. The link that should be scrolling down and show the submenue can’t be seen.
I think it’s because the mainframe prevent the topframe to let the menue be visible properly.
Is it anyone that knows how I can solve this problem. I think it must works to using frames and the MenuBarHorizontal, doesn’t it?
July 13, 2008
@Marcus,
Sorry but Spry menus don’t work well with frames. You’re menu is probably functioning just fine but since it’s contained within a frame, the expanding part of the menu isn’t visible.
July 22, 2008
RE:Dave Newbe Says:
12:23 am
Hi
I was wondering is there any way to make the spry menu have rounded edges, rather then the standerd box shape?
———————
I am trying to do the same, any idea how I would accomplish this? Can it be done in the CSS or am I going to have to make spacers for each side and get them lined up correctly?
August 3, 2008
i cant get my spry menu bar to work! i need them to link up to the places they need to go but it just stays on the home page. how can i get it to work?? please help me. my website server is office live BTW.
August 3, 2008
@Nicky, you still have to create the links. By default the link is to “#” which is basically just an empty link. You need to create your other pages and link the menu items to them.
August 5, 2008
HEY DESIGN REFUGEE…
at office live, they only give 1 domain name…. they told me to save the website at dreamweaver default.htm. that was successfull, but the tabs are still are not working. how can i create “other” pages at officelive when i am only given one domain name?
August 5, 2008
also, when i add the new page that is supposed to link to the tab, and develop it, do i got to site>manage site and then click on the exisiting home page, or do i go to site>new sight and make a completely new page…. im a little new to dream weaver but thank you REFUGEE!
you are really coming to my rescue.
August 5, 2008
@Nicky, I don’t know anything about Office LIve. But a domain can have as many pages as you want. Just save them with different file names (contact.html, about.html, etc.). As for creating the links, etc. I’d recommend working through the Dreamweaver tutorial.
August 13, 2008
I too was wondering the same question as #10 and #16…how do I make the edges rounded? Either each button, or just the first and last, to give it a rounded look. Please help.
August 13, 2008
@Chris, etc. It’s tricky. You’ll have to use a background image either for all the link (a) tags or create and apply special style classes for the first and last links. The actual implementation is more than I can get into in this limited space. Maybe a future post???
August 19, 2008
I have included a spry horizontal menu bar in my website (thanks to DWCS3) and it works great in Safari. In Opera, however, the changing photos in an image viewer on my index page covers up a drop down sub-menu beneath Editorial. This also happens in Firefox, as does the lack of a pointing hand cursor when mousing over anything in the menu bar. Are these items fixable?
August 19, 2008
OK, I checked with my nephew who is a web dude and he gave me an easy fix to the Firefox-cursor glitch (style=”cursor:pointer; I have made the corrections). He is still looking into the disappearing drop sub-menu in the Spry menu bar and the race is on! Who of the two of you will figure this one out? I do know this has been a problem with other web developers but I have seen photo websites where this does not occur. At the very least, I hope you enjoy the photos on my website.
August 19, 2008
@Scott, if the changing photos are in Flash you’ve got a problem. Some browsers render flash on top of all other content. Otherwise put them in a div and make sure it’s behind the menu in the stacking order (z-index) .That’s under Positioning in DW’s CSS rule definition dialog.