En este artículo veremos cómo cambiar la apariencia de un ítem de menú de un sitio web Joomla con el objeto de destacarlo y sea más llamativo para el usuario final.
Veremos cómo realizar este procedimiento con sitios web de ejemplo utilizando algunas plantillas comerciales de los packs webempresa (el proceso es similar en otro tipo de plantilla), utilizaremos el firebug para localizar y cambiar los estilos, para aprender cómo utilizar firebug revisa el artículo : Usando Firebug para modificar la apariencia de una plantilla Joomla
Generalidades
Son las plantillas quienes crean el menú principal de nuestro sitio y estas definen la estructura, sin embargo Joomla nos ofrece flexibilidad al crear los ítems de menú y podemos identificarlos de manera única lo cual nos permitirá destacar alguno de ellos.
Menú de Pack Tienda/Empresa Black&White
Utilizamos el siguiente código haciendo referencia al ítem de menú con identificador menu541
/*Cambio general de fondo*/
#menu541{
background:red!important;
}
/*cuando el mouse esta sobre el ítem*/
#menu541:hover{
background:transparent!important;
}
Menú de Pack Tienda Boutique
Haciendo referencia al identificador de la lista #gkDropMain541 y luego al ítem y al texto
#gkDropMain541 a span{
background:red;
padding:4px;
margin-top:-4px;
}
/*cuando el mouse esta sobre*/
#gkDropMain541 a span:hover{
background:transparent;
}
/*agregado para cuando el item esta activo*/
#gkDropMain541 a.active span{
background:transparent!important;
}
Menú de Pack Tienda Esport
En este template localizamos el ítem de menú con id menu541
#menu541{
background:#CD4A2B;
color:white!important;
text-shadow:0 0 transparent!important;
}
/*cuando el mouse esta sobre el ítem*/
#menu541:hover{
background:transparent;
color:#CD4A2B!important;
}
/*agregado, cuando el ítem esta activo*/
#menu541.active{
background:transparent;
color:#CD4A2B!important;
}
Menú de Pack Reservas Music
En este caso trabajamos también con el ítem de menú, con id menu557
#menu557{
background:red;
}
/*cuando el mouse esta sobre el ítem*/
#menu557:hover{
background:transparent;
}
/*agregado para el ítem activo*/
#menu557.active{
background:transparent;
}
Menú de Pack Tienda Yourshop
En este caso este template incluye imágenes como fondos por lo que sólo destacaremos el texto
#menu541 span{
color:red;
}
/*cuando el mouse pasa sobre el ítem*/
#menu541 span:hover{
color:white;
}
/*agregado cuando el ítem esta activo*/
#menu541.active span{
color:white;
}
En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.