highlight the current page in menu in php

Question

I would like to highlight active page in menu using php. The page is in static version only common files are called using include in php i.e header.php,footer.php,navigation.php

navigation.php

<div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="contact-us.php">Contact</a></li>
                    </ul>
                </div>

index.php

<?php
// Including Files
include('includes/header.php');
include('includes/navigation.php');
?> Rest HTML code goes here

You have active class on the list, use CSS to do the highlighting? — Syfer, Mar 25 '18 at 09:20

score 11 · Answer 1 · answered Mar 25 '18 at 09:21

PHP

$activePage = basename($_SERVER['PHP_SELF'], ".php");

HTML

<ul class="nav navbar-nav">
      <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="index.php">Home</a></li>
      <li class="<?= ($activePage == 'contact-us') ? 'active':''; ?>"><a href="contact-us.php">Contact</a></li>
</ul>

score 1 · Answer 2 · answered Mar 25 '18 at 09:15

You should use conditional statement in each li class attribute in navigation.php file. Use the $_SERVER["PHP_SELF"] predefined variable, for example for Contact link:

<li class="<?php $_SERVER['PHP_SELF'] === '/contact-us.php' ? 'active' : '' ?>"><a href="contact-us.php">Contact</a></li>

score 1 · Answer 3 · edited Dec 13 '21 at 08:59

You can just add proper classes in the every page's <li> element and then later highlight the corresponding page button with some CSS.

Code example:

navigation.php

<div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="index"><a href="index.php">Home</a></li>
        <li class="contact"><a href="contact-us.php">Contact</a></li>
    </ul>
</div>

index.php

// after php includes
<head>
    .index {
        color:red;
    }
</head>

contact-us.php

// after php includes
<head>
    .contact {
        color:red;
    }
</head>

...and so on.

score -1 · Answer 4 · answered Mar 25 '18 at 09:12

you could use the following:

.active, .home:hover {
  background-color: #666;
  color: white;
}

<div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
           <li class="home active"><a href="index.php">Home</a></li>
           <li><a href="contact-us.php">Contact</a></li>
        </ul>
    </div>

deEr. · Answer 5 · 2018-03-25T11:30:34.803

-2

You give the links an ID like #activeHome and #activeContact.

<li><a href="index.php" id="activeHome">Home</a></li>

Then you change in the HTML you only load at Home for example the background.

<style>
    #activeHome {
        background:blue;
    }
</style>

On the page Contact the corresponding.

edited Mar 25 '18 at 11:30

answered Mar 25 '18 at 09:14

deEr.

357
3
12

highlight the current page in menu in php

5 Answers5

Linked