If you enjoy this tutorial, you may be interested in Dominate Dreamweaver. My 12-week online course which will take your from the Dreamweaver basics through building complex spry menubars and much more is now accepting registrations. The cost for the course is $397 (or three payments of $149.99).
Click here for more information or use the button below to register now.
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
Looking for More Dreamweaver Tips, Tricks & Tutorials?
If you’d like to receive more tips and tutorials like this subscribe to my Dreamweaver Tips, Tricks & Tutorials newsletter by completing the form below:
{ 248 comments… read them below or add one }
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?
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.
Hello,
First, the website is a Yousendit.com compressed file. Once downloaded, go into the “html” folder and click any of the pages. I apologize for having to do it this way but the site is not up yet.
The site is working great on everything but IE v 6.0
The animation bar is very slow, and the spry menu bar is dropping out when rolled over. I am really hoping I don’t have to make any drastic changes, but please let me know what you think.
Thank you very much this is an awesome forum you are doing!
You’ve made a number of changes to your styles and it’s hard to tell which ones would affect the display but you might try checking these:
In the ul.MenuBarHorizontal ul the zindex is originally set to 1020, I’d reset it to that value.
You removed the position: absolute from the ul.MenuBarHorizontal ul ul rule. Try putting it back.
I’d restore the setting for ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible to left: auto; and top: 0;
If that doesn’t do it I’d start with a fresh style sheet and make my edits very methodically based upon the suggestions in this article.
Hello,
The suggestions you gave me made a little progress. The links are all now working, and the menu bar is not dropping out!
However the pages are still very laggy, and only on IE 6.0
Do you have any idea what might be the cause of this?
Thank you very much for looking over the files, you run an awsome forum and your efforts are much appreciated.
Ben
I´m having truoble with my sry menu, looks perfect on firefox and safari but the submenu and submenu are moved all the way to the right on Internet Expore how can i fix it.
This is usually a matter of you having changed the position property in one of your CSS rules. Of course it’s hard to say without actually seeing your page. Can you post a link?
im having a problem with the spry menu. it looks fine in fire fox, but when i look at it in safari the buttons are too big and my last button goes onto the next line. how do i make it look the same in both browsers?
Looks like you’ve got the type size set higher in Safari. You can reset it to normal by choosing Menu: View>Actual Size in Safari.
But the reason it’s a problem is that you’ve set the width of your list items using ems: width:7.14em;
and the width of your “wrapper” div in pixels: width:600px;
When someone increases the type size in their browser that increases the actual size of an em increases but pixels remain constant. Suddenly the list items are too big to fit in your wrapper.
Since you have 6 menu items I’d and your wrapper is 600 px, I’d recommend you set the width in the ul.MenuBarHorizontal li style rule to 100px.
Hi, my name is Jullie and i created a website called Hills Kids just over a year ago.
Currently its difficult to navigate around my website. I thought of using a Spry Menu to help.
I used an existing page and Saved As the page with a new name. I then created the Spry Menu with all the Sub Menu and links.
How do i link my Spry Menu so that it appears on all my pages, so i only need to make changes in one location? I currently use a CSS file to maintain the current format of my pages, each page has a <link href="hillskids.css" . I've tried to do the same with the Spry Menu by copying and pasting the following information into an existing page below my existing link href, but it does not display.
Is there an answer to what i’m trying to do? Do you have a course on how to do this?
Thank you
Jullie
Julie, that’s a more complex question than you might imagine.
1. First Spry Menubars use CSS and Javascript that are (generally) saved in external files and linked automatically similar to what you show. You have to make sure you keep and upload those dependent files as well. BTW, the way you change the look of the menubar is to edit the CSS style sheet. Never edit the javascript (unless you’re an expert).
2. Second, there are a couple ways to add the menubar to all pages and only update it in one.
a. Create a Dreamweaver template for your pages and then build all the pages based upon the template. Just make sure than you don’t place the menu in an editable region.
b. Place the HTML for the template in an external “include” file and then place the menu file in the page using either a server-side include or php-include. Either method requires that the server be configured to handle the request and may require than you use a special file extension (fro example .shtml or .php instead of .html).
http://www.candjautoinc.net
I made a spry menu, and I want that grey background on all Menu’s. I have no idea what I am doing and this is where I am now. How do I get ride of those two white boxes on troubleshooting tip and services. These two are the only two with drop down menus right now. I don’t want to do the others until this is fixed. When I load it live it gives me that Active X and as soon as allow it those two turn white. I allowed Active X to run on my files and now it just goes straight to white. I know it is a simple fix, but been working on it for a few hours now with no progress any help would be much appreciated. Thank you again
Actually it’s not so simple. You have a number of Explorer related issues that need sorted out. I’d probably recommend starting the menu over or at least returning to the default SpryAssets/SpryMenuBarHorizontal.css style sheet and then following the steps in this tutorial. With Spry menubars, it’s best not to edit a style unless you have a good idea of what it does.
Alright I did as you said and the same thing happened, it went white. My way, and your way is making the same thing happen.
One possible issue, you’re using CS3 (it appears) which uses Spry 1.4, you should upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found at http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry.
Sorry, but other than that all I can recommend is starting with the default styles and change one style property at a time, test after each change and see where the problem lies.
This may already be answered but my submenus arent popping out and I have tried to get them to work over and over again but nothing seems to work. Please help me. Here’s the link to the site: http://www.pelham-city.k12.ga.us/phs/index.htm
Jeremy, some of your files are referenced incorrectly:
" type="text/javascript">Those are actually pointing to files on your local computer which, of course, aren’t available online. You need to fix any links that begin with “file:///”
It could be you didn’t define your site correctly or some other issue. In any case the links should probably look like this:
phs/SpryMenuBar.js or this: /phs/SpryMenuBar.js
Thanks so much for your help! I’ll be sure to get back with you if I run into anymore problems.
hello,
Your tutorial was very useful. I also was trying to follow how to fix the width of my menu bar. (ul.MenuHorizontal li) no matter which option I use, (em/px/pt, etc) I could not get exactly 100% across the width of the banner/body of my site. I would still either 3 pixels too short or way over (push the last menu page to the second row.)
Has anyone had this problem?
I’d have to see the page to give you an answer.
wow, thanks for the quick reply!
here is my test link:
http://chgchiropractic.com/testsite/chgJan2010/html/aboutchg_test.html
Thanks for looking into this for me.
That’s going to be a problem for you. You layout is 1000 pixels wide and that doesn’t divide by six (the number of top level menu items) evenly. The easiest solution would be to give the table cell holding the menu a background that matches the menu so those few extra pixels won’t stand out so bad.
Another solution is to create a custom style class rule for one of the menu items and make it wider to use up those extra pixels. then apply the style to one of your menu items.
I see I see. I will try that.
Thanks again!
hmmm. i just thought i would try to add a bg img for a quick fix. thanks again for your help :]
It looks good to me! Glad I could help.
Hi
Great tutorial!!
I am having problems viewing my menu bar in IE- the dropdowns appear along the top of the screen instead of under the rollover. However it is working fine in chrome and firefox. Do you have any idea what the problem could be?
I hve put it up online at http://bedesigned.com.au/index2.html.
Thanks in advance for any suggestions!
After a quick look, I’d guess that you added the property display:inline; to the ul.MenuBarHorizontal ul ul and ul.MenuBarHorizontal ul a.MenuBarItemSubmenu style rules. I’d try deleting the display properties in those style rules
Hi – great tutorial! But when I view my page the submenus do not come out (I tried in Safari and Firefox). Any suggestions on the problem?
By the way – here’s a link to the website with the menu: http://www.cornerspeed.net/indexNEW.html
Sorry to be slow to respond. I’ve been working to get the next session of my Dominate Dreamweaver (see ad in right sidebar) ready. BTW, it covers Spry Menubars.
Anyway here are two potential problems I see:
In the ul.MenuBarVertical li style rule you’ve changed the position property to inherit, try position:relative.
In the ul.MenuBarVertical ul li rule it looks like you’ve added float:none. I’d try deleting that property.
Hope that helps.
Hi
Is there any way I can make a spry panel reveal upwards instead of downwards? I want a panel at the bottom of my site which grows upwards to cover the rest of the site… I have done something similar in flash but need to create a similar look in html: http://www.oohtestserver.co.uk/outofhouse2010
Thanks for your help…
I haven’t tested this but in the ul.MenuBarHorizontal ul style rule try setting the bottom property (under positioning) to equal the height of your menu “buttons”
The arrows for the drop down menus arent showing up on the spry menu bar. Can someone help me? please (I havent really worked with spry menus before)
It’s hard to answer without being able to view your page but there are a few possibiilties:
You didn’t upload the arrow graphics
You’ve changed the button background color and it now matches the arrow color
You deleted or created a conflicting style that overrides the style for links with submenus (or insterted a background image which is replacing the arrow image).
As I said, if you can post a link, I can probably answer this one pretty quickly for you.
Hello,
I would like to have the sub menu opening under the menu in vertical spry instead of the right side, how do I do that?
Thank you so much.
Doing that would open the submenus on top of the main menu items that appear below them which causes real problems for the user. If you mean an “accordion” type menu, you can’t do that with the spry menubars built-in into Dreamweaver. If you’re comfortable with a little coding, you might try searching for “accordion menu jquery”
I have a horizontal menu bar with drop down menus. In Firefox (and I am sure Safari) there is no problem with the drop down menus. The left alignment of the drop down is in line with the left alignment of the menu item above it on the menu bar. In IE7, the left alignment of the drop down is about the center of the menu item above it.
I have seen that there was a conflict in IE7 with Spry and div tags. I was able to remove some and that actually fixed my menu from “dropping up” but not the above problem. Any suggestions?
I don’t know of any conflict with IE7 and Spry. I’d need to see the page to offer suggestions.
Here is the website:
http://www.cbcnlr.org/testing/newdesign/index.html
Vertical menu works fine in FF, Opera, and IE8 but main menu disappears (part or all of it) in IE7 when hovering over it and after move out of hover it does not always reappear. Any ideas? I have reviewed the all classes in css that this references. link to test page: http://co.pennington.sd.us/emgmgmt/Copy%20of%20emergmgmt.html
I found a strange solution but it works. I switched to a horizontal menu and made adjustments in the CSS so it works as a vertical menu but without the problem that the horizontal menu has with IE7. Now, IE8 does not like it but at least I know how to take care of that issue. Add a meta tag below the head tag with the following between the brackets: meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
A lot of messing around but at least I can get it on our web.
First of all, thank you for all your help. This article achieved what five others couldn’t. It’s been bookmarked and passed on to others.
Now I’m wrestling with Internet Explorer. The custom skin looks great on Firefox and Safari, but falls apart like a stood-up prom date on IE7. I think I can actually see it sobbing.
The plan is to dink around with the CSS to see what exactly is causing it, but if you guys could take a look and maybe give me some pointers, that’d be awesome.
http://www.therightangle.us/mchhospital
Try setting the widths in these style rules to a pixel width rather than auto:
ul.MenuBarVertical ul
ul.MenuBarVertical ul li
Didn’t work. Hm.
You know, once I’ve got what the menu should look like and all the pieces, if I run into a problem it’s sometimes easier start over with the default style sheet and very systematically update the styles being careful not to mess with any of the display, position or float properties and making sure all the styling is done in the DESIGN INFORMATION section of the style sheet (basically all the various link-related tags).
How do I keep the background image set for the main menu from displaying in the submenus? It seems like both sets of buttons pull from the same class.
you need to add special style rules for the sub-menus after the regular rules. For instance:
ul.MenuBarVertical a
applies to all of the menu items. To overwrite it for submenus only you need to add this rule:
ul.MenuBarVertical ul a
The second “ul” forces it to apply only to submenus.
could you tell me, why when i change a style on my menu bar it changes in dreamweaver but when i save and preview in my safari it dousent show any changes? … but it does in my opera browser?
please help?
One guess is that you are viewing a cached version in Safari. Try refreshing the browser.
Hey guys Need a little help, I made my spry menu, everything works perfectly except the drop downs with many items in them, instead of scrolling they just fall off the page and you have to click down the side of the web page to see them all, is there a way to shorten the list and have them automatically scroll
They won’t scroll automatically. To shorten the list you could reduce the font size and padding in the submenus.
Hey there, just a question regarding horizontal spry menu bars.
I have 2 pages, I want a white menu bar on one page and a black menu bar on the other. when i set settings for the menu bar, it applies it to both pages in my site. How can i create a separate set of styles for a different menu bar?
Thanks!!
Assuming that both menus are the same and all you want to do is change the color, you can simply create style rules in one of the documents to overrule the background-color properties in the same styles in the external style sheet
Hi, I am working on my 2nd website and it’s my 1st time using Spry. I have 2 horizontal menu bars (one on top of the scree and one on bottom). I have 2 questions:
1) How can I get the submenus on the bottom menu to extend out the top of the menu instead of the bottom? I have read some advice on both this forum and others but can’t quite seem to get it.
2) Sometimes my submenus work and sometimes they don’t. I am trying to test some advice I’ve received for my 1st question but I can’t since they don’t seem to always pop up. They were working fine and I changed something else, not having to do w/ the menus at all, and when I previewed in my browser they suddenly didn’t work. When I load my code to the server, the submens are intermittent. I use Firefox and have not tested in any other browser yet since I can’t get it to work 100% in mine.
I can provide code if necessary. thanks!
If you can provide a link where I can view the page, I might be able to help.
Thank you very much for looking at this, here is a temporary URL
http://137.164.230.12.
Last Post:
Wade November 2, 2009 at 10:53 pm
Thank you in advance for considering to help. I added a Horizontal Spry menu in Dreamweaver but get a white box with false covering my submenues in IE. It works fine in FF.
Thank You Again
Reply
jcook November 3, 2009 at 7:08 am
I might be able to help if you can post a link to your site.
It might be because you have an empty class attribut in your submenus:
Try removing that and see if it helps.
Thank you for responding. Any chance of sharing what that code looks like (I am a rookie)?
Thanks
I don’t see it now so maybe I was looking at something else. I would have looked like:
or-
You might just need to try replacing the menubar .js and .css files (probably) in your Spry Assets folder and restyling the menu again. Make sure not to edit the .js file.
Thank you in advance for considering to help. I added a Horizontal Spry menu in Dreamweaver but get a white box with false covering my submenues in IE. It works fine in FF.
Thank You Again
I might be able to help if you can post a link to your site.
Thank you very much for looking at this, here is a temporary URL
http://137.164.230.12.
Hi,
I don’t know if I am doing this the right way, I am a newbie to designing with CSS so am trying to get my head around it as I go along.
I have a sprymenu as my main navbar on my site. It’s saved in a separate html file and then placed as a server side include on each of my shtml pages. The nav works fine so far. What I would like to do is have each page menu item change colour when you are on that page? I’ve worked out how give each menu item an id, and the body of each page an id, but how do I tell it to process this, and is this the best way to do this? Searching the web isn’t getting me far so am suspicious I may be doing this the wrong way.
Many thanks for any help
Say you have pages home.html, contact.html, etc. Give the body of you pages unique ids like “home”, “contact” etc.
You’ll also need to create a style for all your links something like this:
#home a.home, #contact a.contact {insert properties}
Then assign the style class .home to the home link in your menu. Apply the style class rule .contact to the contact link in your menu. Etc.
You may need to add additional info (the name of the menu etc.) to the actual style declaration and you may want to define a hove
Hey there,
How would you customize a Spry Menu Bar to show a picture as the rollover instead of the normal “plain boxed look”.
Can this even be done using a Spry Menu? Any help would be appreciated.
Thank you!
~ Leah
You’d need to insert the image as a background-image in the link-related style rules and the hover image as the background-image for the various hover states of the links.
Complete Nubie here and I’m sure with a dumb question but here goes:
1. How do you freeze the menu bar so that it always stays in the same position as you scroll up or down the page?
2. Why does my entire menu bar move to the left when it is moused over?
http://www.atrustgroup.com
Thanks in advance for your time…
Troy
1. To “freeze” the menu add position: fixed; to the ul.MenuBarVertical style rule. Depending upon your layout this might cause other issues.
2. You’ve changed the width in the ul.MenuBarVertical style rule from a fixed width in pixels to “auto.” That might be the issue.
your the man
Hi, I’m making an collapsible menu and have pretty much got what i want it to do, but in my browser (safari) it’s showing a blue outline round the title when selected. How do i take this off? Also, how do i make its default to be closed rather that expanded?
If you could help me out it’d be brilliant!
the url is http://www.silvertoothstudios.com/
cheers!
You’re using Spry collapsible panels for your menu. I’m afraid this article won’t be any help for that.
Hi,
Let’s say you are on the Contact Us page. Is there a way for the words “Contact Us” to appear in the Hover color while all the rest of the nav bar is in the Link state color? It is easy to do with the old rollover-image way of creating a nav bar (just substitute the over image on that page), but I can’t figure out how to make this occur with the Spry Menus. For small websites, I hate doing bread crumbs.
Thanks!
Susan
The simplest thing to do is to create a new style (say .currentPage) with the properties you want and then apply it to the appropriate menu item on a page by page basis.
Hi!
I’ve done a spry menu bar vertical, and I would like the fontsize to be smaller in the submenu than in the menu – how do I fix that?
In the style ul.MenuBarVertical ul set a font-size for your submenus
this article has been a HUGE help! I’m only stuck on two things now though (after wrestling with this for awhile)…
When I make this menu, I want the 4 different categories to be different colors. Thus, I’ve included a “span” inside the li and then another span inside the ul, which I know isn’t “proper” css. But I’m not sure how else to do it. Is there a correct way to do this?
-When in Internet Explorer (8, in this case), the photography mouse-over has weird borders and a scroll thingy on it. But none of the others do. The rest of the menu is correct except for that one. You can see what I mean here… (should look like – does look like in IE8)
Any insight? I’d be extremely grateful!! Thank you!
Brooke
you shouldn’ t need the spans. you could just make a custom style classes and apply it to the links themselves.
Also, it’s hard to know without seeing the code but it looks like you gave the main ul and set height and then exceeded that (probably with margin or padding) somewhere. Anyway I think it’s a height setting somewhere. You’re better off letting the height happen on it’s own as a result of font size and padding rather than trying to “force” it.
how do you creat a spry menu that is transparent without the “false” showing up!?
thanks!
What “false” are you talking about? If you remove the background property from all the style rules, the menu should be transparent.
Ok so i decided to start from scratch as i think i had modified that code from ages ago too much and its best that i start again.
what i have now is this
http://test.steveandshell.com/venue-details.html
now when in IE and want a transparent submenu i seem to get this problem. (white box that says false) this does happen in firefox.
do you have a solution for this.
my solution is to edit out this part of teh code in the js file.
{
/*
Comment: Commented out to remove the iFrame. It causes problems in IE. This function is not called in Firefox so just made them act the same.
var layer = document.createElement(‘iframe’);
layer.tabIndex = ‘-1′;
layer.src = ‘javascript:false;’;
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + ‘px’;
layer.style.top = menu.offsetTop + ‘px’;
layer.style.width = menu.offsetWidth + ‘px’;
layer.style.height = menu.offsetHeight + ‘px’;
*/
};
my next problem is setting the submenu width. if i use auto items align left to right instead of top to bottom. this happens in IE only. i have to use a fixed width for it to be top to bottom however i have my parents set to auto so would like teh submenus to take on the same size.
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100px;
position: absolute;
left: -1000em;
}
i have found that if i set the width of the following property to 100% it fixes this the submenus from aligning left to right to top to bottom in IE.
ul.MenuBarHorizontal ul li
{
float: none;
background-color: transparent;
width: 100%;
}
however in doing this each submenu item gets rather wide in IE only. it seems it is ignoring or wrongly interperating the 100% width in ul.MenuBarHorizontal ul. if i set a fixed width it is correct but i want it to be the same width as its parent (which vary)
any ideas?
latest progress is uploaded. im really stuck now on the above.
http://test.steveandshell.com/venue-details.html
Hi
i want to place a menu bar at the bottom of the page and have the submenus come out the top of the menu.
i have tried modifying the margin as you have suggested before but this orders the menu wrong and while it will place them above the menu it doesnt have subitem 1 at the bottom and say sub item 3 up the top. which means if not all menu has the same number of items the layout looks strange.
can you help if you understand what i mean. i want it to span out from teh bottom not just be place above.
Do you have a url where I can take a look?
yes.
http://test.steveandshell.com/venue-details.html
the venue details and accomodation menu. they only are on this page for testing
while your at it is there a way in wich i can have the width of submenus equal to the width of there parent? they behaive different at the moment in IE and Firefox for me. and currently cut off the right border in both.
also if i set this width to auto. teh submenus align horizontally instead of vertically.
ul.MenuBarHorizontal ul li
{
background-color: #484848;
overflow: hidden;
width: auto;
margin: 0px 0px 5px 0px;
padding: 0px 0px;
border: solid #CCCCCC 1px;
OK, that’s an interesting issue I need to look into further. I will say that the easiest solution for the submenu ordering is just to reorder them in the code rather than trying to force them to reorder.
Kind of swamped at the moment but I’ll let you know if I come up with a solution to the bigger issue of alignment.
The problem with re-aligning them in the code is that it doesnt work if i have 6 items in one submenu and only 2 in another as one menu will be very detached above the parent or the longe menu will overlap its parent.
Hi, I am editing a vertical menu bar but can’t seem to find the right way to make the main menu and sub menu appear without overlapping.
http://www.dianelladesign.com.au/Toolijooatest/index.html
Thanks for any suggestions!
AmandaT,
There other issues with your page that make it hard to sort out the menu problem. Most dramatically, you have four closing head tags and opening body tags. It appears some sections of your code have gotten duplicated somehow.
Hi JC,
I used CS4 to create a vertical menu and worked hours on the CSS to custumize it the way I wanted. It looks allright now in FF but it is’n showing in IE at all?
I ‘ve allready tried the suggestions you gave in other comments, but they won’t work. I am desperate.
Do you have any idea what it could be?
This is the test url: http://www.ad-arte.nl/php_test/
Thanks!
Tough to know for sure but I don’t think the issue isn’t your Spry Menu but more likely the page structure (either #nav or one of the divs that contains it).
It could be things are too wide for the #header and are being forced down the page where they aren’t visible because of the height limitation on #header. (Just a wild guess)
Hi JC,
Thanks for your help!
I tried putting the height on auto, but still nothing.
Now I changed the body bg to black (menu font is white) an removed the header and content images to see if the menu might be hidden behind one of them. Now it should be visible somewhere on the site.
But in IE the menu is stays invisible.
It’s really weird. The menu is clearly shown in the code.
Is there some code IE just don’t like? FF still shows everything..
Could you just take another peek, maybe you have any idea?
Thanks!
Hi JC,
I just made another test : http://www.ad-arte.nl/php_test/test_nav.php where I removed the line.
Now the menu is showing in IE, but obviously not working..
So I guess there’s an IE-conflict with something in the spry.js which FF doesn’t care about? Gosh, this gets just too complicated..
It finally works! Don’t ask me why.. I just built the whole menu again, step by step checking both browsers..
Thanks, Arte
I’m trying to set up a web page with two different vertical spry menus on it. I want one going down the left side of the screen and one going down the right and so that both sub menus open up towards the center of the screen. I was able to get the left side one set but when I inserted the one on the right it seems to be linked with the left so when I make adjustments the left side menu also changes. How do I apply two different vertical spry menus one the same page one on each side of the page with the sub menus open up in towards the middle of the page?
This might get you started http://forums.creativecow.net/thread/191/857168
Thank you for the great tutorial. I have created a vertical menu and have been having a heck of a time getting text to line up to the right of it. I have been playing around with CSS and finally got text to the right of the menu but it’s way far to the right. Any pointers in the right direction would be greatly appreciated.
What you want to do can be handled in the ul.MenuBarVertical a style. Add the property text-align: right; to the style to align the text to the right side of the menu.
Then adjust the right padding to move the text away from the border. By default (I believe) the padding setting for ul.MenuBarVertical a is padding: 0.5em 0.75em; (if only two values are given the first is for top and bottom padding, the second for right and left padding). Change it to something like this:
padding: 0.5em 0.75em 0.5em 0.75em;
Now, t four values represent (in order) top, right, bottom and left padding. So adjust the second value to adjust the space between your right aligned text and the right border of the menu.
Hi JC,
I would really appreciate some help, I’m doing a site for a friend, and for the first time used a vertical Spry Menu Bar. Everything looks great except in Firefox where the submenu’s stack on top of one another. Here is the site address, http://www.ajaychopra.com
Explorer reads the submenu’s just fine, but firefox will not, I’ve tried so many things to fix this. Any help will be very much appreciated!
You’ve added a positioned: fixed property to the ul.MenuBarVertical ul li style. Try removing it and see if that solves the problem.
It worked perfectly, I can’t believe the submenu is now working on explorer and firefox, thank you so much!!!
Hi, JC, do you know how to have different widthes of each tab on the top level menu bar instead of all share equal size?? Thanks again for the tip. Peace~
Hey JC, I am working on a web page which has a horizontal menu bar, I am using dreamweaver CS3 spry menu bar and I made some changes at the css file, but the result looks differently between firefox(3.0.11) and IE8, but they all not wrong, I just needs a simple two level navigation, could you help me? Here is the link for the page: http://casls.uoregon.edu/uoflagship/en/navigation1.php
please help me and I need to get this thing done asap, feel free to email me if you need anyother info, thanks again
The immediate problem I see is that you’ve changed the positioning in the ul.MenuBarHorizontal li style from relative to absolute. Change it back and see where that leaves you.
Thanks JC, that tip helps me to regain the function of drop down submenu instead of having everything up there, however on the version of firefox(3.0.11), they still overlap on one another, can I just send you my SpryMenuBarHorizontal.css file so you can help me directly because I believe that there are so many properties that I changed to cause such mess, you can gain the file from here: http://casls.uoregon.edu/uoflagship/en/SpryMenuBarHorizontal.css, and open it by DW CS3, and send the fixed file to my email at [email removed], thanks in advance.
Sorry Nan, I answer questions when I can but I don’t just fix people’s files and send them off (unless they pay my exorbitant hourly rate). It’s supposed to be a learning process for you.
Very good tutorial. Hope you can advise – How do I give a simple one column, multiple row vertical spry menu a top title box (not clickable) of different colour and bolder text to the menu choices beneath but same height and width?
Add your title at the top of the menu and delete the link but leave the text.
Next make a new style: ul.MenuBarVertical .title and, to start with, give it the same properties as the ul.MenuBarVertical a style (you won’t need the cursor and text-decoration styles)
Select ALL the text of your title and apply the ul.MenuBarVertical .title style to it.
Edit the ul.MenuBarVertical .title as needed.
Hi James, Thank you for the advice. That solved the problem of adding a title element to the vertical menu bar.
But two other problems have cropped up – I have 3 vertical menu bars (for different categories of links). Each menu is positioned below the one above. Problem 1: I want to leave a space between the different category menus, so I added CSS style “margin-bottom: 20px” on the main menu container “ul.MenuBarVertical”. This has desired effect in DW Design View, but no effect in LiveView. Problem 2: I added a border to the same container “border: solid #333 1px” which again looks fine in Design View, but stacks behind top menu in LiveView. Hope you can advise what am I doing wrong? Many thanks.
I’d have to see the actual page before I could make a guess on that one.
I would like to insert a vertical spry menu bar on the right side of my page, is there a way to make the sub menu’s go out to the left?
It’s relatively simple. In the ul.MenuBarVertical ul style set the left margin to -95% (or whatever you prefer):
margin: -5% 0 0 -95%;
Hi i want to place a menu bar at the bottom of the page and have the submenus come out the top of the menu.
i have tried modifying the margin as you have suggested before but this orders the menu wrong and while it will place them above the menu it doesnt have subitem 1 at the bottom and say sub item 3 up the top. which means if not all menu has the same number of items the layout looks strange.
can you help if you understand what i mean.
I have created a vertical spry menu in CS4. I am working with a template set up. When I preview in a web page the sub menus pop up behind an image I have, or behind the text if I remove the image. Thank you for any help.
Sounds like a CSS Z-index positioning isue, but I need a link to look at the page to be sure and to offer any suggestions.
I’m designing a very simple website. There are only 2 levels to my navigation. I want a horizontal navigation that only shows level 1; I also want the site map to display in the Sidebar, with an indication of not only what’s available, which pages have been opened. How do I do that?
If you want only one level of navigation, then don’t add any submenus when you build your menu. Although, to be honest, Spry Menus are a bit of overkill for accomplishing that (which is not to say I haven’t done it). You’ll also need to delete the content of the default submenus that Dreamweaver provides.
You can either build the site map by hand (an unordered list would work well) or search for a Dreamweaver Extension that will do it for you. When you create styles for your links, just be sure to include an a:visited style. That will determine the format of the visited links.
Just designing the site in DW CS4. The Spry Verticals work in IE, but in Safari & Firefox, when you put the pointer/cursor over the submenu, one of the submenu bars is up on the top test & is toggling very fast between that submenu title & the submenu title below it. Also, all the submenus are showing all the time to the right of the Main menu. Can you help me. I’m new but determined. Thanks so much for this fine tutorial. It is very usefull & well written for folks like me.
Is there somewhere where I can look at the page. If you post a URL I’ll see if I can help.
Still under construction. I have a test site up @ http://www.nysity.com/NYSITYTEST
I’m just loading all the new files right now. Should be done in 10 minutes. Thanks for the quick reply.
Let’s start with this. In the ul.MenuBarVertical ul (submenu) style you have changed the position property to “right.” That’s not a valid choice for the position property. You need to return it to its original setting:
position: absolute;
That’s used to set the submenus off the page until they are called by hovering over a main menu item.
There may be more problems but start there and we’ll see what happens.
JC (if I may), that worked wonders on the issues in IE. In both Safari & Firefox, I get the same strobe effect when the pointer over the various submenus names & the displacent of the first submenu name to the top. Lots of non-stop flickering in the boxes.
Next step is similar to the first. You added position properties to two other styles. You need to delete them. So:
In the ul.MenuBarVertical a style delete: position: relative;
In the ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus style delete position: fixed;
Lesson: With Spry Menus NEVER mess with the positioning.
Bonus Lesson: You don’t need to set every property for ever style. For instance since you set font-family: Verdana, Geneva, sans-serif; in the ul.MenuBarVertical style that will apply to everything in your menu (which is actually an unordered list or ul). So it’s redundant to use it again in the ul.MenuBarVertical li and other styles.
Did as told. still get the same problems with the fluttering submenus in Firefox & Safari. Any other thoughts? I did a test by using a fresh test template HTML, 3column, liquide & placed the defaul SPRY menus. They are giving me the same issue.
Ben, refresh your browser http://www.nysity.com/NYSITYTEST/ now works fine for me in all the browsers I tested.
JC, you are the best. I can’t say enough about the community of people like you that extend yourself to folks like me. Once again, thanks.
i need help customizing the spry menue bar on my schools web page and i have no idea how to do it.
That’s what this tutorial and http://dwcourse.com/dreamweaver/spry-menu-bars.php are all about. If, after reading the appropriate on, you have specific questions I can try to help.
If you just need to change or add links, select the entire menu (click on the blue box above the menu) and edit the links in the Properties Inspector.
I have designed this site and have a vertical dropdown menu that works fine in safari, firefox etc but doesn’t show up at all in IE… i’m not really good with code so i dont really wanna mess with it but i think that could be where the problem lies…i don’t want to upload the site until it is fully functioning in IE…any help asap would be much appreciated!
Is there somewhere where I can look at the site? Without seeing the html, css and jscript it’s hard to make a guess.
Can i send u the site via email? I have compressed the dreamweaver file so it shouldnt be too large…
Christine, I see a couple things that could help.
In the SpryMenuBarVerticall.css style sheet, rather than set the width of ul.MenuBarVertical to auto, set it to the width of your main menu images – width: 237px;
Also, add a style to remove the boders around your image links:
ul.MenuBarVertical a img
{
border: 0 none;
}
That seems to have done it! Thanks so much…I really appreciate your help!
When I preview my site in IE the following message pops up: “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options…” Unfortunately if the visitor doesn’t click on “allow blocked content” then they won’t see my vertical menu bar. Is there anyway to tweak the Spry Menu Bar Vertical so that visitors don’t have to click on the bar at the top of the screen stating they “allow blocked content?”
Sara,
That’s an Explorer “feature.” It won’t happen when viewing your site online only when previewing it from your local computer. You can get around it by inserting a “Mark of the Web” into your page (menu Commands>Insert Mark of the Web). If you’d like more information check out http://msdn.microsoft.com/en-us/library/ms537628.aspx
You should also take a look at your website http://www.xlhospice.com/ on a Mac. The vertical menu is off the top of the page. All I can see is the contact button.
Wow – thanks for the quick response! I’ll look into your suggestions. I’ve also realized the vertical spry menu bar doesn’t work in firefox. Got any ideas to fix that???
I’m so glad for your help!!
I’m familiar with the Spry menus from Dreamweaver CS3 & 4. This looks like an earlier version. I’ve seen it before and I wasn’t able to work out the problems.
This part does look a bit odd in your CSS for ul.MenuBarVertical:
padding-top: -.5; // it needs a unit (pixels, ems, etc.)
position: fixed; // not sure why this would be necessary
Don’t think either would cause the problem though.
Also, in IE your contact and last updated info are missing (or hidden by the menu?).
The version I used was CS4. Any ideas where else I could get some support?
OOPS! Sorry, you’re right. I misread the header info. I’ll take another look and you might consider posting at the DremweaverClub forum (http://www.dreamweaverclub.com/forum/).
You didn’t try deleting the position: fixed; in the ul.MenuBarVertical style. Now that I look again, that should do it. Also delete top: 0px;
And, again, this doesn’t make sense: padding-top: -.5; (It needs a unit of measure.
Finally, (still in the ul.MenuBarVertical style) height: 20px; is too small since it applies to the whole list. I’d just delete it as well.
THANK YOU for your help!
FYI: In addition to your changes I also found that it helped to delete the absolute position in the ul.MenuBarVertical li style.
However, now my submenus are static and won’t go away. What style would affect this?
Sarah, the absolute positioning is necessary in the ul.MenuBarVertical li style to initially position the submenus off the screen (effectively hiding them). So you’ll need to put it back in.
Ok. I changed the ul.MenuBarVertical li position back to absolute, but now it’s showing them all stacked on each other and the submenus are showing and stacked on themselves also. What next?
The page I’m looking at http://www.xlhospice.com/ doesn’t have the changes I suggested earlier.
You’re right, I haven’t put them online yet. I’ll have to do that tomorrow morning at the office. Tune in at that time! Unless you can tell me now which rule affects the submenus showing when you’re not hovering over them.
Okay, it’s up. I’ve got issues with the vertical menu in firefox and IE now.
Sarah, here’s one change you made that would break things:
in the ul.MenuBarHorizontal ul style you reset the margin to 0. It needs to be margin: -5% 0 0 95%; to initially place the menu off the page.
I’m afraid that’s all the time I can devote to this. You’ve got so many changes in the styles that I’d suggest deleting the menu, starting over and following this tutorial very carefully.
Good luck!
Hi,
Having problems with spry showing perfect in FF but not in IE7. Please help. Need this for my client ASAP. I used DW CS3.
website link: http://www.akbth.com
Thank you.
Peter,
try setting a width (auto, 100% or pixels) in the style for the links: ul.MenuBarVertical a
It worked. Thank you very much.
Hi, I posted a question earlier but it seem to have disappeared…
My question is , how do I get spry menubar to display properly on Firefox. The spry menubar I created seem to work fine on IE but when it comes to Firefox the last tab of the main menubar got squeezed out and thus not aligning as it should be – http://www.neptunesoftwareplc.com
Any suggestion on how to fix this?
Sorry, I was in the process of moving this post to my new (and more active) blog and yours got lost. I’ll take a look this afternoon (I’m headed out of the office).
Actually I do see something right away. You have a lot of extra junk in the code:
<div><a href=’#’ rel="nofollow"><b> About Us </b></a></div>
Take everything inside the div tags out but the link and text and try it again:
<div><a href=’#’ rel="nofollow">About Us</a></div>
Thanks for your time, you were right about the junk code, I am working on a clean new version:- http://www.neptunesoftwareplc.com/template4aaa.html
the same problem still persist…logically the same issue on this link is fixed, the other link would be too.
oh sorry I meant “…If the same issue on this link is fixed, the other link would be too.”
You defined the width of ul.MenuBarHorizontal li as 85,45 pixels. Try deleting that width and setting an overall width for your menu ul.MenuBarHorizontal in pixels or 100% rather than auto.
Just did what you suggested, now the menubar is inline but too short despite the width in ul.MenuBarHorizontal being 100% or 769px(the width for the table as well as the flash). This happens to IE as well as FF, as previously the problem occured only in FF before I made these changes…
Also, now that I deleted the width (85.45px) in ul.MenuHorizontal li, the width for each tab is now not uniform and I would like them to evenly spread out…
Best I can suggest is go back to giving ul.MenuBarHorizontal li a pixel width and reduce it a couple picels at a time until it works in firefox. You might also try giving them a width of 11% since there are 9 menu items. Sorry I can’t be more help.
Hi,
I have created a vertical spry menu using DreamWeaver. When I set background color for Vertical menu it worked fine……………..but when I set a background image only in the menus which doesn’t have submenu the change is reflacted.
Here is my CSS :
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
/*background-color: #FFEBBF;*/
background-image: url(../Image/bg1.gif);
background-repeat: no-repeat;
padding: 0.2em 0.75em;
color: #0099FF;
text-decoration: none;
}
What’s wrong in my case?
Menu items with submenus are controlled by the ul.MenuBarVertical a.MenuBarItemSubmenu style. You’ll probably want to make a special background for those items that includes an arrow.
Hi there, I’m trying to create a spry menu with a black background and when you mouse-over a menu item (turns orange) and the sub menu (turns grey) appear. I would like it to have a different color background on hover state for menu items which have got no dropodwns. Right now menu items which has got no sub menu is showing the same colour (grey) as the sub menu of menu items which have dropdowns. I cannot figure out a way to change the background colour (hover sate) of the menu and submenu independently. I stumbled into a suggestion that a new class can be added to the CSS:-
ul.MenuBarHorizontal ul.classnamehere {
background:
}
tried it but made no difference.
Any advice greatly appreciated. Thanks!
Without a link to the page, it’s hard to say what the problem might be but I’d I suggest a custom style that is applied directly to the link (or A) tags that you want to customize.
Hi studioJMC, this is the link
http://www.gohdesign.co.uk/menu_test.html
Thanks in advance for your help!
BELOW the style: ul.MenuBarHorizontal a try creating a new style that will apply only to links within submenus (notice the second ul tag that I’ve inserted)
ul.MenuBarHorizontal ul a
{
styleinfo
}
Let me know if that works.
Hi there, tried the new ul tag you suggested, it changed the colour for visible state just for the submenu bar instead of hover state. Then I tried
ul.MenuBarHorizontal a:hover
{
styleinfo
}
in the same insertion point but nothing happened.
This would change the hover state of the submenu links (have to remember that extra ul):
ul.MenuBarHorizontal ul a:hover
{
styleinfo
}
Hi studioJMC it works!!!
Thank you sooooooo much for your help!
This thing has been bugging me for the last 3 days!!!
Have a great weekend!
Well, i’ve created the drop down menu using the srpy collapsible panel. Now i have to click on the tab to see the drop down, what if i wanna change to mouseover instead? U know…when mouseover, the drop down appears, when mouse out the drop down closed.
Thx…
Hi guys. Nice informative article.. I thought I would post my problem, see if anybody could help.
When I click on insert spry menu bar, and then choose the vertical one, it only shows a single box, instead of the default 4. In the bar properties, it lists all 4, but I cannot see the others, or move them etc..
The vertical bar works as normal, just not the horizontal one. I tried on a new document aswell, and it keeps just showing one bar. Thanks.
How will I be able to fix vertical menu’s submenu’s height?
i’m still in the programming part, and i’m one of the least tehnological members of the species, but the problem i’m having is the site i’m making links to two other sites – i’m using a spry menu on all of them (and they’re all different menus) but for some reason, the spry menu on one of the websites just will not save the spry asset files to the right folder location, and gives me the customised version of the menu i made for one of the other sites? i really have no idea why it’s doing this – i even tried remaking the entire site (thankfully i’d only made the index page) but it still saves it to the wrong place. when i try copy and pasting the spry folder into the folder for that site, and altering it from there, it doesn’t make a bit of difference, and any alterations i make to the css code on it mucks up the menu on the other site too. I’m tearing my hair out over this because i can see no logical reason why it’d be doing this. any idea what i’m doing wrong? Thanks in advance for anny suggestions/solutions!
Thanks for that. I knew it wrapped in IE. but the link I posted was for where it was originally hosted but will shortly come down from there as it is just a temporary place to host.
Where it is hosted now is http://www.charlottebrewerconsulting.com and like you’ve said I’ve tried to move the Spry Assests folder around to various places but this doesn’t seem to work. The (~vbrewe01) folder was for the original site and I am uploading all the stuff from a different folder not associated with that one even though it came from their originally.
I don’t think their are any links left to that ~vbrewe01 directory, because the links all work it’s just the Spry menu itself not appearing. Nor the sub-menu when viewing on IE.
Again many thanks for helping!
@Vivalin the menu at the link you sent works (although it wraps to two lines in IE – usually the result of applying a width and a margin or border to the same object).
If the link you sent is your test site, I suspect the problem is that the test site is in a directory (~vbrewe01) on the test server and not on the final server. That might break the links. Also as you seem to be aware, uploading outside of DW requires that you place all the files in exactly the same place. I’d bet it’s one of those two things but can’t be sure without seeing the final site.
I’ve built this website and had it hosted on my uni server and everything worked fine – http://csusap.csu.edu.au/~vbrewe01/ . Now I’m trying to host it for good on a payed for server and using SmartFTP to put it onto the server. However I finally got the pages to load as well as the images and not to say error or forbidden but my Spry Menu Bar doesn’t want to work.
It sort of works in IE where it displays the menu (though not the sub menu) on all pages bar the index. and with Firefox and Safari I just get a list of the links that do work but are in a vertical list over my content rather than i nice horizontal bar above my content.
I’ve tried moving my Spry Assets folder into various places on the server to see if that alters it but that doesn’t seem to make a difference. Also when i open it in IE a error symbol appears at the bottom of each page and it all leads to the one line on each page which is: var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”SpryAssets/SpryMenuBarRightHover.gif”});
but I can’t see that there is anything wrong with this line as it worked previously when hosted on the other server.
please could someone help me urgently I don’t know what I’ve done wrong and I need this site to be working ASAP!
Thanks!
BTW, it would help us answer questions if you could include a url for a page that demonstrates the problem you are having.
@Diane, that’s usually a matter of the widths (including padding and margins) of all your divs not adding up. Try reducing the width of the div for the right side and see if it helps.
I am having an issue with a vertical spry menu on my website. I works great but my issue is that it moves down on the page when I add content to the right side of the page. The menu is on the left and the more I add to the right the further it moves down. I had tried everything I can think of…am I just missing something simple? I am using a template…I’ve tried to look at the code but I can’t see where the problem is.
I am having an issue with vertical spry menus. They show up fine except in Safari, the links work when you click on the space where the link should be – Thanks
Chris
I’m going nuts on this. Any help would be very appreciated. I’ve builkd out a site that’s good in every single browser EXCEPT IE on PC. Somehow, IE is adding a 3px border to about 1/3 of the submenu.
I’ve tried and failed numerous options and cannot find the troubelsome rule. Any thoughts?
@ SteveM
Dreamweaver isn’t set up for that but I would think you could hand code it simple by inserting an additional nested unordered list. Just make sure to duplicate the styles from other submenus.
@ stuck on frames
There are so many reasons to avoid frames. If your menu changes frequently you should consider moving it to an include file (http://www.boutell.com/newfaq/creating/include.html). That way you only have to update and upload one file when the menu changes.
A pages space is so limited, Is there anyway to put the vertical, or the horizontal menu, into a frame, and not use half the page to let it expand, or, is there a way to use one menu and not use frames. My menu changes almost dailey. hmmm would be great if layers could be html pages…
This is good for the standard user, I am however looking to add a 3rd level drop menu to the dropbar (such as you can get with the flyout menu) how can this be done and show normal?
@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
@jotto, make sure you’ve uploaded all the css and javascript files to your website.
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!
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?
@ É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.
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
Is there anybody who knows how to get a background image in every menu item?
Matthias
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
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?
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
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
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?
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.
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.
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.
thanks to Brenda and Rick
I have abandoned the frame idea and am moving on to css and templates.
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.
@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.
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
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
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?
Hey Kitzmimller, Did you ever find out how to change apply the current state to your spry menu? I tried using a class but I did not have any luck. Let me know please, I would really appreciate it.
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
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
@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.
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
@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.
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
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
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
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.
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.
you need to copy spryassets folder too on the server.
When you upload your page in Dreamweaver the files in the Spry Assets folder are considered “dependent files” and Dreamweaver will upload them if you click Yes at the prompt.
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
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.
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
@Vivian your links to the css and js files look like this: ../../My Documents/Uni/2008/MPI204/assignment 3/cbc/SpryAssets/SpryMenuBar.js (that’s linking to the files as they were on your computer.
I’m not sure how that happened but that’s the problem. Try making the links look like this: /SpryAssets/SpryMenuBar.js
I’m not sure of exactly what your issue is. But if I understand correctly, it might be that, as you move from working with one site to another, you haven’t selected the new site from the site menu in the sites window or by using the Manage sites… menu item.
@Ashish the height of the menus is based upon the text height and the padding around it. If that doesn’t help, be more specific and give us a link to a page with the problem.
I’m not exactly clear on your issue. Is the a url where I can look at the problem?
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.
{ 1 trackback }