SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background CSS For Tabbed Links

    Hey guys,

    Usually I can figure stuff like this out, but this one confuses me for some reason lol.

    The code is from a theme I'm using, and here's what I want to do.

    The tabbed nav links have a background image to the left and to the right (separate) that create a "talk bubble" when you hover. What I want to do is still have the hover, but have the background talk bubble stay visible on the current active tab that has been selected.

    Here's a demo working version of the theme:
    http://gogreenlifestyle.net/

    The tabs are below the video on the right sidebar.

    Here's the nav code:

    .nav1{
    float: left;
    }
    .nav1 li{
    float: left;
    height: 27px;
    }
    .nav1 li a{
    color: #878787;
    display: block;
    height: 27px;
    text-align: center;
    }
    .nav1 li.active a, .nav1 li a:hover, .nav1 li.current_page_item a{
    color: #ff7800;
    text-decoration: none;
    height:27px;
    }
    .nav1 { list-style: none; margin: 0px; padding: 0px;}
    .nav1 li { padding: 0px; margin: 0px; display: inline; line-height: 14px; }

    .nav1 li a { padding: 0px 0px 0px 9px; background: url(./images/menuleft.gif) no-repeat left top; float: left;}
    .nav1 li a span { padding: 4px 9px 9px 0px; display: block; background: url(./images/menuright.gif) no-repeat right top; float: right; }
    .nav1 li a span { float: none; }
    .nav1 li a:hover span { }
    .nav1 li a:hover , li.current_page_item a{ background-position: 0% -27px; text-decoration: none;}
    .nav1 li a:hover span , li.current_page_item a span{ background-position: 100% -27px; }

    Thanks for the help!
    Jay

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to have all the code in place apart from the class that needs to be added in the html to the current item.

    e.g.

    Code:
    <ul class="nav1 idTabs">
                        <li class="current_page_item"><a href="#pop"><span>Popular</span></a></li>
                        <li><a href="#comm"><span>Comments</span></a></li>
                        <li><a href="#feat"><span>Featured</span></a></li>
                        <li><a href="#tagcloud"><span>Tags</span></a></li>
                    </ul>
    You can't make it happen automatically and you need to place the class in the correct place for each page.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, thanks for the reply.

    That's my problem though. If I add that class there, the background will always remain active under "Popular", regardless of which tab is selected. I want it to change to whichever the active tab is. So, if I clicked "Comments", the background would no longer be behind "Popular", but would be behind "Comments".

    I can't make it different for "each page", because it's tabs that change on the same page. The page doesn't change.

    Does that make sense? I think I've seen it done before, I just don't know how.

    Jay

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since this is for a WordPress Theme, then you'll have to use some PHP to detect the current page, then add the class to that particular one. How are you coding this menu into your Theme? By hand, or letting PHP do the leg-work?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, As Dan said you would need to script this through either through PHP or perhaps some javascript.

    How are you changing the content if you are not re-loading the page? If its a javascript switch then you can add that current class dynamically to the clicked item.

    CSS can't help here other than to set up everything in place. You need to add that class dynamically and then the css will take effect.

    (For interests sake only you can do something in CSS only but it won't work in Opera/safari so you do need a script to do this properly.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •