Foros del Web » Creando para Internet » CSS »

Div oculto que se despliega dentro de una lista¿?

Estas en el tema de Div oculto que se despliega dentro de una lista¿? en el foro de CSS en Foros del Web. Esto más que una duda, es directamente preguntar cómo podría hacerse. Veamos tengo un menú vertical normal de CSS hecho a partir de una lista. ...
  #1 (permalink)  
Antiguo 10/08/2010, 07:30
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Div oculto que se despliega dentro de una lista¿?

Esto más que una duda, es directamente preguntar cómo podría hacerse. Veamos tengo un menú vertical normal de CSS hecho a partir de una lista. Y la idea es que al hacer click sobre cada botón del menú, en lugar de ir a otra página, se despliegue un div con contenido oculto (y si había otro desplegado que vuelva a ocultarse).

He tratado de hacerlo pero se me descuajeringa todo el invento al meterle el div entre los <li> cosa que supongo no no se hace ni de broma pero es que sino no se me ocurre cómo podría hacerse.

Espero haberme explicado bien.

¿Alguna idea?

Muchas gracias por adelantado ^
  #2 (permalink)  
Antiguo 10/08/2010, 09:16
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Div oculto que se despliega dentro de una lista¿?

hola pann84...

necesariamente tienen q ser listas?? x q puedes crear una estructura algo asi...

Código CSS:
Ver original
  1. <div class="vlist" id="panel">
  2.         <div class="vhead">Item 01</a></div>
  3.         <div class="body">
  4.          <a href="#">Sub-Item 1.1</a>
  5.          <a href="#">Sub-Item 1.2</a>
  6.          <a href="#">Sub-Item 1.3</a>  
  7.         </div>
  8.         <div class="vhead">Item 02</div>
  9.         <div class="vbody">
  10.             <a href="#">Sub-Item 2.1</a>
  11.          <a href="#">Sub-Item 2.2/a>
  12.          <a href="#">Sub-Item 2.3</a>  
  13.         </div>
  14.         <div class="vhead">item 03</div>
  15.         <div class="vbody">
  16.           <a href="#">Sub-Item 3.1</a>
  17.          <a href="#">Sub-Item 3.2</a>
  18.          <a href="#">Sub-Item 3.3</a>          
  19.        </div>
  20. </div>


y crear una funcion jquery para q se desplace con el efecto slideDown y slideup tu div vbody... pero obviamente tu vbody

tendria esta propiedad

.vbody {
display:none;
}

Saludos DTB...

PD:no todo lo pueden las hojas de estilo
  #3 (permalink)  
Antiguo 20/08/2010, 19:26
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Div oculto que se despliega dentro de una lista¿?

Hombre necesaria necesariamente no... es que es un menú y debe desplegarse un div con su contenido al pinchar, pero probaré con lo tuyo, de todos modos creo que sin nada de javascript va a ser complicado.
  #4 (permalink)  
Antiguo 20/08/2010, 20:19
Avatar de jackbach  
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Div oculto que se despliega dentro de una lista¿?

Hola pann84,

Si quieres que aparezca al clicklar, necesitarás javascript (puedes usar jQuery, por ejemplo). Si te conformas con que sea al pasar por encima puedes hacerlo solo con CSS.

Si es un menú haz una lista, como ya decías bien al principio del topic. Yo personalmente si veo bien el <div> dentro del <li>.

Si quieres que sea al pasar por encima, algo así podría funcionar. Si quieres que sea al clickar sería igual pero añadiendo unas pocas líneas de jQuery.
HTML:
Código HTML:
<ul>
  <li>Lorem<div>Texto escondido</div></li>
  <li>ABC<div>Otro texto escondido</div></li>
</ul> 
CSS:
Código HTML:
li {
  position: relative;
}
li div{
  position:absolute;
  display:none;
  top: 0;
  left: 50px;
}
li:hover div{
  display: block;
}
Suerte y hasta pronto
__________________
tinnta tutoriales sobre diseño y desarrollo web | detezzto muy muy pronto
  #5 (permalink)  
Antiguo 22/08/2010, 14:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div oculto que se despliega dentro de una lista¿?

