Accessible CSS menus - Images Off/CSS On

[Jeep Stone]

In the past I've done my image replacement menus using text-indent to move the text off the page, but this doesn't work in the Images Off/CSS on situation. If my menu is

Code:

<ul>
<li><a><span>Menu Name</span></a></li>
</ul>

What's the best way to keep the text on the page? I'm guessing I need to hide the <span>  under the <a>?

[Mr Anderson]

There's so many different methods, all with their own caveats under different circumstances, but I find this method useful:

Code:

<li><a href="/"><span></span>Home</a></li>

Code:

li { width: 200px; height: 20px; position: relative; float: left; overflow: hidden; list-style: none; }
li a { display: block; cursor: pointer; }
li a span { position: absolute; top: 0; left: 0; background: url(home.gif) no-repeat 0 0; height: 100%; width: 100%; }

[Jeep Stone]

hmm. OK. If I can't put in the empty span, will that still work?

[Mr Anderson]

hmm. OK. If I can't put in the empty span, will that still work?

No, that method requires the empty span. If you can't use the empty span there are other methods available, such as the one you currently use, but they aren't as robust.

[Jeep Stone]

OK. It's a Joomla template so I'm fairly sure I can override the menu structure in a custom class. Thanks

[Jeep Stone]

When using this method for a vertical menu, when I click to expand my items they appear beneath the top level menu items ie. the toplevel items don't expand to show the subnav. Any ideas why that might be?

[Mr Anderson]

You'd need to show me an example so that I can see what's conflicting and where.

[Jeep Stone]

Thought so.

I'll give you a shout when I drop it up for testing.

[Mr Anderson]

Okey dokes

[Jeep Stone]

Here you go:

-Link removed-

Menu items on the left show the sub items underneath.

[Mr Anderson]

 

Okay, they appear underneath the top level for me at all times. So I don't know what mechanism you're using to hide/display them from view. But that aside - they haven't been positioned to go anywhere other than underneath the top level as far as I can see. left: 140px; on #productmenu li ul would move them away from their current position - but I'd imagine you'd rather have that happen following an event of some sort, such as on hover?

[Jeep Stone]

If you navigate around the left menu, you only get the sub menu sections that you're interested in. It renders the nav for each page request, no events for any sort of javascript. I just want to show the subnav underneath the top level item.

[Mr Anderson]

If you navigate around the left menu,

Navigate how? As I said, they are underneath at all times for me, so without any intervention from me and nothing I do changes that state. So I guess something is broken?

[Jeep Stone]

OK. When you first visit the shop you get:
Kitchen
Bathroom
Bedroom
etc

When you click on Kitchen, I want:

Kitchen
-Adult Aprons
-Aga Covers etc
Bathroom
Bedrooms
etc

The HTML look correct, but the sub level items have stopped appearing and pushing the menu down since I made the change.

[Mr Anderson]

And if you just remove the image replacement CSS that bit works again?

(Clicking on kitchens just takes me to another page, there doesn't appear to be any mechanism for expanding any submenu that I can see).

[Jeep Stone]

The HTML is there. If you then roll over the left menu you can see the sub menu items poke out, but the CSS is showing them behind the menu.

[Mr Anderson]

The HTML is there. If you then roll over the left menu you can see the sub menu items poke out,

That's the bit I'm not getting. On the front page I see placeholder comments for where the second level stuff would be. If I click to go into kitchens I see on the page (at all times, not when clicking on a link) the second level stuff and if I click on a top level item it just takes me in to that section's top level linked page (so for kitchens it reloads the page).

So somewhere in there I'm missing out on whatever performs the function, which I imagine would be a script of some kind.

[Jeep Stone]

OK. I've uploaded the original stylesheet. I hope that makes it clearer.

[Mr Anderson]

Okay, so there's no show/hiding going on - that expectation was confusing me 

The problem is the height setting for each of those links. So (to use the kitchens one as an example):

Change:

Code:

#productmenu #kitchen {
height: 51px;
}

To:

Code:

#productmenu #kitchen {
height: auto !important;
height: 51px;
min-height: 51px;
}

That'll fix the positioning and show your second level where it needs to be.

You'll then have to fix an issue with the backgrounds repeating:

This:

Code:

#productmenu #kitchen  span {
background: url(left_kit.gif);
}

Needs to be:

Code:

#productmenu #kitchen  span {
background-image: url(left_kit.gif);
}

As that background setting is overriding the earlier generic setting for #productmenu li a span (you can't break a background down like that and still call all parts of it back ground, one incomplete setting will just override an earlier one).

You'll then have to reposition the background image:

This:

Code:

#productmenu li a span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: no-repeat center;
}

Will need to be:

Code:

#productmenu li a span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: no-repeat center top;
}

After that, there may need to be a bit of fine tuning on spacing to get the top link of the second level nav to not be covered by the image.

[Jeep Stone]

That's the badger!

Looks spot on now and works as required. Looks fairly borked in IE6 but i need to get styling that now.

Thanks matey.