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

2 comentarios:

  1. Muchas gracias, por este pequeño tutorial, me saco de un apuro!

    ResponderEliminar
    Respuestas
    1. Me alegra saber que te ha ayudado. Gracias por visitar el blog y dejar tu comentario. Saludos!

      Eliminar

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?