Para que puedas ampliar usted directamente la información, es lo que se conoce como "navegación por pestañas", "active tabs" y similares.

Con css se podría emular, de hecho hay muchos ejemplos. La cuestión es que todo el contenido ha de cargarse en la primera carga de la página, así que eso podría resultar un handicap en según qué situaciones
Hay varios ejemplos en www.araudi.net
Aquí una realización funcionando al :hover (y no persistente). Sólo como ejemplo.

Pero lo más habitual es realizarlo con ayuda de algún js (mootools, jQuery, etc)
Las ventajas, entre otras, es que la carga de lo "oculto" se realiza bajo demanda. También que puede añadir efectos visuales a la presentación/transición.

Mikmoro tiene alguna realización en araudi.net.
En http://jquerylist.com/ seguramente encontrará algún ejemplo.

Espero que estas breces pinceladas le orienten a usted.

P.D.: TheDark03 y jackbach:
Seguramente hubo algo que les impidió probar sus códigos antes de publicarlos
  #6 (permalink)  
Antiguo 22/08/2010, 20:52
Avatar de jackbach  
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Div oculto que se despliega dentro de una lista¿?

Cita:
Iniciado por kseso? Ver Mensaje
P.D.: TheDark03 y jackbach:
Seguramente hubo algo que les impidió probar sus códigos antes de publicarlos
Mi codigo funciona perfectamente. Quizás algo te impidió probarlo a ti?

És más, creo que mi código es muy ilustrartivo ya que está simplificado al máximo...
__________________
tinnta tutoriales sobre diseño y desarrollo web | detezzto muy muy pronto
  #7 (permalink)  
Antiguo 23/08/2010, 02:19
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Div oculto que se despliega dentro de una lista¿?

