Is This Example a CSS Tab Menu?

[grovesk]

Hi – Is the menu on the Kew gardens web site Your text to link… a tab menu?

I was wondering how it was done and then it occurred to me this might be tabs?

Thanks, Karen

[Johann]

Do you mean the row near the top, with a second row of “menu entries” directly below it? Yeah, but that isn’t really a CSS effect or anything. The “trick” if you will is that on top category pages (the links in the first row) and all pages of that category, they put the respective menu in the second row, to make it consistent. Giving the current tab on the top row the same color as the second row (e.g. by assigning it an extra class like .here, that’s what I would do) gives it that tab effect.

If you make something like that, you could improve on it a bit by also slightly marking the currently viewed page in the submenu, that’s always a nice touch :)

[Johann]

heh, I don’t even know what I meant by “this isn’t a CSS effect or anything”, ignore that bit XD

(oops, and it just occured to me I should have edited the previous post instead of double posting, sorry)

[grovesk]

Hi krysak4ever – Yes, definitely looking for that third example you have listed here. Thanks. I’ll work my way through that tutorial. Related question: I’m not opposed to jQuery but can this be done with CSS only?

Karen

[Johann]

but that’s the exact same menu of the OP, just “dynamic”? huh. but of course you can make it dynamic without javascript:

http://www.alistapart.com/articles/dropdowns

and more importantly

http://www.alistapart.com/articles/hybrid/

[grovesk]

thanks for the links .. these are great. Most importantly, I now know what it’s actually called: a “Horizontal Sub Nav”.

:)

[Author]

Posts