Highlight active page in a modularize website

[thara]

I just want to add a css cass named "active" to my navigation links when its page opened using php.

In my website the content have broken into its individual components. And those components are separated, organized, and put back together using one index file. (website bootstrap file) Actually I am modularizing this website using php.

My Navigation is something similar to this code -

...

<li>
    <a href="index.php?p=dashboard">Dashboard</a>
</li>
<li>
    <a href="index.php?p=page-two">Page Two</a>
</li>
<li>
    <a href="index.php?p=page-three">Page Page Three</a>
</li>

...

This is how my index.php looks like -

// Validate what page to show:
if (isset($_GET['p'])) {
    $p = $_GET['p'];
} elseif (isset($_POST['p'])) { // Forms
    $p = $_POST['p'];
} else {
    $p = NULL;
}

// Determine what page to display:
switch ($p) {

    case 'dashboard':
        $page = 'dashboard.inc.php';
        $page_title = 'Control Panel';
        break;

    case 'page-three':
        $page = 'page-three.inc.php';
        $page_title = 'Page Three';
        break;

    case 'page-two':
        $page = 'page-two.inc.php';
        $page_title = 'Page Two';
        break;

    // Default is to include the main page.
    default:
        $page = 'login.inc.php';
                $page_title = 'Control Panel Login';
        break;

} // End of main switch.

// Make sure the file exists:
if (!file_exists('./modules/' . $page)) {
    $page = 'login.inc.php';
    $page_title = 'Control Panel Login';
}

include('./includes/header.html');

include('./modules/' . $page);

include('./includes/footer.html');

I tried it something like this -

case 'dashboard':
  $page = 'dashboard.inc.php';
  $page_title = 'Control Panel';
  $class == ($page == $p) ? 'active' : '';
break;

And adding this class to my navigation

<li>
    <a class="<?php echo $class;?>">....
</li>

But this is not working for me. hope somebody may help me out.

Thank you.

Edited January 2, 2015 by thara

[Frank_b]

use a array and a loop to echo your <ul>:

$items = array(
     'Login' => 'login',
     'Dashboard' => 'dashboard',
     'Page two' => 'page-two',
     'Page three' => 'page-three',
);

echo '<ul>';
foreach($items as $title => $basename)
{
    $class = '';
    if($p == $basename)
        $class = ' class="active"';

    echo '<li><a'.$class.' href="index.php?p='.$basename.'">'.$title.'</a></li>';
}
echo '</ul>';

[thara]

Thanks for your answer. But its difficult to figure out with my acctual code. Reason is I am using fontawesome icons for each link and sub menus.

 

This is my actual HTML for navigation

<ul class="nav" >
    <li>
        <a href="index.php?p=dashboard">
            <i class="fa fa-dashboard fa-3x"></i> Dashboard
        </a>
    </li>
    <li>
        <a href="index.php?p=page-1"">
            <i class="fa fa-file-archive-o fa-3x"></i> Page One
        </a>
    </li>
    <li>
            <a href="index.php?p=page-2">
                    <i class="fa fa-picture-o fa-3x"></i> Page Two
            </a>
    </li>

    <li>
            <a href="#"><i class="fa fa-cog fa-3x"></i> My Account<span class="fa arrow"></span></a>
            <ul class="nav nav-second-level">
                    <li>
                            <a href="index.php?p=page-3">page Three</a>
                    </li>
                    <li>
                            <a href="index.php?p=page-4">Page Four</a>
                    </li>
            </ul>
    </li>         
</ul> 

Can you help me regarding this HTML structure?

 

Thank you.

[Frank_b]

The icons are not a problem.

$items = array(
    '<i class="fa fa-dashboard fa-3x"></i> Dashboard' => 'dashboard',
);

The submenus do make it more complex.

 

You could use this example:

http://www.phpf1.com/download.html?dl=21

[thara]

Thank you very much for your idea of icons and given link to a php class for navigation. That php class help me greatly to avoiding my headache. Thanks again.