Spry Menu Explained
Spry Menu Explained
A Creative COW Dreamweaver Tutorial


Richard Williams: Spry Menu Explained
Richard Williams
Richard Williams
Kent, United Kingdom

©2009 Richard Williams and CreativeCOW LLC. All rights reserved.

Article Focus:
In this tutorial, CreativeCOW leader Richard Williams explains the principles of the Spry Menu and answers the most commonly asked questions.

Introduction: Why is the spry menu so problematic
Inserting a Spry Horizontal Menu
Positioning your Spry Horizontal Menu Bar
Editing the look of your Spry Horizontal Menu
Setting the Height of the Spry Menu Bar
Changing the colour of your Spry Menu
Changing the colour of the Spry menu Hover/Rollover Rule
Making the Spry Menu Transparent: The problems in IE
Common Problems with the Spry Menu seen here on the forum
Width Setting of the Spry menu to suit the different title Lengths
Spry Sub Menu Not displaying in the correct position in IE
Can I have a different colour in my Spry Submenu
Multiple Issues with Spry Menu Bar
Resetting the Spry Menu CSS
Useful Tips

Introduction

Ok, it hasn't gone un-noticed that there are several posts in this site asking for help with spry menus. I have a few comments to start with before we get on with this tutorial.


  1. Many people are very opinionated over the spry menu, and its apparent problematic issues within Dreamweaver and or cross browser compatibility.
    I completely disagree with these statements, the spry menu is VERY stable in my opinion, it is only ever an issue when people alter things without really understanding what they are doing, and then not undoing the multiple changes they make.

  2. This is my First tutorial, so please bear with me on this, I apologise if I go off on tangents on some of the explanations, but they are points I feel are important to understand before delving into editing a spry menu. This whole tutorial is really ideally meant for reading throughout, so just take the 20mins or so it will take and please feedback how you found it.

I am going to explain some of the most common issues I see here in the forum, and the reasons behind them. Please take the time to read through this tutorial, it will help you to understand many different things, including a little bit of CSS Styling too which should help you out in your general designs too.

 

Inserting a Spry horizontal Menu

Here you are in Dreamweaver, you have downloaded and installed the spry add-ons, and now you want to use it.

You click on the Spry Tab, and select Menu, here im going to demonstrate the horizontal menu. So, for this example, I have inserted a spry menu into a container div to show you how the settings work, usually I would create a div and position it where I want the menu to appear but I will explain this more later

So you see now in the above image, that a spry horizontal menu has been inserted into the DIV as requested. Now there are two things of interest to note here... Look at the files tab on the right...

Once you have saved the file, Dreamweaver inserts a new folder called SpryAssets. Inside this folder are all the controlling JavaScript files and CSS style sheets that make the menu work

Also, notice the properties panel at the bottom of your page...

USE THIS! Its pretty self explanatory, but most people do not use this panel. This is the properties of the spry menu, notice that there is no option to change the text colour, font sizes, backgrounds etc... that's because you can't; or rather you shouldn't alter the spry menu in this way. The trouble a lot of people have is the change the spry appearance using the WhatYouSeeIsWhatYouGet functionality of Dreamweaver, but it goes totally against the idea of CSS. People complain that this doesn't make sense but then you alter the spry menu in the exact same way to alter everything else in CSS, so this is a duff argument...

Editing the Postion of the Spry Horizontal Menu

Ok, so lets open up the CSS window and select the SpryMenuBarHorizontal.css from the menu.

OK, we are going to go through some of the different settings... Highlight the first item in the CSS, which is ul.MenuBarHorizontal

So, the options in here are as shown above. Cursor type, Font Size etc...

The width is set to auto. This is the width of the main menu, and auto is a pretty good setting to have in here, so I would leave it as auto most of the time unless it is absolutely essential you want to specify the width. The main thing here to look at is the margins and paddings. It is important to understand what these settings mean.

In the CSS rules, you have Margin/Padding TOP, Margin/Padding RIGHT, Margin/Padding BOTTOM and Margin/Padding LEFT. You can of course, add these 4 different settings in yourself if you want to, if it makes things easier for you, but Margin or Padding written on its own, represents ALL FOUR settings.

What you also need to understand is that a setting of MARGIN 0 actually is exactly the same as writing Margin-top 0, margin-right 0, margin-bottom 0 and margin-left 0.

The whole reason for this to be added in this way is to make the CSS shorter, and thus loading time shorter. You must understand though that this 0 is repeated four times by the browser. So with a single 0, this represents 0 0 0 0. Its important to remember this in CSS... because lets say you wish to alter the top padding and the right padding... If you added margin 20px 50px, which seems to be correct for asking for 20px margin in the top of the menu, and a 50px margin on the right of the menu..., BUT... because you are missing the other two values, the CSS will repeat... so it's the same as writing 20px 50px 20px 50px.

