Menú CSS, HTML y PHP que marca la página actual

Este tutorial pretende mostrar una forma de crear un menú CSS simple y que mediante PHP permita identificar la página en la que se encuentra actualmente. Está pensado para gente con un nivel básico de conocimientos, por lo que se abordarán los temas lo más sencillos de entender y no necesariamente de la forma más óptima; estoy seguro de que hay formas mejores, pero esta sólo pretende enseñar la lógica detrás. Manos a la obra:

Comencemos con el HTML

Creemos un documento HTML de extensión PHP y llamémoslo index.php. Necesitaremos una lista para que funcione como menú, ya que todos los menú de navegación deberían ser una lista. Creemos entonces una lista de tipo ul y asignémosle por id: menu. Esto nos servirá para identificarla y diferenciala de los demás listas luego. Mi lista se ve algo así:

<ul id="menu"> <li>Inicio</li> <li>Galería</li> <li>Nosotros</li> <li>Contacto</li> </ul>

Ahora, indiquémosle a cada item de la lista a qué página debe ir. Inicio apuntará a index.php, Galería apuntará a galeria.php, Nosotros a nosotros.php y Contacto a contacto.php. Supongo que ya entienden la idea. Una vez terminado el menú en index.php crearemos dichos archivos. Mi lista entonces se ve así:

<ul id="menu"> <li><a href="index.php">Inicio</a></li> <li><a href="galeria.php">Galería</a></li> <li><a href="nosotros.php">Nosotros</a></li> <li><a href="contacto.php">Contacto</a></li> </ul>

Ahora el CSS

En el mismo documento, crearé los CSS que se encargan del comportamiento visual del menú. Comenzaré por el CSS del elemento que lleva por id menu. Le quitaré los márgenes y paddings y le indicaré que el tipo de lista es none. Entonces, se ve algo así:

#menu { margin: 0px; padding: 0px; list-style-type: none; }

Ahora, modifiquemos los vínculos que se encuentran dentro del elemento que lleva por id menu. Yo también le asignaré el mismo estilo a los vínculos visitados. Entonces, asignémosle tamaño y color de letra y fondo, quitémosle el subrayado e indiquémosle que se comporten como bloque. Además, deberemos indicarle flotación a la izquierda si queremos que sea un menú horizontal. De lo contrario, lo dejaremos sin flotación. En mi caso se ve así:

#menu a, #menu a:visited { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 12px; color: #000; background-color: #999; display: block; margin-right: 4px; float: left; text-align: center; padding: 10px 20px; text-decoration: none; }

Debemos también controlar el estado del vínculo cuando pasamos el cursor sobre él. Agreguemos entonces:

#menu a:hover { color: #FFF; background-color: #F90; }

Ahora, creemos la clase que nos permitirá cambiar la apariencia del vínculo de la página actual. Le asignaremos dicha clase al elemento que corresponda a la página actual mediante PHP. Agreguemos entonces la clase:

#menu .actual { color: #333; background-color: #FFF; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #666; }

Veamos ahora el PHP

Debemos identificar el nombre de la página actual y así poder compararla con la página a la que apunta el vínculo. Esto lo haremos utilizando la variable de servidor $SERVER['PHPSELF'] que nos entrega el nombre y la ruta del archivo en el que estamos. Pero deberemos eliminar la ruta para quedarnos sólo con el nombre del archivo. Esto lo haremos utilizando la función explode(), que separa una cadena en un arreglo por un caracter, en nuestro caso, el caracter /. Entonces nuestro código:

´`

La función strrev() invierte una cadena. La utilizamos dos veces para invertirla y luego devolverla a como era originalmente. Esto porque queremos obtener la última parte de la ruta, es decir, el archivo.

Ahora, sólo nos falta preguntar, en cada vínculo, si el nombre del archivo corresponde al archivo en que nos encontramos. Esto lo haremos con un if dentro de cada etiqueta a de la siguiente forma:

<? if ($actual == "index.php") echo "class="actual""; ?>

En este caso, preguntamos si la página en la que nos encontramos, que con PHP almacenamos en la variable $actual es index.php. De ser así, incluímos la clase actual en el vínculo. Entonces, aplicado nuestro código debería verse así:

<li><a href="index.php" <? if ($actual == "index.php") echo "class="actual""; ?>>Inicio</a></li>

Agreguemos ahora algo de dinamismo que nos permita modificar el menú de forma sencilla. Para ello, construiremos nuestro menú en un arreglo de PHP y luego crearemos el html a partir de este arreglo. Primero, crearemos un arreglo que contenga los elementos del menú, con el formato "nombre" => "archivo":

$menu = array("Inicio" => "index.php", "Galería" => "galeria.php", "Nosotros" => "nosotros.php", "Contacto" => "contacto.php");

Ahora, dentro de nuestra

    realizaremos un bucle foreach que nos permita recorrer cada item del arreglo. Así, crearemos un elemento
  • para cada item con el vínculo y texto que le corresponda. Entonces nuestro bucle foreach se verá así:

    <? foreach($menu as $nombre=>$archivo) {?> <li><a href="<? echo $archivo; ?>" <? if ($actual == $archivo) echo "class="actual""; ?>><? echo $nombre; ?></a></li> <? } ?>

    Y con eso ya tenemos un menú que sabe dónde se encuentra. Sólo debemos agregar los elementos del menú que queramos al arreglo $menu y listo! Tengan en cuenta que para que funcionen los demás archivos deberemos duplicar el archivo index.php y nombrarlo como corresponda. En mi caso, duplico index.php y lo guardo como galeria.php, nosotros.php y contacto.php.

    Así se ve el código final:

    `

    "index.php", "Galería" => "galeria.php", "Nosotros" => "nosotros.php", "Contacto" => "contacto.php"); ?>

    `

    Acá pueden descargar los archivos de este tutorial.

    Suerte!

This article is my 11th oldest. It is 903 words long