Website Menu Help

[Desmo]

OK, as some of you know I'm working on a site for a friend. It's CSS/HTML based.

What I currently have is a vertical menu with three states, being Basic/Hover/Current. Basic has a white background, hover has a light greay background and current has a blue background. This is fine in CSS with a normal font. BUT...my friend would like me to use his custom font for the menu which means I now have to use images for the buttons and can't just use CSS. I know I can create one image button and shift the image in CSS.

Is this a good way of doing it? Or am I going to run in to problems with different browsers?

[NokkonWud]

It should be fine, but images will increase load time. Id' recommend against a custom font on a menu.

[Desmo]

I'll give it a whirl and see how it goes. I'd prefer not to use a custom font as well but it's something he'd like. There's only 5 or 6 items so shouldn't affect load times too much.

[Mark]

Older browsers (i.e. IE6) might have problems. Anything relatively recent (including IE7) should work. The worst case would likely be that the button works but the image doesn't shift, which should at least be usable.

The alternatives are exchanging bitmaps or Flash. The former you have to fiddle with pre-loading the images to stop it looking ugly (and it's slower than the single image approach - both in load and display times). The latter, eurgh. :)

[Desmo]

Anybody know how to add a current state to this?

http://dragan.yourtree.org/blog/en/2007/04/10/pure-css-rollover-menu/

[Mark]

I haven't looked at the code, but at a guess, add a third row of 'buttons' to the image, and then use two CSS 'classes' for each button - one for current, and one for everything else. That's approximately what I do. Wouldn't be surprised if there was a better solution though.

[Desmo]

I did try that. I added a third row to the buttons but I can't seem to get the coding right :/

[Desmo]

Cheers Lozza, that seems to have give me an active set that appear when I click on them. Any idea how I can get that image to stay when the page loads? So it shows which page is active.

[Desmo]

What I had was white to start, then grey on hover and then blue on active. I then wanted it to stay blue as current. When I said I already had that, it was only when using CSS for colours and not trying to do it with images. As it is, I think I prefer it as I have it now, without a current state showing. It just seems to look a touch neater.

Thanks for your help with the active state though :)