Hoy trataré de hacer un menú para una web, el cual tendrá una particularidad: Una vez entres en una sección, dicha sección permanecerá destacada en el menú. Este es el objetivo de este artículo a grandes rasgos.

Estructura del menú en HTML y su correspondiente CSS

Lo primero que vamos a hacer es dejar preparada la estructura del menú con el que vamos a trabajar constantemente:

<ul>
   <li><a href=”pagina1.asp” title=”Enlace a la primera página” > Enlace 1 </a></li> 
   <li><a href=”pagina2.asp” title=”Enlace a la segunda página” > Enlace 2 </a></li>
   <li><a href=”pagina3.asp” title=”Enlace a la tercera página” > Enlace 3 </a></li>
   <li><a href=”pagina4.asp” title=”Enlace a la cuarta página” > Enlace 4 </a></li>
   <li><a href=”pagina5.asp” title=”Enlace a la quinta página” > Enlace 5 </a></li>
</ul>

Paralelamente prepararemos el CSS (o Hoja de Estilo):

ul li a { color:#403f3f; font-family:Tahoma, Arial, Helvetica, sans-serif, “Arial Narrow”; text-transform:uppercase; text-decoration:none; font-weight:bold; }

ul li a { display:block; height:23px; padding:9px 0px 0px 13px; background:#EEE; border-left:4px dashed #b0b68b; }

ul li a:hover { background:url(img/menu-ul-hover.gif) top left repeat-x; border-left:8px solid #127dac; color:#000; }

El menú encapsulado en un include

Hasta aquí tenemos un menú básico y si nos diera por querer lograr el efecto anteriormente mencionado sin utilizar nada más, tendríamos que preparar una clase (por ejempo: enlace-activo) y aplicarlo a cada enlace en el momento adecuado.

Esto es simple si tenemos una web con 4 enlaces, pero imaginemos que queremos montar una web con un menú de 15 apartados. Esto significaría que tendríamos esta estructura del menú escrita en 15 páginas independientes y por tanto, modificar cualquier tontería se complica relativamente (o si más no, no es la forma más limpia de trabajar). Es por ello que usariamos un include.

Al dejar el menú encapsulado en un include, lo que tendremos en estas 15 páginas es una linea de código que llama a nuestro menú. Cualquier modificación del menú sólo hemos de realizarlo en un solo archivo.

Pero al haver hecho esto hemos imposibilitado lo de poner la clase enlace-activo a cada enlace que corresponda, porque tenemos una única copia del menú y no podemos hacer diferencias.

Llegados aquí estamos en un cruce de caminos en el que tendríamos que escoger por donde seguir:

• O escribimos el código del menú en cada página para poder “personalizarlo” en cada momento. Con la consecuente pérdida de flexibilidad para ser modificado a nivel global.
• O montamos el menú en un include ganando la flexibilidad, pero no pudiendo modificarlo a nivel individual

Solución: Programar en ASP

La mejor elección es la que tiene todos los beneficios y ningún punto negativo. Así pues hemos de hacer algo que me dé la flexibilidad de poder editar el menú a nivel global y que a su vez pueda personalizar de forma individual.

Para hacer esto programaremos una pequeña función (en este ejemplo lo hago en ASP, pero haré su homólogo en PHP).
Esta función recogerá el identificador del enlace que hemos clicado y comprovará cada enlace del menú. El que coincida con el identificador que se ha pulsado, pasará a tener la clase enlace-activo, quedando destacado.

La función en cuestión es la siguiente:

01.-   <%
02.-   function comprovacion(idPropio)
03.-      Dim idEnviado
04.-      idEnviado = request.Querystring (“id”)
05.-      idEnviado=int(idEnviado)
06.-      if (idPropio = idEnviado) then
07.-          response.write(“class=’enlace-activo’”)
08.-      end if
09.-   end function
10.-   %>

Paso a explicarla por puntos:

01: Abrimos el código ASP

02: Definimos el nombre de la función (comprovacion) e indicamos el nombre de la variable que recive (idPropio)

03: Definimos el nombre de la variable donde recepcionamos el parámetro pasado por URL

04: Recepcionamos el parámetro pasado por URL

05: Convertimos la variable al tipo entero

06: Comprovamos que ambos valores son iguales

07: En tal caso añadiremos la clase al enlace

08: Cerramos el condicional

09: Cerrammos la función

10: Cerramos el código ASP

Este código podemos incrustarlo en el mismo archivo donde tenemos la estructura del menú. Sólo hay que añadirlo antes que el menú.

Hecho esto solo queda hacer 2 cosas:

• Añadir el código que llama a la función y en caso afirmativo añada la clase enlace-activo
• Hacer que los enlaces no solo indiquen la página donde han de enlacer, sino que también pasen el parámetro deseado.

<ul>
   <li><a href=”pagina1.asp?id=1″ title=”Enlace a la primera página” <% comprovacion(1) %> > Enlace 1 </a></li> 
   <li><a href=”pagina2.asp?id=2″ title=”Enlace a la segunda página” <% comprovacion(2) %> > Enlace 2 </a></li>
   <li><a href=”pagina3.asp?id=3″ title=”Enlace a la tercera página” <% comprovacion(3) %> > Enlace 3 </a></li>
   <li><a href=”pagina4.asp?id=4″ title=”Enlace a la cuarta página” <% comprovacion(4) %> > Enlace 4 </a></li>
   <li><a href=”pagina5.asp?id=5″ title=”Enlace a la quinta página” <% comprovacion(5) %> > Enlace 5 </a></li>
</ul>

Esta entrada se publicó , el Miércoles, 17 de Junio de 2009 a las 15:39 horas y está guardada bajo CSS. Puedes seguir cualquier respuesta a esta entrada mediante el canal RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio.