Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Joomla »

Submenú con esquinas redondeadas

Estas en el tema de Submenú con esquinas redondeadas en el foro de Joomla en Foros del Web. Hola a todos. Estoy montando una plantilla y me he encontrado con un problema que me trae de cabeza y me gustaría resolver. Tengo un ...
  #1 (permalink)  
Antiguo 16/12/2009, 04:27
 
Fecha de Ingreso: noviembre-2009
Mensajes: 29
Antigüedad: 10 años, 11 meses
Puntos: 1
Submenú con esquinas redondeadas

Hola a todos. Estoy montando una plantilla y me he encontrado con un problema que me trae de cabeza y me gustaría resolver. Tengo un menú horizontal en el header que se despliega en vertical:

Código:
<div id="header">
	<jdoc:include type="modules" name="top"/>
</div>
El submenú que se despliega tiene un gráfico de fondo de altura suficiente para adaptarse a las subopciones que haya y que queda cortado por la parte superior. Este gráfico tiene las esquinas de abajo redondeadas:

Código:
.artmenu > li:hover ul {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url('../images/submenubg.png');
	padding: 0 0 10px 0; 
	margin: 0;
	z-index: 5000;
}
Me gustaría saber si hay alguna manera de poner otra imagen en el fondo del submenú de manera que remate la parte superior también con esquinas redondeadas, si es posible evitando el uso de librerías javascript, únicamente con css. Muchas gracias de antemano y un saludo.

Última edición por SBeto; 16/12/2009 a las 04:35
  #2 (permalink)  
Antiguo 19/12/2009, 12:38
Avatar de mrsorpresa  
Fecha de Ingreso: enero-2008
Mensajes: 323
Antigüedad: 12 años, 9 meses
Puntos: 6
Respuesta: Submenú con esquinas redondeadas

¿Podrías poner un enlace al sitio, o una captura de pantalla?
  #3 (permalink)  
Antiguo 19/12/2009, 22:23
Avatar de Larenz
Colaborador
 
Fecha de Ingreso: enero-2007
Ubicación: Nicaragua
Mensajes: 1.398
Antigüedad: 13 años, 9 meses
Puntos: 55
Respuesta: Submenú con esquinas redondeadas

Crea una imagen redondeada y reemplaza la vieja imagen por la nueva. O simplemente llama a la nueva imagen:

Código:
.artmenu > li:hover ul {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url('../images/NUEVAIMAGEN.png');
	padding: 0 0 10px 0; 
	margin: 0;
	z-index: 5000;
}
__________________
¡No lo sé todo! Pero comencé como tú, ¡sin saber nada!
Encuéntrame en Facebook: Perfil + Página
  #4 (permalink)  
Antiguo 21/12/2009, 04:01
 
Fecha de Ingreso: noviembre-2009
Mensajes: 29
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: Submenú con esquinas redondeadas

Gracias por la ayuda pero al final logré resolverlo gracias a la pseudo-clase first-child, de manera que al primer elemento de cada submenú le pongo de fondo la imagen que remata la parte superior con las esquinas redondeadas. De esta manera tengo un submenú con una imagen de fondo que se adapta en altura a las opciones que haya. La imagen que permite la altura variable queda definida tal y como la había hecho en principio:

Código:
.artmenu > li:hover ul {
	background-position: bottom left;
	background-repeat: no-repeat;
	background-image: url('../images/ddbg.png');
	padding: 0 0 10px 0; /*los 10px son el hueco para el remate superior*/
	margin: 0 0 0 0;
	z-index: 5000;
	display: inline;	
}
Y el remate de la parte superior queda definido como sigue:

Código:
.artmenu ul li:first-child {
	background-image: url('../images/submenubg_top.png');
	background-repeat: no-repeat;
	background-position: top left;
	margin: -10px 0 0 0; /*los 10px son la altura de la imagen*/
	padding-top: 10px; /*los 10px son la altura de la imagen*/
}
Gracias y un saludo
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 04:43.