En muchos CMS’s nos pasa que cuando creamos un menú con un enlace a una sección, se active correctamente cuando estamos justo en esa página, pero pieda la clase css que lo marca como activo en cuanto navegamos por las páginas hijas.
Pueden haber distintas soluciones dependiendo del cms que estemos utilizando y de la arquitectura de las urls, pero… si podemos detectar un trozo de nuestra url que no cambia cuando navegamos por la sección, y nunca se encuentra cuando navegamos por el resto, como por ejemplo ‘/blog/’, podemos hacer una ñapa por jquery para que se active la opción de menú poniendo la clase css que corresponda.
El código sería algo como:
<script type="text/javascript">
var sUrl = document.location.href;
if (sUrl.indexOf('/blog/') > 0) {
jQuery("ul.menu > li > a > span:contains('Blog')").parent().parent().addClass('active current');
}
</script>Lo que hace es detectar que la url contiene la cadena de texto que identifica que estamos navegando por nuestra sección, y coge el elemento de esa opción del menú por jquery, y le pone al elemento que corresponde la clase css que corresponde.
Si esto os pasa usando Joomla! y con url’s amigables, este plugin ‘Active Parent Menu‘ que hemos desarrollado os puede servir de ayuda:
