How to add a class to a <li> when the person is on the link page accessed?

Question

I’m creating a website using PHP with includes for better maintenance, but I’m having a problem.

If I only used HTML this problem would not be occurring, because as I am using includes for pull up the menu, I can’t add a class to every page.

I have a menu that uses code like this:

<ul id="menu" class="clearfix">
     <li>
         <a href="index.php">Início</a>
     </li>
     <li>
         <a href="sobre.php">Sobre</a>
     </li>
     <li>
         <a href="contato.php">Contato</a>
     </li>
</ul>

Now let’s assume I’m on the page index.php then a class has to be added to the <li> Beginning.

For a better understanding, see:

As is if I’m on the index.php page (wrong):

How it has to look if I’m on the index.php page (right):

---

Example:

If the person is on the page index.php has to be added to the class (active) in the <li> Beginning.

If the person is on the page sobre.php has to be added to the class (active) in the <li> About and so on.

In case it has to be added a class, getting like this, ex:

<li class="ativo">
         <a href="index.php">Início</a>
</li>

---

Note: This reminded me a lot the function permalink wordpress.

An example is the WP Total site: http://www.wptotal.com/

When I enter the site, the name Início on the menu turns orange.

If I access the page about, the name About on the menu turns orange.

Answer 1

In the menu.php just do:

<ul id="menu" class="clearfix">
     <li <?php if($verifica['index']==true) echo "class='active'" ?> >
         <a href="index.php">Início</a>
     </li>
     <li <?php if($verifica['sobre']==true) echo "class='active'" ?> >
         <a href="sobre.php">Sobre</a>
     </li>
     <li <?php if($verifica['contacto']==true) echo "class='active'" ?> >
         <a href="contato.php">Contato</a>
     </li>
</ul>

And before the include of menu.php you have to put the true the one you want and the others the false:

Example in sobre.php:

$verifica['index']=false;
$verifica['sobre']=true;
$verifica['cintacto']=false;
include 'menu.php';

---

NOTE:

But I would do otherwise with $_GET. I’d put anything on menus, header, footer, etc in the index.php and then included the other pages in that index.php through a www.meudominio.pt/index.php?pagina=sobre.

Then you just do the $_GET['pagina'] in the index.php and make a switch:

index php.:

<ul id="menu" class="clearfix">
     <li <?php if($_GET['pagina']=="inicio") echo "class='active'" ?> >
         <a href="index.php">Início</a>
     </li>
     <li <?php if($_GET['pagina']=="sobre") echo "class='active'" ?> >
         <a href="sobre.php">Sobre</a>
     </li>
     <li <?php if($_GET['pagina']=="contato") echo "class='active'" ?> >
         <a href="contato.php">Contato</a>
     </li>
</ul>

<?php
    switch($_GET['pagina']){
         case "inicio":
              //não faz nada
              break;

         case "sobre":
              include 'sobre.php';
              break;

         case "contato":
              include 'contato.php';
              break;
    }
?>

Answer 2

I think something like this is more practical:

<?php
$pagina_atual = basename($_SERVER['PHP_SELF']);
?>
<ul id="menu" class="clearfix">
     <li<?php echo ($pagina_atual == 'index.php' ? ' class="ativo"' : ''); ?>>
         <a href="index.php">Início</a>
     </li>
     <li<?php echo ($pagina_atual == 'sobre.php' ? ' class="ativo"' : ''); ?>>
         <a href="sobre.php">Sobre</a>
     </li>
     <li<?php echo ($pagina_atual == 'contato.php' ? ' class="ativo"' : ''); ?>>
         <a href="contato.php">Contato</a>
     </li>
</ul>