metal.ize

En la entrada de menú circular les prometí que pondría un script en PHP que mantuviera la navegación actual. Con navegación actual me refiero a marcarle en el menú al usuario en qué sección está. En el ejemplo del menú circular la sección de mail es la que está activa, y por lo tanto está marcada diferente a las demás con un círculo verde a su alrededor y el tooltip desactivado. Todo esto se logra cambiando la clase del <a> de "menitem" a "menactive" y dando el estilo que queramos en el CSS. PHP puede cambiar esta clase automáticamente si agregamos un par de líneas a nuestro código.

El código necesario es bastante pequeño y cómodo. Lo único que necesitas para hacer que funcione es agregar una pequeña línea de código PHP en las páginas necesarias. La ventaja de esto es que es más cómod actualizar nuestro menú en caso de ser necesario. Imaginate que insertas el código HTML de tu menú en las 8 secciones que tienes y, por algúna razón, debes cambiar el link de uno de los enlaces o agregar otro. Tendrías que editar 8 htmls y agregarlo a tu noveno html si es necesario. Demasiado trabajo ¿Cierto? Con PHP puedes crear un solo archivo para tu menú llamado menu.php y mandarlo llamar desde las 8 páginas con esta línea de código:

Las 8 páginas incluirían este menú y todo estaría bien. Si requieres cambiar un link simplemente cambias tu menu.php y las 8 páginas se verían afectadas. Pero ¿Y si quieres que también te marque en qué sección estás? No puedes cambiar el HTML, pues es el mismo para todas las páginas, por lo que tienes que usar PHP.

Eligiendo el título de nuestras secciones

Para lograr este efecto vamos a identificar todas nuestras páginas con un id único de cada una de ellas. Para este ejemplo supondremos que tenemos un archivo llamado mail.php (así como un home.php, tutoriales.php, etc. etc. Un archivo para cada sección). Para identificar este archivo y que PHP sepa qué archivo es, vamos a agregar esta línea de código hasta arriba de mail.php:

Con ese pequeño código ya hemos identificado nuestra página. Es importante que eligas un nombre que tenga relevancia con la sección; es decir, en lugar de ponerle un número para identificarlo o una palabra extraña, es mejor que utilices "Mail" o, si de una página de tutoriales se tratara, poner "HTML y CSS". El caso es usar palabras clave y relevantes. Más adelante sabrás por qué.

menu.php

Ahora debemos editar nuestro menu.php e incluir una pequeña línea de código. Lo que esta línea va a hacer es imprimir class="menitem" si el usuario no se encuentra en esa sección (mail.php en este caso) o class="menactive" en caso contrario. Para esto debemos identificar primero dónde vamos a incluir el atributo class="menitem" o class="menactive". En este ejemplo, el atributo va dentro de la tag <a>, por lo que tenemos que insertar el siguiente código dentro del <a> que va hacia mail.php:

Debes hacer lo mismo con todas las secciones. Siguiendo el ejemplo del menú redondo, tendríamos algo así:

¡Ya con esto nuestro menú estará al pendiente de la sección que visitamos!

... ¡pero hay más!

La cosa no acaba aquí. La navegación no se limita a un menú; también hay otros elementos como headers, las tags <title> y <meta>, etc., etc. ¿Por qué limitarnos a nuestro menú? Puedes hacer toda clase de cosas con esto, y es por ello que les recomendaba pusiera un identificador que contribuyera a describir la sección. Algunos ejemplos de lo que pueden hacer son imprimir un título en nuestra sección dinamicamente usando la tag <h#>:

... modificar el título de nuestra página:

... agregar las keywords para que los navegadores nos indexen mejor:

Y cualquier otra aplicación que se te pueda ocurrir. Ojo, que además puedes aegregar una pequeña descripción a todas tus secciones agregando una nueva variable abajo de $page a cada una de ellas, puedes crear submenus inteligentes usando la misma técnica... en fin, las aplicaciones se limitan a tu imaginación. Si quieren ver un ejemplo de esta técnica aplicada a menus, submenus, keywords y demás explicado en esta entrada, pueden visitar una página que hice hace ya un rato; qbureau.