If you wanted to add margins to top and right, you need to type it as 20px 50px 0 0

Ok, so, I personally would insert a spry menu into a DIV, or indeed a table cell, and alter this to position it, but it is possible to position the spry menu using these settings. So, I want to put the spry menu at the bottom of the orage boz, past the site title. Im going to do this by adding padding to the ul.MenuBarHorizontal Im going to add 170px to the top, and 450px to the left of the menu. If you roll your cursor over the padding settings, the words padding-top padding-right padding-bottom padding-left will appear to remind you of the order... So I type 170px 0 0 450px.

I commonly see that people have put numbers in here, but no reference to what the numbers are for... eg. 170 0 0 450. This is non-sense... You have to define that you are moving by px, if indeed that's what you are working with, so don't forget to include the px after a whole number.

I again have to mention CSS rules here. If you have added a width to the menu, remember that the total width of a DIV is equal to margin+padding+width.

So, if you have a padding of 450px to the left, and a width setting of 400px, the total width of your div = 850px.

This is a sticking point for people on numerous occasions. That's it!

 

Changing the Appearance of my Spry Horizontal Menu Bar

Now I'm going to skip straight down the ul.MenuBarHorizontal a rule to change the appearance.

Now to understand a little better what this rule is, and indeed what we are doing with CSS, look at the code.

Because your menu is automatically set up to link to other pages or other sites etc, it is linked... and to link, normal HTML adds <a>tags to an item. So, EVERY part of your menu is wrapped in an a tag <a>item</a>