Creo que no me he explicado bien, no trato de hacer una navegación por pestañas. Intentaré ser más gráfica, esta es la imagen que me pasó el diseñador, es un menú normal, vertical, que cuando haces click se pone en negrita con fondo blanco y se expande para ampliar información, cómo se ve en la imagen (haced click para verlo bien):
[URL=http://www.imaxenes.com/imagen/sin_t_tulo_11xl170i.jpg.html][IMG]http://www.imaxenes.com/mini/sin_t_tulo_11xl170i.jpg[/IMG][/URL]

El tema sería que en ese menú, al hacer click en cualquiera de los cursos disponibles, se expandiese como en la foto.

Digamos que este es el código básico sobre el que quiero hacer el efecto, he logrado introducir un div en los li que se oculta pero, dentro de ese div, no me permite hacer mas divs ni jugar con el estilo. A ver si podéis ayudarme

HTML
Código:
 <ul class="c2Ul">
            <li><a href="#">Instalador autorizado de gas categor&iacute;a B.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Nuevo reglamento de distribuci&oacute;n y utilizaci&oacute;n de gas.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Soldadura semiautom&aacute;tica mig/mag.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Instalador autorizado de gas categor&iacute;a A.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Nuevo reglamento de distribuci&oacute;n y utilizaci&oacute;n de gas.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
          </ul>
        </div>
CSS
Código:
.c2Ul li div { 
  position: relative;
  display: none;
}
.c2Ul li:hover div {
	display: block;
	background: #fff;
    height: 60px;
    width: 325px;
}
.hL {
	display: block;
	width: 250px;
	height: 60px;
	float: left;
	background: #99F;
}
.hR {
	display: block;
	width: 75px;
	height: 60px;
	float: left;
	background: #F9F;
}

.c2Ul {
	margin-top: 25px;
}
.c2Ul li {
	display: block;
	border-bottom: 1px solid #ccc;
	margin: 15px 52px 2px 0;
	width: 325px;
	padding-left: 20px;
	height: auto;
	background: url(../img/vineta_c2.png) 1% 1% no-repeat;
}
.c2Ul li a{
	text-decoration: none;
	color: #333;
	font-family: Helvetica, sans-serif, Arial;
	font-size: 1.0em;
}
.c2Ul li:hover{
	font-weight: bold;
	background: url(../img/vineta_white.png) 1% 1% no-repeat;
}

Última edición por pann84; 23/08/2010 a las 04:35
  #8 (permalink)  
Antiguo 23/08/2010, 08:36
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Div oculto que se despliega dentro de una lista¿?

mmmm, creo que hay que ser "mas graficos" desde que se hace la cuestion para asi, poderte ayudar mejor, pero bueno, viendo la imagen adjunta supongo que necesitas un Menu acordeon
  #9 (permalink)  
Antiguo 23/08/2010, 12:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div oculto que se despliega dentro de una lista¿?

Romperé mi propósito de no hacer códigos, pero como antes mencioné que alguno no había sido probado (y me refería a que por escueto era improbable que cubriese las necesidades planteadas):

Planteado desde la perspectiva de hacerlo lo más semántico posible y evitar el uso excesivo y abusivo de los div´s. Aunque habrá quien con razón, disienta del uso que hago de las listas de definición.

Como verás, hay una lista de definición /dl/ para los detalles de cada oferta y una lista sin orden /ul/ para los enlaces para ampliar información. Eso favorece el poder actuar sobre cada una de las dos listas y sus elementos.

No contemplo compatibilidad con navegadores (o sus versiones) obsoletas. Tampoco verificado con múltiples navegadores. Es sólo una forma de cómo se podría enfocar.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5.  
  6. <style type="text/css">
  7. * {margin: 0; padding: 0; outline: 0; position: relative;}
  8. #oferta {list-style-type:none; margin:0 0 10px; padding-left:20px; width:350px; border-bottom:1px solid #cce;}
  9. #oferta li {display:block; padding:0; margin:0;}
  10. #oferta li a, #oferta li a:visited {display:block; text-decoration:none;}
  11. #oferta li dd, #oferta li ul.ampliarinfo {display:none;}
  12. #oferta li:hover dt a {color:#222; }
  13. #oferta li:hover dd, #oferta li a:hover dd, #oferta li:hover ul, #oferta li a:hover ul {display:block;}
  14. #oferta dt {margin:0; padding: 0; font-size: 1.1em; font-weight: 100; border-top:1px solid #cce;}
  15. #oferta dd {margin:0; padding-left: 20px; font-size: 1em; text-align:left; }
  16. #oferta dd span {display:block; padding-left: 40px; margin-bottom: 15px; font-size: .9em;}
  17. #oferta li:hover dt {font-size: 1em; font-weight: 700;}
  18. .expandido dt a, .expandido dt a:visited {display:block; color:#777; padding:5px 5px 0 0;}
  19. .expandido dd, .expandido dd a, .expandido dd a:visited {color:#0094F0; text-decoration:none; display:block;}
  20. #oferta li ul.ampliarinfo {position: absolute; right: 0; bottom: 0; text-align: right; font-size: .7em;}
  21. #oferta li ul.ampliarinfo a { display: block; color:#00949F;}
  22. #oferta li ul.ampliarinfo a:hover {text-decoration: underline; color:#444}
  23. </head>
  24.     <ul id="oferta">
  25.       <li>
  26.         <dl class="expandido">
  27.              <dt><a href="#">Instalador autorizado de gas categor&iacute;a B.</a></dt>
  28.                <dd>Duración: 80horas</dd>
  29.                <dd>Fechas: marzo-julio de 2010</dd>
  30.                <dd>Horario: de 19h a 21h
  31.                    <span>lunes, Xles y viernes</span>
  32.                </dd>
  33.         </dl>
  34.           <ul class="ampliarinfo">
  35.              <li><a href="#" title="el titulo">+info</a></li>
  36.              <li><a href="#" title="inscripción">inscripción</a></li>
  37.              <li><a href="#" title="compartir">compartir</a></li>
  38.          </ul>
  39.       </li>
  40.       <li>
  41.         <dl class="expandido">
  42.            <dt><a href="#">Nuevo reglamento de distribución de gas</a></dt>
  43.              <dd>Duración: 80horas</dd>
  44.              <dd>Fechas: marzo-julio de 2010</dd>
  45.              <dd>Horario: de 19h a 21h
  46.                <span>lunes, Xles y viernes
  47.                </span>
  48.            </dd>
  49.         </dl>
  50.         <ul class="ampliarinfo">
  51.            <li><a href="#" title="el titulo">+info</a></li>
  52.            <li><a href="#" title="inscripción">inscripción</a></li>
  53.            <li><a href="#" title="compartir">compartir</a></li>
  54.         </ul>
  55.       </li>
  56.       <li>
  57.         <dl class="expandido">
  58.            <dt><a href="#">Soldadura semiatumática mig/max</a></dt>
  59.              <dd>Duración: 80horas</dd>
  60.              <dd>Fechas: marzo-julio de 2010</dd>
  61.              <dd>Horario: de 19h a 21h
  62.                <span>lunes, Xles y viernes</span>
  63.            </dd>
  64.         </dl>
  65.         <ul class="ampliarinfo">
  66.           <li><a href="#" title="el titulo">+info</a></li>
  67.           <li><a href="#" title="inscripción">inscripción</a></li>
  68.           <li><a href="#" title="compartir">compartir</a></li>
  69.         </ul>
  70.       </li>
  71.       <li>
  72.         <dl class="expandido">
  73.           <dt><a href="#">Instalador autorizado de gas categoría A</a></dt>
  74.             <dd>Duración: 80horas</dd>
  75.             <dd>Fechas: marzo-julio de 2010</dd>
  76.             <dd>Horario: de 19h a 21h
  77.               <span>lunes, Xles y viernes</span>
  78.             </dd>
  79.         </dl>
  80.         <ul class="ampliarinfo">
  81.           <li><a href="#" title="el titulo">+info</a></li>
  82.           <li><a href="#" title="inscripción">inscripción</a></li>
  83.           <li><a href="#" title="compartir">compartir</a></li>
  84.         </ul>
  85.       </li>
  86.     </ul>
  87. </body>
  88. </html>

Espero que eso fuese lo que se busca.
Y como decía, no es la respuesta exacta a la duda, sino una idea de cómo se podría enfocar. Código css sin depurar.

Atentamente

P.D.: Como verás, va en la línea que sugirió Alexk, sin js para el despliegue (que podría hacerse con css3 con sus advertencias oportunas) y algo diferente en lo que es la anidación de elementos.
  #10 (permalink)  
Antiguo 23/08/2010, 12:51
Avatar de xcoltx  
Fecha de Ingreso: diciembre-2008
Mensajes: 65
Antigüedad: 9 años
Puntos: 0
Respuesta: Div oculto que se despliega dentro de una lista¿?

Hola amiga.. mira yo hice hace un tiempo algo que creo que te pueda funcionar... aunque uso jquery .. espero que puedas entender el ejemplo.

Código Javascript:
Ver original
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.    
  5.     $("a[id^='itemp']").click(function(){
  6.         $(this).siblings("ul").slideToggle("normal");
  7.         });
  8. });
  9. </script>


Código HTML:
Ver original
  1. <ul>
  2. <li><a id="itemp1" href="#">ITEM 1</a>
  3.     <ul style="display:none;">
  4.     <li><a id="itemh11" href="index.php?sec=11">Sub_Item 11</a></li>
  5.     <li><a id="itemh12" href="index.php?sec=12">Sub_Item 12</a></li>
  6.     </ul>
  7. </li>
  8.                
  9. <li><a id="itemp2" href="#">ITEM 2</a>
  10.     <ul style="display:none;">
  11.     <li><a id="itemh21" href="index.php?sec=21">Sub_Item 21</a></li>
  12.     <li><a id="itemh22" href="index.php?sec=22">Sub_Item 22</a></li>
  13.     </ul>
  14. </li>
  15. </ul>

Aca al hacer click en un item de lista... se muestra otra sublista con los subitemes.
__________________
http://www.acomodate.cl
  #11 (permalink)  
Antiguo 24/08/2010, 03:49
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Div oculto que se despliega dentro de una lista¿?

Cierto, debería haberme explicado mejor de antemano, lo siento pero es que más que una solución concreta buscaba aprender en general a hacerlo. Con lo que me habéis puesto me he hecho una idea bastante clara de como va y aunque ando experimentando ahora mismo con el código, me esta saliendo todo correctamente.

Muchas gracias a todos por molestaros e incluso ponerme vuestro código ^^

Etiquetas: lista, oculto
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 11:34.