Active Trail en PHP muy simple

Cuantas veces habéis realizado un proyecto pequeñito en html estático y os habéis encontrado con el problema de que os aparece que el menú de navegación principal aparezca resaltado cuando se visita su página.

La solución más común es añadir una clase «active-trail» al elemento de la lista que esté resaltado. Sin embargo en un proyecto estático resulta muy tedioso estar ampliando o cambiando los menús en más de 50 páginas diferentes. Y resulta aún más ilógico llevarte el proyecto a uno de nuestros queridísimos CMS.

Para esos problemas, os dejo un pequeño snippet en php para referenciar mediante un «include» en vuestro proyecto.

Para ello crearemos un archivo php que contrendrá nuestro menú de navegación:

<?php
	$full_name = $_SERVER['PHP_SELF'];
	$name_array = explode('/',$full_name);
	$count = count($name_array);
	$page_name = $name_array[$count-1];
?>
<nav>
  <ul class="sf-menu">
    <li class="<?php echo ($page_name=='index.php')?'active-trail':'';?>"><a href="index.php">Inicio</a></li>
    <li class="<?php echo ($page_name=='pagina1.php')?'active-trail':'';?>"><a href="pagina1.php">Página 1</a></li>
    <li class="<?php echo ($page_name=='pagina2.php')?'active-trail':'';?>"><a href="pagina2.php">Página 2</a></li>
    <li class="<?php echo ($page_name=='pagina3.php')?'active-trail':'';?>"><a href="pagina3.php">Página 3</a></li>
    <li class="<?php echo ($page_name=='pagina4.php')?'active-trail':'';?>"><a href="pagina4.php">Página 4</a></li>
  </ul>
  <div class="clear"></div>
</nav>

Lo llamaremos por ejemplo «menu_principal.tpl.php»

Y después lo insertaremos en cada una de nuestras páginas:

• index.php
• pagina1.php
• pagina2.php
• pagina3.php
• pagina4.php

Utilizando una sencilla función include:

<?php include('menu_principal.tpl.php'); ?>

Ni que decir tiene que nombreis cada página como os de la gana. Esto es tan solo un pequeño ejemplo orientativo.

Por último sólo tenemos que definir que aspecto tendrá el elemento de menú resaltado mediante css:

li.active-trail {

  font-weight: bold;
  color: #000;

}

Y listo, así tendreis un menú de navegación, con una clase para el elemento activo.