About a year ago, Adobe asked me if I would become a moderator for Dreamweaver Community Help. The idea was to encourage people to use the Dreamweaver online Help files more frequently on the assumption that people would be more willing to do so if power users answered their questions promptly. It’s certainly worked. The problem is that some Help pages have become overwhelmed with questions. One of them is Customizing a Spry Menu Bar Widget.
It’s obvious that people love the ability to create a menu bar in seconds, but they hate banging their head on their keyboard trying to figure out how to edit the CSS. In response, I’ve created a couple of tutorials that are now live on my site. The first one goes into considerable detail, explaining the basics of customizing the CSS of a Spry Menu Bar, with instructions for both horizontal and vertical menu bars. The other, shorter tutorial shows how to centre a horizontal menu bar. I hope you find them useful.
Please don’t kill me, Dave, but I’m having a problem with font-size on Spry Menu. I’ve changed the ul.MenuBarHorizontal li font-size to 11px and left the rest as is. It looks fine locally, but when I send the files to the server and look at the page online, the text remains the same size. No matter what I enter (anywhere) the text size never changes. See http://www.nealsyarddairy.co.uk/shops_test_new.html and http://www.nealsyarddairy.co.uk/SpryAssets/SpryMenuBarHorizontal.css Any suggestions? I’d be very grateful Thank you,
Marcelo
Marcelo, I don’t think I have ever seen so many tables nested inside each other! Anyway, after some analysis, the font-size in the menu is being overridden by the second rule in nydstyle.css, which sets the size of links to 12px. To counteract this, you would need to add font-size to the
ul.MenuBarHorizontal astyle rule.Genius, Dave, you’re a genius! I knew you’d hate my coding – I started to add various things to it, and it kept “evolving”. I promise to sort it all out into a more neat code. Thank you so much for sorting this out for me. What a guy!
Dave,
I have read your info on making and customizing a spry menu Bar. I found it great. Very easy to follow for a rookie like me. I have one problem. I have created a horizontal spry menu bar with 6 pulldowns. When I preview it in safari it only shows the main menu bar but has no functionality . When I preview in Opera it displays and functions fine. Or if I copy my whole web file to a windows computer it works fine in IE . What am i doing wrong?
I dont want to upload to the web servwer til I get it right.
Please help
Hi David,
Thank you so much for your tutorial about the Spry Menu Bar. I could not get it to work. Your tutorial made it so easy. Hooray. Now I can continue with the web site after 3 days of frustration.
Love your work.
Hi – loved the book & found it very detailed and thorough. I don’t know html and so using DW CS4 was my only hope. I had progressed to some half decent looking pages that utilized spry tabs and your solution to passing info thru a URL so I could return back to the correct tab after having gone to a detail page, etc. However, on closer review by a person more familiar with code, it was determined that my work wasn’t ‘clean’ and the site was rebuilt with more ‘web friendly’ code. We retained the spry tabs and overall the site looks as we would like it. My concern is it is very slow to load in some areas and I don’t think we can continue to use it for the ecommerce we have planned as the next step with these speeds. All pics are 72 dpi, either 192×168 or 450×300 ppi and the home page’s pic has been sliced. Is it possible that our decision to use the spry tabs has a hand in the slow loading? My old site (which is a code disaster I gather) at http://www.corporategiftconcepts.com loads way faster than the new one! Any suggestions you have would be greatly appreciated.
Dawn.
@Dawn, I presume you’re referring to the Spry Tabbed Panels at http://www.canadiancalibre.com/FoodServices.html. The page loaded quite quickly for me on broadband in the UK. However, I checked the page with Firebug’s diagnostic tools. The images on that page weigh in at 1.3MB! The important thing to remember is that Spry Tabbed Panels only hide the content. Even if a visitor looks at only the first tab, all 58 images on that page need to be loaded. Putting such a large amount of content into one page is what’s slowing things down.
I recall reading that bit about tabs only hiding content and you’re right, I hadn’t remembered to take it into consideration when choosing the tabbed format. Would it help if I made these multiple photos into a single composite that could be sliced for each tab? If not, then the only other solution I can think of (& trust me, I’m a newbie) is to let go of the Spry tabs in favour of a secondary row of links that would have individual pages open, each with it’s thumbnails. Does this make sense? I pretty much figured we were in for a re-write in the new year when I saw how slow it was running. Having read your book I can pretty much figure out that we should be setting this up as a dynamic site based on the volume, but I’m not sure I have the skills and having it done for us appears to be very costly. I appreciate your feedback very much!
Dawn.
Dawn, What matters in the end is the size of the file(s) that need to be downloaded. If the composite is still big, it won’t make any difference. The individual pages might be the better solution.
Hi Dave, Using the horizontal menu bar, when I open a page in IE 7 the sub menu appears horizontally below (parallel to) the main menu. It only happens in IE 7&8, it works as it should in firefox and safari. Please help me resolve this issue.
thank in advance for your help.
below are my spray code:
@charset “UTF-8″;
/* SpryMenuBarHorizontal.css – Revision: Spry Preview Release 1.4 */
[Styles deleted]
I don’t know whether it’s the cause of your problems, but you’re using an outdated version of Spry. Get the Spry updater from http://labs.adobe.com. If that doesn’t fix it, please post a question in the Dreamweaver forum. Post a URL to the problem page, rather than pasting your entire style sheet. It’s only by seeing everything in context that anyone can help troubleshoot layout problems.
Thanks David – you’re probably correct in that the composite will also be quite large, not to mention time consumming whenever I need to update it. So I’ll persue the pages with a sub menu under the main. It may well turn out as an easier solution in the long run for updates, etc.
Again, appreciate your help & quick advice!
Take care!
Dawn
how can i use xml to load data into a spry menu bar, if I need three levels of nesting? I can’t seem to be able to set this up right. I can get one level working ok, but after that it is all noodles and oodles.
For detailed help with Spry, post questions in the Spry forum.
i used the instructions that you have posted on help.adobe.com and i made a menu bar using an image as a background for the menubar spray, but when i set the back ground for the menu the sub-menu’s background changed too, how do i keep the simple(color only) background for the sub-menu?
The simple way to add a background image only to the top-level links in a Spry menu is to change the definition of the
ul.MenuBarHorizontal a.MenuBarItemSubmenustyle rule to display the background image you want. In the default style sheet, it displays the little down arrow that indicates the presence of a submenu. Incorporate the down arrow into your background image, and setbackground-positiontotop left.If you have top-level items that don’t have submenus, add a class to the opening
<a>tag of such links, and create a new style rule to add the background image:ul.MenuBarHorizontal a.withImage {background-image:url(../images/Sprybg.jpg);
background-position:top left;
background-repeat:no-repeat;
}
Thank you for the excellent tutorials on SPRY menus. they are the best I have seen. I am using a linked stylesheet for the horizontal menu and it works great to update the stype and design of the menu on all pages by only changing the external stylesheet.
However, now I need to know how to also be able to add/delete/change menu options in the Spry menu from a single external file for the menu. Any help would be most appreciated.
Thank you
Turn the menu into a server-side include. There are instructions for how to do that in the tutorials sections of my site.
Hi Dave
I’m working on a revamp of my aging site. I found your spry vertical menu bar tutorial to be excellent for my neophyte stage of programming. Very good in fact. I do have a issue however. After all the work was completed the template that I modified from a Dreamweaver model is all over the map. I had set the main container to 1000 px but now it seems to be liquid. The problem is that when I try to get to the code it is now all commented (grey)and unaccessible. Any suggestions?
thanks for the good work
Michael
The only way anyone can provide advice on an individual site is by looking at the code. The best place to get help with this sort of problem is in the Dreamweaver forum. Include the URL of the problem page in your request for assistance.
Thank you for your excellent tutorials!! I am trying to figure out if I can create a text hyperlink from within the content of a page and when selected have it linked to the content accessed from within another tab panel area. BTW, I am trying to use horizontal tab panels for the larger content areas of the site and then use vertical panels for the individual sections of a specific content area.
I am not a programmer, have tried search the adobe forums and can’t quite seem to find an answer to this. Perhaps I need to rethink my “design”…
http://www.fairwindschance.com/SSHtest/index.htm
There is one link on this page view and I’d like it to link to the tab Seneca Sport Horses under the Clinics content area.
BTW, I also am unable to open the download zip file for the Spry menu tutorial on this site — Vista says it’s invalid…
Hello Dave!
I have a few quick questions about appear/fade effects within my spry tabbed panel. I have applied this effect so that when I click on one of my tabs, its corresponding content fades into view. However, the fade is choppy because sometimes the content flashes quickly into view at 100% before beginning its 0-100% fade. Is there a way to fix this? So that when I click a tab the content is always invisible initially before gradually fading into view? Maybe something with visibility: hidden until activated. Also, is there a way that when you click a tab, the previously opened tab’s content fades out prior to the newly clicked tab’s content fading in? Here’s the link I’ve been working on:
http://www.pod-design.com/phylum/spry-test05.php
thanks for the help!
eric
For general help with Spry, the Spry forum‘s the best place for answers.
The spy menu bars are a very nice touch to any website. Thanks for all the great resource links you have provided in your post, hope to find some more great stuff like this in your blog soon.
Is there an option or way to add a separate image to each menu tab, or do I have to use another method for that?
I have downloaded source code. After unziped it, it came out a file without the ext, so can not be open it. David can you tell me how to use it. thank you.
Sounds like you have a corrupted download. Try downloading again, maybe with a different browser.
Dave,
I’ve set up a spry tabbed panel. The tabbed panel is in a “mainContent” div. The only thing within the tabbed panel content is a liquid picture. I need the parent div to expand to the tabbed content panel so that the footer will remain at the bottom of the page. Please help me out with this. Thanks.
Basically, you need to apply a style rule to the parent div that sets its height or min-height to the same as the image in the tabbed panel. For detailed help with a design problem like this, post a question in the Dreamweaver forum, and provide a URL to the problem page.
Thanks for the great info on dropdowns! This was very helpful.
-K
I’m creating new pages on Dreamweaver CS5 and I did not change sprymenubar.js. I’m getting an error as follows:
“While executing on Focus in Sprymenubar.htm, the following, JavaScript error(s) occured: At line 280 of file “Macintosh HD; Applications: Adobe Dreamweaver CS5: Configuration: Inspector: sprymenubar.js” dom has no properties”
This is what is on line 273 to 281:
273 Spry.Widget.MenuBar.prototype.clearMenus = function(root)
274 {
275 var menus = root.getElementsByTagName(‘ul’);
276 for(var i=0; i<menus.length; i++)
277 this.hideSubmenu(menus[i]);
278
279 this.removeClassName(this.element, this.activeClass);
280 };
281
Getting a JavaScript error message in Dreamweaver almost certainly means you have a corrupt cache file. Check out Deleting a corrupt cache file in the Dreamweaver FAQ.
Thanks for your reply. I went to Dreamweaver FAQ. I did a search on “deleting a corrupt cache file”. I couldn’t find anything. I sent them a question and it wouldn’t accept my question. Thank you.
can you help me how to fix the error in spry.widget.menubar plsss
Have you tried posting a question in the Dreamweaver forum?
hey this rohit
see i have putted sypmenu (vertical) but when i updated it to my site the options are not appearing
i am having dreamweaver cs3 and also when i try to put horizontal it simply shows me this
Item 1 Item 1.1
Item 1.2
Item 1.3
Item 2
Item 3 Item 3.1 Item 3.1.1
Item 3.1.2
Item 3.2
Item 3.3
Item 4
It’s impossible to troubleshoot a problem with a web page without actually seeing the page. I suggest that you post a request for help in the Dreamweaver forum and include the URL of the page so that someone can have a look at it.