Jump to content

Highlight active page in a modularize website


thara
Go to solution Solved by Frank_b,

Recommended Posts

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 by thara
Link to comment
Share on other sites

  • Solution

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>';
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.