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

Comentarios

Unknown ha dicho que…
Muchas gracias, por este pequeño tutorial, me saco de un apuro!
jiestevez ha dicho que…
Me alegra saber que te ha ayudado. Gracias por visitar el blog y dejar tu comentario. Saludos!

Entradas populares de este blog

Enlaces tipo ancla con desplazamiento animado con jQuery