Jump to content
Sign in to follow this  
thara

Highlight active page in a modularize website

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Sign in to follow this  

×
×
  • 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.