Working with tabbed menus

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

Re: Working with tabbed menus

On Aug 21, 3:15 pm, "ish...@gmail.com" wrote:
> 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...

Re: Working with tabbed menus

ishky1@gmail.com wrote:
> [...] 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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Working with tabbed menus

On 21 Aug, 22:15, "ish...@gmail.com" wrote:

> 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/53a3118c1d34ae c8

Re: Working with tabbed menus

On Aug 22, 9:48 am, Andy Dingley wrote:
> On 21 Aug, 22:15, "ish...@gmail.com" wrote:
>
> > 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/53a3118c1d34ae c8

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.

Re: Working with tabbed menus

On 23 Aug, 15:39, Matt White wrote:

> 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.

Re: Working with tabbed menus

On Aug 21, 5:15 pm, "ish...@gmail.com" wrote:
> 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

Re: Working with tabbed menus

On 24 Aug, 01:31, "ish...@gmail.com" wrote:

>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".

Re: Working with tabbed menus

Andy Dingley wrote:
>
>> 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.
>
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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)