CODEWITHSUNDEEP
phphtmlcss
Alexiz Hernandez
Alexiz Hernandez

Reputation: 579

How to change nav links color according to page when using PHP

I currently have 7 pages that all contain the same nav. I am wanting to change each link color when ever I am in it's respective page. So if I am in the home page, I want the Home link to be a different color. The only thing is that I am using PHP to include my nav. Can someone tell me how I can do this? Here is the code for each page. Nothing changes except what is between the content tags.

<?php
ob_start();
require 'core/database/connect.php';
?>
<!doctype html>
<html>
    <?php include 'includes/head.php'; ?>
    <body>
        <?php
        include 'includes/header.php';
        include 'includes/headline.php';
        include 'includes/nav.php';
        ?>
        <div class="content">
            <?php $pageTitle = 'Title | Home'; ?>

            <div class="container-title">
                <p>Home</p>
            </div>
        </div>
        <?php include 'includes/footer.php'; ?>
    </body>
</html>
<?php
$pageContents = ob_get_contents();
ob_end_clean();

echo_str_replace('<!--TITLE-->', $pageTitle, $pageContents);
?>

nav.php code:

<div class="nav">
    <div class="nav-inner">
        <ul>
            <li>
                <a href="index.php">Home</a>
            </li>
            <li>
                <a href="page2.php">Page 2</a>
            </li>
            <li>
                <a href="page3.php">Page 3</a>
            </li>
            <li>
                <a href="page4.php">Page 4</a>
            </li>
            <li>
                <a href="page5.php">Page 5</a>
            </li>
            <li>
                <a href="page6.php">Page 6</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 1796

Answers (3)

Rouhollah Mazarei
Rouhollah Mazarei

Reputation: 4153

You can use something like this

<?php
    function currentPage($pageName){
        if (($pageName.".php") == basename($_SERVER['PHP_SELF'])){
            echo ' class="active"';
        }
    }
?>

This function get a page name (like "page2", "page3" ...) and checks if the current page name in url fits that name, if so, it echos class="active. You must define a class in your css, it could be something like this:

a.active {
    color: #F00;
}

and your nav.php should change to:

<div class="nav">
    <div class="nav-inner">
        <ul>
            <li>
                <a href="index.php"<?php currentPage("index"); ?>>Home</a>
            </li>
            <li>
                <a href="page2.php"<?php currentPage("page2"); ?>>Page 2</a>
            </li>
            <li>
                <a href="page3.php"<?php currentPage("page3"); ?>>Page 3</a>
            </li>
            <li>
                <a href="page4.php"<?php currentPage("page4"); ?>>Page 4</a>
            </li>
            <li>
                <a href="page5.php"<?php currentPage("page5"); ?>>Page 5</a>
            </li>
            <li>
                <a href="page6.php"<?php currentPage("page6"); ?>>Page 6</a>
            </li>
        </ul>
    </div>
</div>

It's the first and maybe ugliest way to do it, but it works. You can refine this code, use it as just a hint.

More on basename: http://php.net/manual/en/function.basename.php More on $_SERVER: http://php.net/manual/en/reserved.variables.server.php

Upvotes: 0

Gaurav Rai
Gaurav Rai

Reputation: 928

Ok so approach could be, add identifier to each page, check, and show the selected class. Identifier in here is is_home

<?php
ob_start();
require 'core/database/connect.php';
$identifier='is_home';//This is for home, assign page_2 for Page 2 or whatevery you like and check on bnav page
?>
<!doctype html>
<html>
    <?php include 'includes/head.php'; ?>
    <body>
        <?php
        include 'includes/header.php';
        include 'includes/headline.php';
        include 'includes/nav.php';
        ?>
        <div class="content">
            <?php $pageTitle = 'Title | Home'; ?>

            <div class="container-title">
                <p>Home</p>
            </div>
        </div>
        <?php include 'includes/footer.php'; ?>
    </body>
</html>
<?php
$pageContents = ob_get_contents();
ob_end_clean();

echo str_replace('<!--TITLE-->', $pageTitle, $pageContents);
?>

And your nav.php looks like this

<div class="nav">
    <div class="nav-inner">
        <ul>
            <li class=" <?php if($identifier=='is_home')echo 'active'; ?>">
                <a href="index.php">Home</a>
            </li>
            <li class=" <?php if($identifier=='page_2')echo 'active'; ?>">
                <a href="page2.php">Page 2</a>
            </li>
            <li class=" <?php if($identifier=='page_3')echo 'active'; ?>">
                <a href="page3.php">Page 3</a>
            </li>
            <li class=" <?php if($identifier=='page_4')echo 'active'; ?>">
                <a href="page4.php">Page 4</a>
            </li>
            <li class=" <?php if($identifier=='page_5')echo 'active'; ?>">
                <a href="page5.php">Page 5</a>
            </li>
            <li class=" <?php if($identifier=='page_6')echo 'active'; ?>">
                <a href="page6.php">Page 6</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 2

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

It may be not the perfect solution. but works pretty well

In your every web page say page1.php include like this

include 'includes/nav.php?page=page1.php';

And in your nav.php Do like this

nav.php:::::

$active = $_GET['page'];
$pageArray = new Array("page1.php", "page2.php", ....);
$makeActive = "";
for($page in $pageArray){
if($active == $page)
$makeActive = "style='color:#F1F1F1'";
echo "<li>
           <a ".$makeActive." href='$page'>". $page ."</a>
      </li>"
}

Upvotes: 0

Related Questions