Working with tabbed menus

Discussion in 'HTML' started by ishky1@gmail.com, Aug 21, 2007.

  1. Guest

    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
     
    , Aug 21, 2007
    #1
    1. Advertising

  2. Matt White Guest

    On Aug 21, 3:15 pm, "" <> 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...
     
    Matt White, Aug 21, 2007
    #2
    1. Advertising

  3. Jim Moe Guest

    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)
     
    Jim Moe, Aug 22, 2007
    #3
  4. Andy Dingley Guest

    On 21 Aug, 22:15, "" <> 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/53a3118c1d34aec8
     
    Andy Dingley, Aug 22, 2007
    #4
  5. Matt White Guest

    On Aug 22, 9:48 am, Andy Dingley <> wrote:
    > On 21 Aug, 22:15, "" <> 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/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.
     
    Matt White, Aug 23, 2007
    #5
  6. Andy Dingley Guest

    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.
     
    Andy Dingley, Aug 23, 2007
    #6
  7. Guest

    On Aug 21, 5:15 pm, "" <> 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
     
    , Aug 24, 2007
    #7
  8. Andy Dingley Guest

    On 24 Aug, 01:31, "" <> 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".
     
    Andy Dingley, Aug 24, 2007
    #8
  9. Jim Moe Guest

    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)
     
    Jim Moe, Aug 24, 2007
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob
    Replies:
    1
    Views:
    335
    Jim Corey
    May 27, 2004
  2. The Eeediot
    Replies:
    0
    Views:
    310
    The Eeediot
    Nov 29, 2004
  3. RCS
    Replies:
    1
    Views:
    432
    =?Utf-8?B?Q2hyaXMgTG92ZQ==?=
    Dec 21, 2005
  4. news.west.cox.net

    Select menus above flyout menus? help?

    news.west.cox.net, Dec 8, 2004, in forum: HTML
    Replies:
    8
    Views:
    799
  5. Jonathan N. Little

    Re: HELP: Tabbed drop down menus

    Jonathan N. Little, May 1, 2010, in forum: HTML
    Replies:
    21
    Views:
    1,043
    Jonathan N. Little
    May 3, 2010
Loading...

Share This Page