jueves, 14 de junio de 2012

Resaltar el item del menú según la página actual

Si tenemos un menú personalizado donde se muestran enlaces a alguna entradas en particular o a alguna página estática pero no estamos usando el gadget de Páginas de Blogger ¿es posible resaltar el elemento actual de menú? ¿mostrar ese enlace con alguna característica gráfica especial?
Eso es lo que se ve en muchos menús donde se establece una clase CSS para diferenciar ese item en particular, el sistema detecta la página donde estamos y automáticamente, agrega esa clase; es simple pero, no funciona en Blogger porque el sistema no nos ofrece esa posibilidad salvo, como dije antes, en el gadget de Páginas.

Supongamos que tenemos un menú de este tipo, con enlaces a entradas y páginas estáticas entremezcladas:
<ul div id="mimenu">
<li><a href="http://miblog.com">inicio</a></li>
<li><a href="http://miblog.com/2010/01/ejemplo.html" class="ejemplo">ejemplo</a></li>
<li><a href="http://miblog.com/p/otra-pagina.html">otra pagina</a></li>
<li><a href="http://miblog.com/2012/06/final.html">final</a></li>
</ul>

Si tenemos ese tipo de menú común y corriente, con enlaces personales, para conseguir el mismo efecto deberíamos recurrir a JavaScript y el método más cómodo, seria utilizar jQuery ya que nos permite usar selectores sencillos.
var url = document.URL;
nos diría en que página estamos y algo como esto:
$('#mimenu a[href="'+url+'"]').addClass('actual');
nos permitiría agregar la clase llamada actual para diferenciar el enlace correspondiente.



Esta sería una simulación pero, la idea sería la misma, haciendo click acá, se resaltaría el item del menú de este mismo ejemplo.

Bastaría entonces, agregar el script debajo del menú en si mismo:
<script>
//<![CDATA[
var url = document.URL;
$('#mimenu li a[href="'+url+'"]').addClass('actual');
//]]>
</script>

No hay comentarios:

Publicar un comentario