Creating a nav bar like this

[davva]

Hi

I would like to know the best way of re-creating a navbar I have designed. http://www.clientpreview.co.uk/necr/preview/nav.jpg. It would have hover states and depending what page you are the active graphic would be the blue tab.

I have tried following http://superfluousbanter.org/archiv...atrix-reloaded/

But cannot for the life of me get it even near to his example.

Any help would be much appreciated!

Thanks

[moojoo]

That is fairly simple. What you need to do is take the tab image and make it two sep images. One for the LI the other for the LI A.

Check this article for more details and step by step instructions.

[spinal007]

Well, you've pointed out the answer to your own question:
http://www.nundroo.com/nav_matrix/welcome2.html

[davva]

I have tried implementing that example, but just no luck really dont know where I am going wrong.....aahhhhh!......help

[spinal007]

Post url...

[Ryan Fait]

I kind of understand your problem with the example. The CSS methods they used are horrible. As I've never made a CSS tabbed menu like that, and I'll probably use something similar in a website I create in the future, here is the same type of menu, only with common sense involved.

The this CSS basically acheives the same thing, only it's less than a third of the size of the example you gave.

http://ryanfait.com/menu/

I haven't tested in IE... I'm on vacation so I don't have access to my computer. However, unless I forgot something, I don't see any reason why this shouldn't look the same (other than it not being centered on the page). Let me know if there's a problem and I'll do my best to fix it though.

[davva]

WOW, your a genious, your right the example I gave is very hard to follow, your version uses far less code, I will try and implement it to my page.

Will let you know how I get on!

[Ryan Fait]

Oh, I see why the example you provided had such a strange way of doing it. I just read the description. It's used to counter some IE bug I'm not aware of. Strange, I'll have to look into that when I get my hands on Windows again. That's definitely not a good example to start with as it uses some rather round-about techniques to acheive the same affect as mine. It's more for people who have a fuller understanding of CSS.

[Ryan Fait]

Upon further investigation of the link, I'm at a loss to discover why he's used just one massive image for the navigation. Can anyone explain to me why? It seems so inconceivably pointless for such an insignificant increase in speed of switching the backgrounds. It's not explained properly anywhere on his site or on linked ones.

My only guess is that two years ago there was a major advantage to this technique.

[davva]

I have your example nearly working, so much easier, let you know how i get on.

[davva]

Hi ryanfait

I have a slight problem, i cant seem to locate when I click to go onto another page and change the active class to the tab I get this http://www.clientpreview.co.uk/necr/preview/test.htm , is it something to do with the z-index?

Thanks for your help!

[Rob]

ryanfait... .I believe the first example is done that way to avoid screen flicker, and to cache all images in one hit (coz it's just one image afterall)

I've seen this technique used to great success on a few sites although, I must admit it can be a pain to get going.

[moojoo]

I use one image for up to 3 button states and yes load a single file, get 3 button effects on all your nav links, eliminates IE's suck flicker of loaded images on rollover. Makes sense to me. Listen to the moojoo and the alien cow thief rob.

[Rob]

not wishing to go offtopic, but alien cow thief? ugh? lol

[Ryan Fait]

I sort of understand the concept, but not entirely. If you'll look at my tab CSS, you'll see that I used one image for both the inactive and hover states of the tabs. Is using just one large image for all the links better than repeating one image 4 times? I've never seen the flickering problem before, is it only caused when you try to use two separate images for the inactive and hover states?

[Rob]

you way is fine ryan...

[moojoo]

Ryan, your way is fine but it would be more efficient to have one style for all the main level nav links utilizing a single image file vs 4 different ones. If that makes sense.

[Ryan Fait]

I am only using two images. One for the regular tab and one for the selected tab. I could combine those two, but as they never visibly collide, it would make litte difference. A GIF's file size grows unproportionaly to it's dimensions, so I'd just end up with a more bytes to load anyway.

Perhaps I don't understand what you're saying.

[moojoo]

The point is using two images you may get the "IE Flicker" on intitial hovers while IE caches the image files. Its nothing really major, just annoying. Its not necessarily about file size, although loading one image is usually better than loading two, and the single image with both states can be recycled for all the links. Its just an efficiency thing.

[Ryan Fait]

Haha, we're almost going in circles. That's what I did. One image was for the selected tab (both the normal and the hover state) and the tab for the other pages (also both the normal and hover state). Here:

http://ryanfait.com/menu/tab_inactive.gif
http://ryanfait.com/menu/tab_active.gif

This terminology used why trying to describe what I've done is rather frustrating to write. I was meaning that I could combine those two in one image so there would be four states in one.