Lunes, 13 Junio 2011 20:30

Agregar iconos al menu de una plantilla

Escrito por 
CMS:  Joomla! |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  15 minutos


iconos menuEn este artículo veremos una manera práctica de agregar iconos a los items de menú de la plantilla.

Se utilizará código javascript para agregar los iconos al menú, editando un archivo javascript existente de la plantilla; la plantilla que se usará es la plantilla yourshop, pero la lógica y código puede ser aplicado a cualquier tipo de plantilla.

 

Descarga el código javascript e iconos

 

1- Generalidades

Trabajaremos con el template yourshop de la empresa gavick , pero en realidad la lógica puede aplicarse para cualquier template que tenga un menú superior o lateral.

Inicialmente nuestro menú de template lucirá como se aprecia en la siguiente imagen

 

2- Buscando el archivo .js

Necesitamos localizar un archivo javascript del template, que se cargue en todas las páginas, para agregar nuestro código. Ubicamos el archivo /templates/gk_yourshop/js/domready_fix.js

En caso de no existir un archivo javascript, será necesario hacer una referencia desde el template a un archivo nuevo.

 

3- Copiando las imágenes y el código adicional

Primero necesitamos copiar las imágenes en alguna ruta de nuestro sitio web, para este ejemplo utilizaremos la siguiente ruta /images/stories/

Luego agregamos el siguiente código a nuestro archivo javascript localizado anteriormente.

Tener en cuenta que para este ejemplo los ids de menú localizados son #menu70 y #menu1, si se tratase de una clase sería .menu70 y .menu71, etc.

window.addEvent('domready',function(){

ponerIconoMenu("#menu70",'/images/stories/heart_32.png');

ponerIconoMenu("#menu1",'/images/stories/home_32.png');

});

 

function ponerIconoMenu(id, rutaicono){

var img = new Element('img',{'src':rutaicono, 'style':'margin-top:5px;'});

img.injectTop($(id + ' span span')[0]);

}

4- Resultado Final

Finalmente obtenemos los íconos en los items de menú, tal como se aprecia en la siguiente imagen:

 

En el siguiente video se explica cómo agregar los íconos al menú de un template siguiendo los pasos anteriormente descritos:

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop