Sad Code Monkey

When using Dreamweaver, it seems easy to create a Spry Menu navigation bar for your website. All you have to do is go into the CSS and change the colors, etc to match your design and you’re set… right? Well, depending on how much you have changed, the answer could be no. And sometimes your pretty Spry Menu will break in IE6 or IE7 for seemingly no apparent reason. This leads to many headaches and hours of trial and error to see where the problem is…

Then I found this website:

The Ten Commandments for Editing Dreamweaver’s Spry Menubars

It was like an awakening… you mean Spry Menus actually DO work on ALL browsers?

The biggest error of most users (at least in my experience) is Commandment II: Thou shalt not edit the styles haphazardly.

Everyone I know seems to make edits to the CSS numerous times without thinking about what the outcome will be, just changing this here and that there, and basically going through a trial and error process until it shows up correctly. This is a very bad idea to do with Spry Menus. They are finicky and don’t like being told to do things they don’t like. They also don’t play well with serious customizations.

If you are going to use Spry Menus, the best bet is to keep it simple. Keep the files the way Dreamweaver set it up for you. Make sure you load all of the javascript files into the right folders on your server and that those relative paths are to the correct folders. Keep the stylesheet for the Spry Menus separate from your main style.css file. Don’t paste the Spry CSS into your style.css file thinking it will work fine… chances are it will not. (I speak from experience here…)

Also when customizing, keep it simple. Edit a color. Test it out. Edit a text style. Test it out. Edit a font. Keep doing small things and testing. Don’t work in the CSS file for 3 hours programming what you think will style the whole nav bar and then test it. Its best to keep building little pieces at a time, so if something breaks it’s easier to find what caused the problem, and it will save you a lot of headaches.

If you keep these things in mind, you will be able to use Spry Menus as a drop down menu system that works across all browsers, even IE. *gasp*

One problem I did encounter is that the code provided by Dreamweaver assumes that you want to style the navigation bar and the dropdown menus the same. For the projects I have worked on, this is not the case, and it took some finagling to get it to work by adding my own code. Here is a code snippet for child menus that are a different style than the parent navigation bar:

ul.MenuBarHorizontal ul li
{
/* this style applies to the li element of child menus. stick to simple block element things and don’t apply your text styles here */
}

ul.MenuBarHorizontal ul a
{
/* this style applies to the links in your child menu. use it for styling the background color, padding, text properties, text decoration, etc. */
}

ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus
{
/*this style applies to hover/focus states of the links in your child menus. apply different colors/styles for those states here.*/
}

I placed this code at the bottom of the “DESIGN INFORMATION” section of SpryMenuBarHorizontal.css which should be found in your sites SpryAssets folder.

A few other things to remember:

• Don’t spec height in your CSS file. Get the desired effect you want by applying padding to your menu link <a> styles.
• Don’t apply padding/margin to the list items, or the <li> items in your CSS.
• Don’t apply width to your links. Width is applied to the parent list item <li> styles. Use display: block; in the <a> styles and that will guarantee that it will fill its parent list item.

These of course are covered in more depth in the The Ten Commandments for Editing Dreamweaver’s Spry Menubars.

Good Luck with your Spry Menus.

Tags: css, Dreamweaver, navigation bar styles, Spry Menus

This entry was posted on July 28th, 2010 at 8:34 am and is filed under HTML, Javascript, Spry Menus.