Foros del Web » Creando para Internet » CSS »

Color asignado a menu secundario

Estas en el tema de Color asignado a menu secundario en el foro de CSS en Foros del Web. Tengo un menu secundario, que se muestra cuando el mouse pasa por arriba del menu primario. Y para ese menu tengo un color asignado, pero ...
  #1 (permalink)  
Antiguo 19/02/2010, 09:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Color asignado a menu secundario

Tengo un menu secundario, que se muestra cuando el mouse pasa por arriba del menu primario. Y para ese menu tengo un color asignado, pero el color recién se carga después de un segundo de posar el mouse sobre el desplegable.

En realidad, en menu primario es todo un renglon, y existe un menu secundario para cada item de ese renglon.

El css que asigna el fondo es este:

Cita:
/* background images */

#menu ul li.uno ul,#menu ul li.uno li a {}
#menu ul li.dos ul,#menu ul li.dos li a {background: url(../filtros/azul.png) repeat}
#menu ul li.tres ul,#menu ul li.tres li a {background: url(../filtros/dorado.png) repeat;}
#menu ul li.cuatro ul,#menu ul li.cuatro ul li a {background: url(../filtros/v.20/rosa.png) repeat}
#menu ul li.cinco ul ,#menu ul li.cinco ul li a {background: url(../filtros/blanco.png) repeat;}
#menu ul li.seis ul ,#menu ul li.seis ul li a {background: url(../filtros/verde.png) repeat}
#menu ul li.siete ul,#menu ul li.siete li a {background: url(../filtros/naranja.png) repeat}
#menu ul li.ocho ul ,#menu ul li.ocho li a {background: url(../filtros/violeta.png) repeat}
Link a la pagina, aqui.

Les agradecería comentarios.
  #2 (permalink)  
Antiguo 19/02/2010, 10:40
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Color asignado a menu secundario

Es porque las imágenes sólo se cargan a la hora de mostrarlas, una forma de solucionar el problema es usando sprites.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 19/02/2010, 11:45
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Color asignado a menu secundario

Gracias David. Estuve leyendo la nota. Entiendo que eso es muy util para un primer renglón. Pero en cuanto a los desplegables, parece que van a tener que cargar su imagen recién cuando se despliguen.

Supongo que un menu secundario con un color simple se cargaría rápido. Pero mi tema es que necesito que el color de fondo tenga transparencia, y por eso uso .png

Estoy intentando un hack con javascript en estos momento. Si tienen alguna otra pista, por favor cuentenme.
  #4 (permalink)  
Antiguo 19/02/2010, 11:49
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Color asignado a menu secundario

Si entiendes la técnica, no va a haber problemas en aplicarlo a tu menú. No necesitas crear imágenes para cada elemento, sólo lo que vas a necesitar son los backgrounds (ya que el texto no necesita estar en la imagen) unidos en una única imagen.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 19/02/2010, 11:59
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Color asignado a menu secundario

Pero y que hay de esto?

Cita:
Es porque las imágenes sólo se cargan a la hora de mostrarlas
Es decir, al cargar la pagina, mi menú secundario está escondido. Y tiene imagenes. Y aunque le pusiera una imagen sprit, seguiría siendo imagen. O de que me estoy perdiendo? Nunca usé sprits.
  #6 (permalink)  
Antiguo 19/02/2010, 12:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Color asignado a menu secundario

Y que tal si cargo las imagenes también en un div que esté fuera de pantalla? Al mostrar el menú secundario se haría una consulta al servidor o se usarían rápidamente las mismas imagenes que cargué en otro div?
  #7 (permalink)  
Antiguo 19/02/2010, 12:04
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Color asignado a menu secundario

La gracia está en que vas usar una única imagen tanto para los botones iniciales (las que se muestran al cargar la página) como para los botones que se muestran al desplegar. Sólo que en cada una vas a mostrar diferentes partes de la misma imagen.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 19/02/2010, 12:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Color asignado a menu secundario

Si, ya entendí. Si cargo la imagen para el menu primario, queda en memoria, y el menú secundario la tiene ya servida, y no necesita conectarse al servidor. Ergo, no hay tiempo de espera. Genial!

Ahora estoy sin ganas de editar los .png, así que usé un div con position absolute, y con una serie de spans que cargan todas las imagenes que necesito. El div está fuera de pantalla así que la única función que cumple es "precargar" los .ong

Muchas gracias David! Estuve tres meses sin resolver esto.

Este es el codigo:

Cita:
<div id="iris">
<span class="dos"></span>
<span class="tres"></span>
<span class="cuatro"></span>
<span class="cinco"></span>
<span class="seis"></span>
<span class="siete"></span>
<span class="ocho"></span>
</div>
Cita:
/* background images */

#menu ul li.uno ul,#menu ul li.uno li a {}
#iris span.dos,#menu ul li.dos ul,#menu ul li.dos li a {background: url(../filtros/azul.png) repeat}
#iris span.tres,#menu ul li.tres ul,#menu ul li.tres li a {background: url(../filtros/dorado.png) repeat;}
#iris span.cuatro,#menu ul li.cuatro ul,#menu ul li.cuatro ul li a {background: url(../filtros/v.20/rosa.png) repeat}
#iris span.cinco,#menu ul li.cinco ul ,#menu ul li.cinco ul li a {background: url(../filtros/blanco.png) repeat;}
#iris span.seis,#menu ul li.seis ul ,#menu ul li.seis ul li a {background: url(../filtros/verde.png) repeat}
#iris span.siete,#menu ul li.siete ul,#menu ul li.siete li a {background: url(../filtros/naranja.png) repeat}
#iris span.ocho,#menu ul li.ocho ul ,#menu ul li.ocho li a {background: url(../filtros/violeta.png) repeat}

#iris span{
padding: 8px;
position: absolute;
top: -100px
}

Etiquetas: color, secundario, asignar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.