CSS Tab Menu

[Zanzubaa]

Test site

Would someone mind explaining how I can pass this onto other pages and have it high-light a tab to indicate the current page. On my site I plan to have a structure something like:

ROOT
|_> AboutUs/index.asp
|_>Contact.asp/index.asp

Index.asp

The menu would be included at the top of every page.

I would also like to add a sub menu under item1 if anyone knows how. Not a drop down just 2 more links that that go across in a bar underneath.

Used THIS tutorial to make what I have so far.

Any help much appreciated.

[BonRouge]

See if this helps... http://bonrouge.com/br.php?page=current2

[Zanzubaa]

Thanks Bon but its not really what im looking for, im working in asp not php and im not sure how I could adapt your code into my tab menu so the colours changed depending on the page.

Its just a normal tab menu I need been going around and around in circles trying to get different onse to work getting fed up now

LIke this

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

but no nasty roll-over effect the sub menu would come up when pressed and I am confused how I would use this with my site. Do you include it at the top of the page and it magicly knows what page its on so high-lights the appropriate tab? dunno.

[BonRouge]

How about this one then...?

http://bonrouge.com/br.php?page=currentcss

[jonnybinthemix]

from your example is seems maybe you are after something like the menu on here: Menu

Simple to make, and looks pretty good too.

If you wanted to use something like that, feel free to take snippits of my source.

Hope that helps

jon

[Zanzubaa]

Thanks Jonny but wasas after something more like:

PLAY.com

Try clicking the DVD tab. I was after a sub menu like that.

[jonnybinthemix]

you mean the main menu for play.com? or the sub menu underneath?

The submenu is just underline when hover, you could do that with a pseudo class couldent you?

Jon

[ronaldb66]

You could add a specific class (or id) to the current menu option, which is what BonRouge's example did (I'm sure you can figure out a way to do this in ASP as well), or add ids to all menu items and use for example a body class to address the accompanying style rules for the hightlighted menu item (do a Google for "body class" to find some additional info on this technique).

The same would more or less apply to sub menus: you could create the entire menu as a two level list, positioning the second level lists absolutely underneath the top level and toggle their visibility in a similar way as you would control highlighting the "current" menu item.

Alternatively, you could have the script leave out the entire sub menus and only include them if they need to show up, but a have a feeling leaving them in may improve findability for search engines (no proof whatsoever for that, though).

By the way: are you having difficulties with generating the required markup, or is it about how to style averything using CSS? Perhaps a more compelling approach would be the sliding doors one (including "current" tab styles)