PDA

View Full Version : spry menu problems


stlcards1
12-08-2009, 10:55 PM
Hi all.
I have been converting my website over to css and I can't get the spry navigation bar to work correctly. You can view it at http://www.auburnillinois.us/testsite
Here are my issues.
1. The menu bar is (and was at one point) supposed to be lower. It should be in about the middle of the image in the div containing the menu bar.

2. When a submenu drops down there is a gap between the menu bar and the submenu. I would like it to be directly below. I have adjusted the top value but it did not work.

3. When a submenu has a child menu the child menu drops over the top of the submenu. I would like it to be to the right

4. The submenus are not wide enough and the menu choices wrap. I would like to make them a standard width so the entire choice is one one line.

I have adjusted everything I know how to and nothing seems to work. Could it be something with the div containing the menu bar? I have deleted the menu bar and inserted a new one with default values and it does the same thing.
Thanks in advance
Chris

DWcourse
12-09-2009, 03:41 AM
not sure, but one issue might be your #nav div and the related styles. the only thing in that div is the menubar list and it has its own style sheet.

stlcards1
12-10-2009, 12:02 AM
Are you able to see the code for the spry nav bar? I can't tell if anything is obviously wrong in the code for the spr nav bar.

Thanks Chris

DWcourse
12-10-2009, 12:44 AM
As I implied, I'd start by getting rid of the #nav div. Some related styles (#nav ul for instance) may conflict with your Spry menubar styles.

In your CSS the only odd thing I see immediately is this style rule:

ul.MenuBarHorizontal ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
top: 1;
width: 8.2em;
position: absolute;
left: -1000em;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
}

I'd try replacing it with:

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}

which is the default when you insert a horizontal menubar.

stlcards1
12-11-2009, 02:28 AM
I have been making progress. I deleted the spry navigation bar and the corresponding css and started over. I did remove the #nav div as you suggested and created one to hold the navigation bar.

The main issue I have is I have a background image in the div containing the nav bar. I would like to make the menu bar transparent so that the background image shows through...this way the only thing that changes on hover is the letters. Is there a way to do this?
Thanks
Chris

DWcourse
12-11-2009, 04:17 AM
Remove the background color property from the ul.MenuBarHorizontal a style rule (you'll need to add a ul.MenuBarHorizontal ul a with a background color for the submenus). You'll also need to adjust the hover style rules.

stlcards1
12-11-2009, 03:39 PM
Thanks for the help. I have got all colors adjusted except for when a submenu has no child submenu. If I change the hover background color for these it also changes the background on the main menu bar...which I don't want.

Which style can I change to accomplish this.
Thanks
Chris

DWcourse
12-11-2009, 04:12 PM
Anything you put in a style:

ul.MenuBarHorizontal ul a or ul.MenuBarHorizontal ul a:hover, etc. should only affect submenus, you just need to have that second ul in there so it only applies to lists within the main list (which is what submenus are).

Does that help?

BTW, the style rules that contain MenuBarItemSubmenu only apply to menu items with submenus.

DWcourse
12-11-2009, 04:16 PM
BTW, I'm about 70 miles south of Auburn in Collinsville.

Go Cards! (I hope they can sign Holliday but I wouldn't bet on it).

stlcards1
12-11-2009, 07:16 PM
I go through Collinsville quite a bit. I went to the Rams game a few weeks ago....what a sad team.

Anyway...I must be stupid. I have adjusted submenu style with no luck (I can get it to work on the submenus but the main nav changes color on hover also). Do I need to actually add a style to the sprymenubarhorizontal.css for these to work or am I just not understanding? The last spry menu bar I did for another site I used images on the main menu bar so things were less complicated.

Under my test site if you hover over each item under the government tab and you will see my issue.
Thanks
Chris

DWcourse
12-11-2009, 07:46 PM
What Browser?

stlcards1
12-11-2009, 08:11 PM
IE8 and FF 3.0.15

DWcourse
12-11-2009, 09:12 PM
Try adding the two style rules shown in code below at the location indicated:

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

ul.MenuBarHorizontal ul a
{
background-color: #5A7EB4;
color: #C1D0E1;
}

ul.MenuBarHorizontal ul a:hover
{
background-color: #E3E9F1;
color: #333;
}

stlcards1
12-11-2009, 09:37 PM
:mrgreen: Holy cow you fixed it. Thank you. I haven't tried in other browsers beside IE or FF but not to worried about that

I don't know enough about spry or css to be able to figure it out.
Thanks again and go CARDS!
Chris

DWcourse
12-11-2009, 10:00 PM
Also works in Safari and Chrome (at least on a Mac)

The trick is in the selectors used for the two style rules:

ul.MenuBarHorizontal ul a
ul.MenuBarHorizontal ul a:hover

By adding the extra ul before the link (a) tag we insure that it only applies to the links in sub or sub-sub menus. DW provided rules for the submenu items with their own submenus (the SubMenuItem rules) but the regular links without submenus were just picking up their styling from the main menu. Our two styles overwrite that.