Working with tabbed menus

[ishky1]

Hi all,

I'm working on putting a tabbed menu, with css formating, into the
pages of the site I'm working on. It is going well except for one
thing that has me puzzled. I want to have the same background color
for the active tab and pages while the inactive pages will be a
contrasting color. How do I get the tabs to recognize which page is
active? Right now I have the active tab hard coded not to be the same
color which works but isn't efficient for making updates.

I don't need all the details just the proper vocabulary so I can find
the solution.

Thanks,
Andy

 

[Matt White]

Hi all,

I'm working on putting a tabbed menu, with css formating, into the
pages of the site I'm working on. It is going well except for one
thing that has me puzzled. I want to have the same background color
for the active tab and pages while the inactive pages will be a
contrasting color. How do I get the tabs to recognize which page is
active? Right now I have the active tab hard coded not to be the same
color which works but isn't efficient for making updates.

I don't need all the details just the proper vocabulary so I can find
the solution.

Thanks,
Andy

You can use JavaScript to set the background color of a particular
element based on the page name...

 

[Jim Moe]

[...] I want to have the same background color
for the active tab and pages while the inactive pages will be a
contrasting color. How do I get the tabs to recognize which page is
active?

Server-side scripting.
Use a function to create the menu code on the fly with an argument that
indicates which page is active.

 

[Andy Dingley]

I want to have the same background color
for the active tab and pages while the inactive pages will be a
contrasting color. How do I get the tabs to recognize which page is
active?

Plain and simple CSS. No client-side scripting, no server-side
scripting.

Simple way: put class="current" on the current HTML element(s) and use
simple CSS selectors to change what you need.

Slightly more complex way. The simple way needs the "nav bar" to be
changed for each different "current". That measn you can't embed it
via SSI. There's a CSS fix for that too.

http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8

 

[Matt White]

Plain and simple CSS. No client-side scripting, no server-side
scripting.

Simple way: put class="current" on the current HTML element(s) and use
simple CSS selectors to change what you need.

Slightly more complex way. The simple way needs the "nav bar" to be
changed for each different "current". That measn you can't embed it
via SSI. There's a CSS fix for that too.

http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8

This might be less hard-coded, but it's still hard-coded. I believe he
is trying to avoid any hard-coding and have the tab coloring
determined at load-time so that new pages can easily be added without
having to worry about the tab coloring each time.

 

[Andy Dingley]

This might be less hard-coded, but it's still hard-coded. I believe he
is trying to avoid any hard-coding and have the tab coloring
determined at load-time so that new pages can easily be added without
having to worry about the tab coloring each time.

If the problem here is to support dynamically created tabs, then just
use class="current" for the appropriate tab and leave the CSS alone.
It's the easiest of the lot - and you've already abandoned use of SSI
because you're creating them dynamically. It's "hard coded", but
that's not a problem because it doesn't hard-code anything that might
need to change.

The SSI-compatible option does indeed require hard-coding (the list of
all possible tabs) in the CSS. Its intention is to simplify the HTML,
at the cost of more complex CSS. If you wanted, you could combine the
two - SSI a set of "standard" HTML tabs and use CSS to track their
"current" status, then use the simple class="current" attribute on the
dynamic "extension" tabs.

 

[ishky1]

Hi all,

I'm working on putting a tabbed menu, with css formating, into the
pages of the site I'm working on. It is going well except for one
thing that has me puzzled. I want to have the same background color
for the active tab and pages while the inactive pages will be a
contrasting color. How do I get the tabs to recognize which page is
active? Right now I have the active tab hard coded not to be the same
color which works but isn't efficient for making updates.

I don't need all the details just the proper vocabulary so I can find
the solution.

Thanks,
Andy

Thanks for the tips. I will go with the class=active idea. It sounds
the easiest. There is probably a more sophisticated way that I'll
learn in the future.

Andy

 

[Andy Dingley]

I will go with the class=active idea.

I'd suggest class="current" rather than "active".
There's already the :active pseudo-element in HTML, and life's
confusing enough already without mixing terms up.

It sounds the easiest.

It is.

There is probably a more sophisticated way that I'll learn in the future.

There are, but that doesn't mean "better" or "more appropriate".

 

[Jim Moe]

Plain and simple CSS. No client-side scripting, no server-side
scripting.

Simple way: put class="current" on the current HTML element(s) and use
simple CSS selectors to change what you need.

Two downsides:
1. The markup for the menu must exist on all of the pages making it
difficult to manage changes. This can be offset by using server-side
includes (ssi), not exactly scripting.
2. The tab for the current page has an active link even though it may have
a different color. However, since the tab menu exists on every page, I
guess it would be no big thing to remove the anchor when adding the class.