Foros del Web » Creando para Internet » CSS »

Ayuda menu desplegable

Estas en el tema de Ayuda menu desplegable en el foro de CSS en Foros del Web. Hola a todos nuevamente, necesito aver si alguien es tan amable y me puede explicar como hacer un menu desplegable, pero que NO salga para ...
  #1 (permalink)  
Antiguo 18/02/2011, 20:05
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 7 años, 6 meses
Puntos: 1
Ayuda menu desplegable

Hola a todos nuevamente, necesito aver si alguien es tan amable y me puede explicar como hacer un menu desplegable, pero que NO salga para el costado, sino que en el div donde esta se agrande, nose si entienden, les dejo un ejemplo para que vean. Aca http://www.onlysigs.com/ en la parte donde dice >> Recursos de PS y cuando pasas el mouse se abre el menu, y cuando lo sacas se cierra. Espero que me puedan ayudar :D Gracias
  #2 (permalink)  
Antiguo 18/02/2011, 20:36
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda menu desplegable

Puedes usar CSS.
Código CSS:
Ver original
  1. .oculto{ display:hidden; }
  2. .oculto:hover{ display:block; }
y una estructura HTML parecida a esta:
Código HTML:
Ver original
  1. <ul>
  2. <li>elemento1</li>
  3. <li>elemento2
  4.      <ul class="oculto">
  5.          <li>nivel2</li>
  6.      </ul>
  7. </li>
  8. </ul>
  #3 (permalink)  
Antiguo 19/02/2011, 03:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda menu desplegable

Hola:

En las FAQ's de CSS existen varios ejemplos de menús desplegables, échales un vistazo quizá alguno te sirva.

Saludos.

  #4 (permalink)  
Antiguo 20/02/2011, 10:24
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Ayuda menu desplegable

@sanxuan gracias por la ayuda, pero como podria hacer eso si yo tengo por ejemplo la opcion ">> Recursos de PS" en un div. Asi: <div class="opcionmenu">Recursos de PS</div> y para todas las otras opciones uso la misma class. Espero que me puedas ayudar

@jomaruro muchas gracias por los ejemplos, pero ya los habia visto y no los entiendo muy bien.


Gracias a ambos (:
  #5 (permalink)  
Antiguo 20/02/2011, 11:07
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda menu desplegable

Antes de nada perdón porque el ejemplo que te proporcioné pretendía sólo ser orientativo y lo escribí sobre la marcha sin pretender que fuese a funcionar. He mezclado sin querer dos maneras diferentes de ocultar elementos con CSS. He vuelto a leerlo y en realidad debería ser como sigue:
Código CSS:
Ver original
  1. .oculto ul{ visibility:hidden; }
  2. .oculto:hover ul{ visibility:visible; }
Código HTML:
Ver original
  1. <ul>
  2.   <li>elemento1</li>
  3.   <li class="oculto">elemento2
  4.      <ul >
  5.          <li>nivel2</li>
  6.      </ul>
  7.   </li>
  8. </ul>
Repito que no es un ejemplo para copiar, sólo pretende explicar la manera en que funcionan los desplegable. Seguro que necesitarás más propiedades y definir la estructura HTML que se ajuste a tu idea. Si sirve para que entiendas cómo funcionan otros ejemplos más completos me daré por contento.
Puedes añadir la clase oculto (usando el nombre que prefieras) a todas las opciones:
<div class="opcionmenu oculto">Recursos de PS</div>
o bien incluir las propiedades de oculto en las reglas .opcionmenu y .opcionmenu:hover respectivamente.
Te puse un ejemplo con listas desordenadas <ul>, donde las opciones del menú son etiquetas <li>, pero puedes usar otras como <div> en su lugar.
La explicación es sencilla. Hemos creado un código HTML con el contenido de nuestro desplegable. Ocultamos ese contenido con la propiedad visibility:hidden y cuando pasamos con el puntero del ratón sobre el elemento del menú ese contenido se hará visible con visibility:visible gracias a la pseudoclase :hover.

Última edición por sanxuan; 20/02/2011 a las 11:18
  #6 (permalink)  
Antiguo 21/02/2011, 07:07
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Ayuda menu desplegable

Gracias nuevamente por responder, hice lo que me dijiste poniendo en el css:
Código HTML:
#casas{
		margin: 2px;
		background-color: #f2f2f2;
		width: 120px;
		height: auto;
		border-color: #bdbdbd;
   		border-width: 1px;
  		border-style: solid;
}	
.oculto ul{ visibility:hidden; }
.oculto:hover ul{ visibility:visible; }
y en el html esto:
Código HTML:
 <div class="opmenu"><a href="#">Prueba</a></div>
	  <div id="casas" class="oculto">Prueba
	  		<ul>
				<div>prueba</div>
			</ul></div>
	  <div class="opmenu"><a href="#">Prueba</a></div> 
y me queda asi:

Osea la palabra se oculta, pero el div por mas que le ponga height: auto; no se achica al ocultarse, en la imagen 1 miras como se ve cuando pasas el mouse, y en la 2 cuando lo sacas, el div no se achica. Tambien donde dice <div>prueba</div> probe poniendo como me dijiste en los ejemplos vos, <li> pero igualmente sigue sin achicarse el div, espero que me puedas ayudar, disculpa por preguntar tanto. Gracias nuevamente.
  #7 (permalink)  
Antiguo 21/02/2011, 11:17
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda menu desplegable

Deberías repasar HTML. Si colocas la etiqueta <ul> debes incluir en ella un <li> para englobar el contenido. Si no usas <ul> puedes colocar un <div> dentro de otro sin más.
El ejemplo que te he puesto funciona como tu has dicho.
Cambiamos la visibilidad del elemento sin modificar la presentación de la página.
Para hacer un desplegable que desplace a otros elementos como en un control tipo acordeón, puedes usar la propiedad display.

Código CSS:
Ver original
  1. .oculto div{ display:none; }
  2. .oculto:hover div{ display:block; }

Código HTML:
Ver original
  1. <div class="oculto">
  2.     <div>Contenido oculto ... </div>
  3. </div>
  #8 (permalink)  
Antiguo 21/02/2011, 17:46
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Ayuda menu desplegable

Nuevamente muchas gracias, pude lograr lo que queria :D
+k

Etiquetas: desplegable
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 15:57.