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>
var url = document.URL;
$('#mimenu a[href="'+url+'"]').addClass('actual');
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:
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>
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
Si este es tu blog:
http://pruebasblogisa.blogspot.com/
no veo menú alguno.
No, es este: http://photonicapruebas.blogspot.com.es/
Es el menú amarillo de la izquierda.
Gracias por responder
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
Ahora si, eran fallos muy tontos, gracias (:
No es un error tuyo, es una locura de Blogger que ha ideado ese absurdo de los prefijos por país :-)
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/
Pd.- es el segundo menú, el primero es el de las paginas estaticas :3
Agrégale la palabra !important; de este modo:
.actual {
background-color: #FFFFFF;
color: #D5A6BD !important;
}
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.
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.
¿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 ...