Codigo javascript para manejo de menus en joomla con imagenes (Hover y Active)

En mi canal de youtube hay un video del paso a paso:

ejemplo menu

Es un código rápido para poder manejar menus en joomla sólo con imagenes, esta dividido en dos partes:

  • Revisamos si hay algun item del menu con submenus y los desHabilitamos (si se quiere que aparezcan solo se bede comentar el FOR de los subItem)
  • Recorre los item que contienen la clase “menu-hover” y revisa si el parent tiene la clase “active”, osea que ya se le dio clic a un menú, obtiene la url de la imagen y modifica la etiqueta IMG asignandole una nueva url con la imagen que contiene la terminación “-hover” por defecto
  • La segunda parte del codigo reacciona al posicionar el mouse sobre cualquier item del menu y busca automaticamente las imagenes con terminacion “-hover” de cada uno y genera el efecto hover.
imageOver=[];	
var items = document.getElementsByClassName("menu-hover");
var subItems = document.getElementsByClassName("sp-has-child");

//Revisamos si hay submenus y los deshabilitamos
for (i = 0; i < subItems.length; i++) {
	subItems[i].classList.remove("sp-has-child");
}
var i;
//Revisamos si hay algun parent con active y le remplazamos la imagen por el hover
for (i = 0; i < items.length; i++) {
	if(items[i].parentNode.className.indexOf("active") > 0){
		var img = items[i].firstChild.attributes["src"].nodeValue;
		imageOver = img.split(".");
		items[i].firstChild.src=imageOver[0]+'-hover.'+imageOver[1];
		items[i].classList.remove("menu-hover");
	}
} 	
//Esperamos a que el mouse pase por un menu y realizamos el efecto hover  
$(".menu-hover").hover(function(){
	var img = $(this).find('img').attr('src');
	imageOver = img.split(".");
	$(this).find('img').attr('src', imageOver[0]+'-hover.'+imageOver[1])
}, function() {
	$(this).find('img').attr('src', imageOver[0]+'.'+imageOver[1])
});

Requiere dos imagenes:

  • nombreDelaImagen.png
  • nombreDeLaImagen-hover.png

Si es para usar en JOOMLA:

Poner clase CSS “menu-hover” en cada menu para que el código sepa sobre cual o cuales menus debe activarse y buscar las imagenes con terminacion “-hover” y generar el efecto.

Si es para usar fuera de JOOMLA esta debe ser la estructura:

<ul class="sp-megamenu-parent menu-fade hidden-sm hidden-xs">
      <li class="sp-menu-item current-item active">
          <a class="menu-hover" href="/web/index.php/nuestra-escencia">
            <img src="/web/images/menus/menu-nuestra-esencia-hover.png" alt="Nuestra Escencia">
          </a>
      </li>
      <li class="sp-menu-item">
          <a class="menu-hover" href="/web/index.php/fresh-perfum">
              <img src="/web/images/menus/menu-tu-esencia.png" alt="Tu esencia">
          </a>
      </li>
      <li class="sp-menu-item">
          <a class="" href="/web/index.php/esencias">
              <img src="/web/images/menus/menu-esencias.png" alt="Esencias">
          </a>
      </li>
</ul>