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>

12 comentarios:

Rosendo Ramírez  

Tengo un menu y puse lo siguiente es correcto o como deberia ser?...



<li><a href='http://jovenesfyv.blogspot.com/search/label/Congresos'>Congresos</a>

</li>

<script>

//<![CDATA[

  var url = document.URL;

  $('#mimenu li a[href="'+url+'"]').addClass('actual');

//]]>

</script>

Responder
Isa ML  

A mi no me funciona en blogger esté menú,y he copiado los códigos exáctamente como los pones ¿cuál será el problema? :S

JMiur  

Si este es tu blog:
http://pruebasblogisa.blogspot.com/
no veo menú alguno.

Isa ML  

No, es este: http://photonicapruebas.blogspot.com.es/
Es el menú amarillo de la izquierda.

Gracias por responder

JMiur  

Por un lado, porque tal como dice la entrada, para usa este código se requiere la librería jQuery.

Por otro lado, debes tener en cuenta el tema de los prefijos por país que ahora utiliza Blogger, lo que hará que la dirección url del blog, varíe:
http://vagabundia.blogspot.com/2012/03/blogger-y-las-nuevas-redirecciones-de.html

Responder
Isa ML  

Ahora si, eran fallos muy tontos, gracias (:

JMiur  

No es un error tuyo, es una locura de Blogger que ha ideado ese absurdo de los prefijos por país :-)

Responder
Leslie Mishigan  

Disculpa... esta muy bueno el truco, pero a mi no me queda como quiero :C ... le aplique css a la clase "actual" pero solo el background se le aplica, el color de texto no quiere cambiar :c pork?... mi blog es
http://pruebaslesliemishigan.blogspot.mx/

Responder
Leslie Mishigan  

Pd.- es el segundo menú, el primero es el de las paginas estaticas :3

JMiur  

Agrégale la palabra !important; de este modo:

.actual {
background-color: #FFFFFF;
color: #D5A6BD !important;
}

Leslie Mishigan  

Waa!! funcionó X3 muchas gracias! eres un genio xD... después de intentar barbaridad y media resultó algo tan sencillo xD... lo que es no saber >w< , como ultima duda por este tema (espero) tengo que mantener los enlaces con el redireccionamiento al pais? en mi caso .mx? o puedo ponerles .com a secas... que pasa con la gente que me visita de otro pais? el efecto no se ve? bueno eso, gracias.

JMiur  

Eso no es algo que pueda responder con seguridad; por lo que veo, funciona bien así como está aún con el prefijo.mx.

Vas a tener que irlo chequeando co distintos usuarios.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR