Indicar la página actual (Current Page) en un menú con PHP y CSS

Cómo indicar la página actual (Current Page) en un menú con PHP y CSS.

Vamos añadir dinámicamente una clase CSS (.active) mediante PHP a los enlaces de un menú cuando sean la página activa o current page.

Para ello, añadimos la siguiente función PHP en cada una de las secciones de nuestro Sitio Web.

<?php
function active($currect_page){
$url_array = explode('/', $_SERVER['REQUEST_URI']);
$url = end($url_array);
if($currect_page == $url){
echo 'active';
}
}
?>

Ahora, añadimos la siguiente clase dinámica a las distintas opciones de nuestro menú:

class="<?php active('pagina.php');?>"

Sustituir pagina.php por el nombre de cada uno de los documentos PHP que conforman las secciones de nuestra Web.

Supongamos que este es nuestro menú:

<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="el-equipo.php">El equipo</a></li>
<li><a href="servicios.php">Sevicios</a></li>
<li><a href="contacto.php">Contacto</a></li>
</ul>

Tendríamos que modificarlo para que quedara de la siguiente manera:

<ul>
<li><a class="<?php active('index.php');?>" href="index.php">Inicio</a></li>
<li><a class="<?php active('el-equipo.php');?>" href="el-equipo.php">El equipo</a></li>
<li><a class="<?php active('servicios.php');?>" href="servicios.php">Sevicios</a></li>
<li><a class="<?php active('contacto.php');?>" href="contacto.php">Contacto</a></li>
</ul>

Y por último, definimos los estilos de la clase CSS .active y .active:hover en nuestra hoja de estilos CSS:

.active {
color: red !important;
}
.active:hover {
color: blue !important;
}

Añadimos !important para que ignore cualquier otra regla.

Puedes descargar el ejemplo haciendo clic en el siguiente enlace: Descargar ejemplo