[resolved] Tabs with CSS Options

[Jaroo]

Okay so I have a layout has a tab navigation area. Just normal the bg is blue, when its hovered over its white. Is there a way that after you click the link in the tab, the bg also goes white and stays white until you click a different link?

If this is something really easy, please shoot me but I can't figure it out. I thought it had to do with the a:active links but its not working.

[Birgit]

I believe you would have to have different files / menu includes for each section/page, and assign a specific class to the active tab.

[Jem]

Instead of having to deal with multiple pages, something like this would work:

CODE

function get_navigation($page) {
    $page = str_replace('.php', '', $page);

    $nav = array(
        "<a href='link1.php'>1</a>",
        "<a href='link2.php'>2</a>",
        "<a href='link3.php'>3</a>"
    );

    echo "<ul id=\"navigation\">";
    foreach ($nav as $link) {
        echo "<li";
            if (preg_match("/($page)/i", $link)) {
                echo " class=\"active\"";
            }
        echo ">$link</li> \n";
    }
    echo "</ul>";

}

You'd then just call your navigation like so:

CODE

get_navigation(basename($_SERVER['SCRIPT_FILENAME']));

Do you need me to explain it, or do you understand what it's doing?

This post has been edited by Jem: Apr 24 2006, 05:16 PM

[KiraM]

i have a book on css and for that case, it says each page needs an ID with its own CSS. or, you could try what Jem did.

[Jaroo]

Instead of having to deal with multiple pages, something like this would work:

CODE

function get_navigation($page) {
    $page = str_replace('.php', '', $page);

    $nav = array(
        "<a href='link1.php'>1</a>",
        "<a href='link2.php'>2</a>",
        "<a href='link3.php'>3</a>"
    );

    echo "<ul id=\"navigation\">";
    foreach ($nav as $link) {
        echo "<li";
            if (preg_match("/($page)/i", $link)) {
                echo " class=\"active\"";
            }
        echo ">$link</li> \n";
    }
    echo "</ul>";

}

You'd then just call your navigation like so:

CODE

get_navigation(basename($_SERVER['SCRIPT_FILENAME']));

Do you need me to explain it, or do you understand what it's doing?

Oh lovely Jem, if you could explain a bit more that would really help I feel like a n0ob attempting this Thank you!

[Jem]

That's cool, I managed to confuse myself twice while writing it because I hate foreach() ..hehe.

In this bit:

CODE

    $nav = array(
        "<a href='link1.php'>1</a>",
        "<a href='link2.php'>2</a>",
        "<a href='link3.php'>3</a>"
    );

..you'd put your navigation. So instead of <a href='link1.php'>1</a> you'd have <a href='index.php'>Home</a> (or something along those lines) - this is pretty self explanatory. I've used single quotes around the href attribute value so you don't have to escape each quotation mark. Just make sure after every link (except the last one) you add a comma.

The next bit just calls the unordered list which controls your navigation:

CODE

    echo "<ul id=\"navigation\">";

..you'd customise this with CSS. If you've never done a semantic navigation list with <ul> before, you might find my tutorial helpful.

The next bit, the foreach, loops through the navigation array that we created earlier. It echos each link into a <li>list item</li> - however, the key bit is the preg_match. Basically, when you call the navigation - as demonstrated above in my original post - it puts the current page the user is on in the $page variable. The preg_match compares each link in the list to the $page variable (the current page you're on), and if they match (i.e. if it's the active link), it assigns a class of active - this is what you'd customise in you CSS to show a different effect.

Just include the function in a file on every page that you want the navigation on - if you've already got headers/footers, put it in your header - and then call your navigation where you want it.

Let me know if you need me to explain more, I'm not good at explaining "on the spot". :|

[Jaroo]

Okay what did I do wrong? LOL

http://broken-road.org/conformity/conformity2.php

Note: Only the first link contains the test header with the informatin you gave me. I just wanted to see if I could get it to work beforeI messed with the whole site.

[Jem]

Try changing

CODE

ul#tabs li.active{
background:#000;}

to:

CODE

ul#tabs li.active a {
background:#000;}

[Jaroo]

It WORKS. I love you Thanks so much Jem!