So, if I want to change something that affects every item in the spry menu, I select the ul.MenuBarHorizontal a style. (simple when you understand isn't it...) So, lets say I want to make all the text centralise.... I add the rule, text-aligh center to the ul.MenuBarHorizontal a.

You see all text is now centred.

Setting the Height of the menu Bar

Now I draw your attention to the padding setting here in the ul.MenuBarHorizontal a.

You see that the padding is set to 0.5em 0.75em Remember what we discussed earlier, that css will repeat, so this is the eqivilant of writing 0.5em 0.75em 0.5em 0.75em, or padding-top 0.5em, padding-right 0.75em padding-bottom 0.5em padding-left 0.75em. This represents the padding around the text.

This is important to know, because some of you might be fitting your menu into a set height image on your design... this is where you control this. FOR EXAMPLE: Setting the height of the menu item

Lets say I want to ensure my menu fits into a background image or something that we know to be 30px in height.

The way we do this is... Set the px of the text we are using for the menu. Again we continue to do this inside the ul.MenuBarHorizontal a rule. So, lets use a font size of 12px. We will ADD the rule height=12px to match the font Now, alter the padding to make up the rest. 30-12 = 18. So we need a padding top and bottom to equal 18px. 18/2 = 9

So lets add 9px to the padding top and 9px to the padding bottom... or lets do it as it is set out already, and change the current 0.5em padding setting to 9px which will automatically repeat and add 9px to both the top and bottom of the menu items.

This is now 30px high.. although you may need to adjust the position again of the menu to ensure it is aligned correctly, by altering either your DIV or your ul MenuBarHorizontal padding's as we did in the beginning.

Changing the colours of my Menu

The ul MenuBarHorizontal a is also where we change the colour of the normal text, and the normal background colour of our Menu items (normal being in its normal state, not its hover/rollover state).

Making the Menu Bar Trasparent

Now, many people ask about making the menu colours transpatent. You can select this in the usually way using the colour swatch... Basically setting the background colour to nothing... and this works perfectly fine in firefox and safari browsers... but to get it to work in IE, you have to remember that there are a lot of IE hacks in the spry css, so we need to delete one of them...

Right at the bottom of the rules, you will find ul.MenuBarHorizontal li.MenuBarItemIE There is a background setting here... set to white (#FFF).

Delete the whole background rule by highlighting it and clicking on the dustbin at the bottom

 

Changing the hover/rollover looks

Now... the only other rule that you need to know is ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

In here are the settings for the background and text colour of the hover function.

That's it. There are not many other option you need to worry about. If you stick to these rules, then you will achieve total browser compatibility with no problem.

 

Now I am going to go into some of the other common questions that come up on this site regarding menu bars.

Changing the width of my menu items to suit the text.

At the moment you have the settings of the width of each item in the main menu set in the ul.MenuBarHorizontal li rule. Its common that people adjust this width to suit the longest item title, increasing the pixle width of the rule... but the problem with this is that all the other menu items increase in width with it...

Set this setting to auto will make bring the menu item widths different sizes depending on the length of text. This will give you this...

To space them out a little better, alter the left and right padding settings in the ul.MenuBarHorizontal a style, NOT in the ul.MenuBarHorizontal li rule.

Sub Menus not displaying correctly

The submenu setting width is set in the ul.MenuBarHorizontal ul

By setting this to auto you can match the effect you just made on the main menu items. The trouble is though, this then causes an issue with the look of the submenus in IE...

You see now, the submenu doesn't drop vertically, it shows up horizontally. To rectify this, add the following code into the SpryMenuBarHorizontal.css...

ul.MenuBarHorizontal li ul li{ 
    clear: left; 
}

If you are going to make the ul.MenuBarHorizontal ul width auto, then the ul.MenuBarHorizontal ul li should also be set to the same setting. (these two should always be the same width settings).

Spry submenu does not drop down from the correct position in IE

There are two reason I see for this on here.

 

1. Using the WYSIWYG functionality to alter the look of the spry.

Look at the code highlighted above.

<li><a href="#">Item 2 is much longer in text</a></li>

Ok... now look what happens to that code when I press text align center...

The code changes from:

<li><a href="#">Item 2 is much longer in text</a></li>

To

 

<li>

<div align="center"><a href="#">Item 2 is much longer in text</a></div>

</li>

 

You have created a div around the <a> tag, inside the <li> tags. This then causes the CSS to get confused now in IE, and the submenu drop downs start to drop from the top left hand corner of the browser. The only way to rectify this is to go through the code and delete out all the DIVs that have been inserted manually... or delete the menu then insert a new one.

 

2. The other reason I see, is putting numbers into the ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible top or left settings.

These settings should STAY as top 0, and left auto.

 

Can I make my Spry Submenus a different colour.

Of course, now hopefully you understand a little more about CSS, let me show you how to use dreamweaver to help you add your own things to the menu. Lets say we want to have the main menu text white, but we want the submenu text RED...

Click on the spry menu and select a submenu item (notice please that I did not highlight the 1st item (1.1) because this is a submenu with another submenu)

Now look at the code at the bottom of the window. <ul.MenuBarHorizontal #MenuBar 1><li><ul><li><a>

Ok, so we know the spry has rules such as ul.MenuBarHorizontal li and ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li etc, so if we add our own rule ul.MenuBarHorizontal li ul li a then we can control our submenu separately from the other menu items.

Add this rule to your SpryMenuBarHorizontal.css and add colour #FF0000 and all the menu sub items will now turn red.

 

Can you now change the sub-sub menu...? See the picture below and give it a go yourself.

Multiple issues with my Spry menu

OK, so your spry menu has well and truly lost its way.. what can you do...?

Listen, let me give you some history of myself and Spry Menus. I am not a website, nor am i a spry or dreamweaver expert. Far from it. I am a guy, who likes to know how to do things, isnt affraid to experiment, and loves to challenge himself. I started out like many of you, visiting this forum looking for answers, but i believe it is right to come and use these forums, but also to feed something back into them. So, becuase i had so many questions, i made a point of coming back to the Dreamweaver forum every day, seeing if there was any new posts, and trying to help solve tose issues, but trial and error. It just so happens that nearly all problems at the time were about spry menus. And you wanna know how i worked it out.. i used to open the pure SpryMenuBar css, open it along side posted css' that had been fiddled with and altered, and compare the two side by side. everytime i saw a different value in the posted css to the pure one, i would change it, test it, and see if it solved the problem. It used to take me AGES to do this, but this is what i did. Ok, so admittedly, now, i pretty much look at the code and can spot the problem, but only because i have seen about a million over the past year and a half. One day, the penny just dropped for me, and with the help of others, such as Abraham and Fernando here on the Dreamweaver forum, i have learnt massive amounts...

My adivice if you have totally lost your way and found yourself here, is to reset the spry CSS files, and start again, this time, hopefully understanding a little bit more about what you are doing.

The way to do this is in the site menu, select Spry updater

Tick the menu Bar box and press update...

if you still have your files open, The following message will come up

Click yes. This message will only come up if you have been working on the CSS and it is still currently open.. but eitherway, after you have done this, close all your files down and then re-open them.

The spry menu should now be back to its original state, but your old files will now have been restored into new folder called spryassets_backup, incase you want to refer back to them at some point.

 

Some Useful Tips:

If you're like me, you are used to making changes to your site, and changing your mind over the change, and hitting ctrl Z or the equivalent, to undo your last change. BEWARE!!!! This is no good when you are altering css from your HTML. You see what alot of people fail to notice, is once you start to alter an external style sheet from within an HTML document, what dreamweaveer actually does is opens up that external css in the background, and makes the changes. While you are merrily altering the CSS within the HTML document, you are clocking up changes in another folder. So, you decide youve lost your way and you hit undo 300 times from within your HTML... expecting all the recent changes to revert back to the beginning... but they DONT! you need to click on the css files tab at the top of the screen, THEN hit undo to roll everything back! DONT FORGET THIS!!!!

 

Open up and READ the SpryMenuBarHorizontal.css
There are uselful hints against each rule, explaining what each important rule does and why certain settings are set in the way they are.