If you enjoy this tutorial, you may be interested in our Dominate Dreamweaver online training. Our 12-week online course which takes your from the Dreamweaver basics through building complex spry menubars and much more.
Note: This is our second tutorial on customizing Spry menu bars in Dreamweaver. The first covered customizing horizontal spry menus. 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
Need More Dreamweaver Tips, Tricks & Tutorials?
If you'd like to receive more Dreamweaver tutorials like this, subscribe to my newsletter by completing the email form below:
{ 293 comments… read them below or add one }
« 1 2 3
I want to creat spry menubar with diffrent width of buttons. I try it but all buttons give same width .
To do that you’ll need to create a unique style classes to apply a width for each menu item. And then apply the styles to the appropriate link or li tag.
I am attempting to use the Vertical Spry Menu Bar Widget on a website and have customized it. It works beautifully in Safari, Firefox and Chrome but fails in IE (8) & (9). The MenuBarItemSubmenu has no background-color (transparent) with white text, while the items have a light blue bkgd with dark blue text. When I view the site in IE the background is white with white text at both levels.
Great info on this site, but I couldn’t find this particular fix. I tried the transparency code/css3 but I couldn’t figure out how to apply it only to a background image of a menu item, the whole item is transparent. I would really appreciate some help with this. I’m currently using Dreamweaver CS4. The test file I’m working with is http://www.pacificspiritpilates.com/intro_offer_new3.html.
At the bottom of your SpryMenuBarVertical.css file you’ll find this:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
It affects only IE. Change the background property to whatever color you need.
Yes of course. Thanks so much.
Hello,
Is it possible to use text in place of the menu bar arrows?
The menu bar arrows are CSS background images so, with a bit of work, you can replace them with another image with text in it.
Hi,
I am new to Dreamweaver…and a client contacted me to see if I could help them updating their website…simple things like changing the font type and size. But now I am trying to make changes to the menu bar, and I am having tons of problems with it. When you go to a page, for instance http://syharris.com/About/About.html , the submenu is showing up constantly and I can’t seem to be able to fix it. I tried making a new spry menu in a new file, copy and paste it, but it automatically changes to what’s showing up now.
This is driving me crazy. I have been trying to fix this for days now…with no luck.
Another issue I am having is that all the changes I am making to the website can be seen in IExplorer but not with Fox, Chrome…
Agh! I am desperately in need for some advice here…any help I will greatly appreciate it.
Thanks.
Wanda
I’m sorry, but there’s really no kind way to put this. The HTML code and CSS for that page are a mess.
But to answer one of your questions, the reason that building a new menu and pasting it in won’t work is that the look (and some of the functionality) of the menu is governed by the CSS style rules in the SpryMenuBarHorizontal.css file. Nothing you do will have any effect unless you edit the style rules in that file. And, quite frankly, the existing changes to that file have done more damage than good. I’d recommend deleting the menu and the links to the menu CSS and Javascript files and reading these posts before you start to rebuild the menu:
Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver: http://www.dwcourse.com/dreamweaver/spry-menu-bars.php
The Ten Commandments for Editing Dreamweaver’s Spry Menubars: http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
But you should be aware that without a working knowledge of HTML and CSS you may be in over your head.
So this page (or pages) are basically ruined?…I was afraid that was going to be the answer…
I’m not sure I’d say ruined but yes, it would probably be easier to start from scratch but, if the menu is the main item, then you could just delete it and the related files and rebuild that.
I have created a website and the spry menu works but the submenu doesn’t. Please any suggestions on how to fix this would be greatly appreciated. The website is http://www.nefcoplanning.org the submenu are located under “Environmental”, “Economic Development” and “Publications” but nothing pops up.
Thanks
The link to your Javascript file is broken it’s currently file:///C|/Users/gis/Documents/nefcoplanning/SpryAssets/SpryMenuBar.js which points to a file on your hard drive not on the web. It needs to be fixed. The correct link would be /SpryAssets/SpryMenuBar.js
Thanks for the information. Could you tell me how I would correct this problem? Where do I need to make the changes?
never mind we figured it out :)
I am working on a horizontal spry menu. Some of the menu items are a single line and other are 2 lines. I would like them to be centered vertically. How can do this?
Sadly there’s no straightforward way I know of you accomplish what you want.
I’m currently working on a website for a class project(but I plan on finishing it later) and I want to know how or if it is possible to do something. What I would like to do is when your clicking from page to page on my spry menu bar I’d like an image to be displayed over the tab of the page your on. I figured out the rollover image and background image and everything but I would also like to be able to do this. If you know of anyway to do this it’d be much appreciated. Thanks
Not sure if this is what you’re after.
Highlight the Current Page in a Spry Menu with CSS: http://www.dwcourse.com/dreamweaver/highlight-current-page-spry-menu.php
I got frustrated and deleted the spry menu I created and I think all the coding. I tried to recreate it now my submenus won’t show up when I test it in IE. What am I doing wrong?
CAn you post your page and give me a link?
I am using Dreamweaver CS3. I created a spry menu bar that I want to scroll to the bottom of the page with me as I scroll. I can’t find any data to show how to do this. Please advise.
You need to learn about the position:fixed CSS property which you can apply to the ul.MenuBarHorizontal style rule to accomplish what you want. Check out these pages:
http://www.w3schools.com/css/pr_class_position.asp
http://www.dwcourse.com/css-positioning.html (read the text in the content at the top)
Hi,
I’m having an issue getting my spry vertical menu to stay at the top of the page – it seems to be centering vertically so that it looks fine on a page with little content but not great when there is more content. I thought this would be a position thing, but I haven’t figured out how to fix it. Any thoughts?
http://globalnetwork.princeton.edu/index.asp
Thanks!
I’m assuming you got the issue figured out because I don’t see it on the site you linked to. If you’re still having the issue, let me know which browser(s) has the issue.
Yep just needed a valign in the proper div. Thanks though!
I just created a verticle menu bar on my site. Now I get this error message when you load my page with the menu bar.
The page is not connected with script file ActiveContentSliding2.js
Everything works right but everytime you open a page with the menu bar this error pops up.
That’s not much info to go on. That error message doesn’t appear to be related to a Spry Menubar. So a couple of questions:
Do you get the error when opening the page in Dreamweaver or in a browser? If it’s DW then you’ve probably added and deleted some Spry or other content and you’re being warned about a javascript link that is broken or unnecessary.
Did you use a Spry menubar from Dreamweaver or some other type of menu? And did you use any other “active” content on the page.
I’m having a little trouble with the Vertical Spry Menu Bar. It’s currently on the left side of the page, but I’d like to get it to be on the right side of the page. Is this possible?
Also, what if I want to continue with text or pictures on the same line as the Spry Menu Bar? How do I make this happen? Every time I try I either have to be on the next line or under the last menu item.
Thank you for any help!!
You need to place the spry menubar within a larger layout framework. I’d suggest starting with one of the built-in , multi-column ayouts that come with Dreamweaver
HI,
I have created a website and was using Spry Vertical Menu Bar but i had a graphic i wanted to use and it wouldn’t work. If i had submenus the graphic just wouldn’t show up but so long as i didn’t have submenus the graphics would work, someone help me please!
The background for items with a submenu is controlled by the ul.MenuBarVertical a.MenuBarItemSubmenu style rule.
Thank you in advance for your help. I have setup my vertical Spry Menu and it is working perfectly. I love that option for development. So simple and I am a beginner!
My only problem with it is when I roll my mouse over an item on my menu and submenu, a little box appears (like a bubble text box) beneath my cursor with the link name in it. How can I remove that option from the spry menu?
Nevermind! I figured it out. If anyone else ever has this issue, it was simple:
That little box was a “title” box. Once I removed the title from each item (link) in my menubar, that box stopped appearing.
I’m having trouble with my Spry Menu…it’s probably something simple, but I’m beating my head against the wall.
Everything works fine when I preview the site. Everything works fine if I view it locally. But, once I upload the site, the menu bar on the first page works fine – but the menus on the subsequent pages you link to in the menu do not work. Any ideas?
You’ve somehow broken the links to the CSS and javascript file on the non-home pages. You have:
It should be:
Looks like you might have set up your site incorrectly. The “../Publish/” shouldn’t be in those links.
Got it – I knew it was something simple.
Thanks very much for the help – I appreciate it.
I am working with DW CS4 Spry Menus. I’ve added links for all of my menus/submenus, but when viewing the website, using F12, the first link will work, but when I click another menu item on the Spry menu, the page won’t change. It stays on the original linked page. Is this because I am not working on a webserver, just a folder on our school server? Is there a way to get around this?
thanks.
I you are previewing in a browser, your links should work. However when you click on your first link, you’re taking to another page and you’re no longer previewing from Dreamweaver. So depending upon how you created your links (if they are relative to the site root for instance) they may not work on subsequent pages. Try setting links relative to the document when you set up your site.
Hello,
I was wondering how to position the spry menu bar on the page. Currently mine is positioned vertically on the bottom and I need to bring it up to the top.
It’s impossible to answer that without seeing the page. GEnerally it’s just a matter of positioning it properly within the structure of your page.
Anyone have suggestions how to set up a horizontal spry menu that has the following requirements:
1) The menu is centered and a fixed width, 800 px
2) The menu needs to sit against a colored background who’s width is 100% of the browser window and who’s height needs to be the same as the menu bar
3) The colored background needs to stretch vertically as a user resizes the text
Thanks for any help you can give.
Thre are a couple ways to do it here’s one:
Put the menu in a div 800px wide and center that div (margin-left:auto and margin-right:auto) within another div (width:100% with the colored background).
You’ll also need a clearing element
Thanks so much for all of your tips! I’ve been searching for hours for the last couple of days for an IE fix for the top menu bar. I found one that almost did the trick but still had some bugs in it. Your hint about setting the width to a set px in ul.MenuBarVertical and ul.MenuBarVertical li ONLY was the fix I was working for. (Yatahhhh!)
Hey,
I’m in the process of building my website. I successfully created a spry horizontal menu bar. However, after messing around with some of the css properties, saving the html so i could view it in fox, I’ve got some issues. When i try to create a new hor. menu bar for another html, it brings up the old saved version, which 1) aligns my menu bar vertically instead of horizontally 2) the even number items in my submenu are aligned next to the previous item instead of below it.
Should I try to reset all properties? if so, how? or should I try to fix each problem at a time?
Hard to comment without a link to the site but…
To “reset” the style sheet, define a new site, make a page, add a menu and save the style sheet. You can then use the new style sheet to replace your existing one. BTW, it’s a good idea to keep a “virgin” copy of the style sheet around for whenever you need to do a reset (it’s usually easier to start from scratch that fix a heavily edited style sheet).
Awesome. Thank so much for the help.
is there a css setting for the spry menus that controls the visited link state?
You’d have to add it: ul.MenuBarVertical a:visited
Make sure you put it below the ul.MenuBarVertical a rule in the style sheet.
Hi, is there a way to have all of the submenus align with the top of the main menu? or vertically centered with the main menu? (instead of it lining up with its respective menu item)
Thanks
I haven’t done this but you could try absolutely positioning the submenus (ul.MenuBarHorizontal ul) absolutely with respect to the main menu (ul.MenuBarHorizontal). You’d also need to apply the position: relative property to the ul.MenuBarHorizontal style rule. If you have sub-submenus you’ll need to create a new rule ul.MenuBarHorizontal ul ul for positioning them.
Hi,
Is there any way that we can give a menu item currently in use a different color, so that user knows which tab is being used currently. I tried using the following :
ul.MenuBarVertical a:visited
{
background-color: #33C;
color: #333;
}
but it puts all the items once visited in a different color, while i want only that item of the spry menu bar to be highlighted which is currently in use.
Regards,
Diwakar
You can create a style for the current link (say a class rule name .current) and then apply it to the relevant link on a page by page basis.
I’m trying to do the same thing, but with a virtual header insert. I tried giving each page a separate body id name, but I haven’t been successful. Is it possible to have the current page highlighted in a virtual header?
If your pages are based upon a template you’ll have to use the menu: Modify>Templates>Make Attributes Editable… command to make the ID attribute of the body tag editable and then edit the ID using the menu: Modify>Template Properties command.
Hi there,
I was wondering how you create translucent/semi-transparent drop-down menus, any help is always appreciated!
Cheers
You could use a png image with transparency for your link background but transparency in png images isn’t supported in IE6 (not a big deal to me but…)
The simplest thing to do is just fake it with background-images for the links that give you the appearance of transparency.
Thanks for the reply Jim, much appreciated.
Yeah I thought that might be the case – using actual images for the drop-down menu. Would you be able to point me in the right direction as to how to go about this the most effective way?
Below is a link to a jpeg of what I hope to create, or something along these lines – that is, a faded (50%) drop-down menu that allows the user to highlight a faded submenu (75%) – I know this is achievable, but what is the best way?
http://www.tav.ca/sampleMenuJpg.html
Cheers
Well for that you need true transparency and it can be done with CSS3 (the opacity property) and an IE workaround (the filter property).
.transparency {
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
That won’t work of IE6 however. Hre’s more info: http://www.w3schools.com/Css/css_image_transparency.asp
I realize this is an older post, but I do need some help!
Is it possible to have only ONE menu open at a time?
I’ve tried a div code (manually inserted) and for some reason, it’s not working… Any ideas?
I’d love to help but I really don’t have a clue what you mean by only having one menu open at a time. Can you point me to an example and possible post your attempt and give me a url?
Hi, I have two issues. Firstly, I have lost my arrows on the menu items that open to submenus. I assume it is a css problem, but I don’t know what I did to cause this. Also, on http://www.channelkor.com/CKgallery/gallery.html,
I can’t get the widget to look the same as the other pages (especially in IE). I’m thinking that it has something to do with the “wrapper” that is with the gallery that I made in Adobe Bridge and put on the page. Can you help me?
1. You’ve removed the background graphic in the style rule ul.MenuBarVertical a.MenuBarItemSubmenu.
2. The width of the div holding the menu is smaller on that page than on the others (102px versus 129px).
BTW, creating your page layouts with AP (Absolutely Positioned) divs or exporting it from a program like Photoshop or Fireworks is going to cause you lots of problems like this in the long run.
Thank you for your help!
1. Under ul.MenuBarVertical a.MenuBarItemSubmenu, I replaced the background-image with url(SpryMenuBarRight.gif)( I had accidently put transparent in there). In Dreamweaver it looks fine, in the browsers it creates a repeated pattern of arrows across the whole field of the Menu Bar menu rectangle. I also have background-repeat, no-repeat set.
2. The width of the div seemed to solve that problem.
(I didn’t export the layout from any other program. I did use a Photoshop jpeg for the background image. I’ll explore the AP divs)
Do you have any suggestions for solving problem #1?
Thank you,
T.
her’s the full set of properties for that rule:
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
If you deleted the position or repeat property that could cause an issue with how it displays.
Thanks for your help. It is finally working.
I am having a problem with the spry menu bar vertical in firefox and safari. The submenu are not displaying correctly. I can preview everything fine in IE.
Thanks Mary
I can’t diagnose the issue without a link.
« 1 2 3
{ 1 trackback }
Previous post: Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver
Next post: Editing content in absolutely positioned divs in Dreamweaver