Div oculto que se despliega dentro de una lista¿?

[pann84]

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 ^

[TheDark03]

hola pann84...

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

Código CSS:

<div class="vlist" id="panel">
        <div class="vhead">Item 01</a></div>
        <div class="body">
         <a href="#">Sub-Item 1.1</a>
         <a href="#">Sub-Item 1.2</a>
         <a href="#">Sub-Item 1.3</a>   
        </div>
        <div class="vhead">Item 02</div>
        <div class="vbody">
            <a href="#">Sub-Item 2.1</a>
         <a href="#">Sub-Item 2.2/a>
         <a href="#">Sub-Item 2.3</a>   
        </div>
        <div class="vhead">item 03</div>
        <div class="vbody">
          <a href="#">Sub-Item 3.1</a>
         <a href="#">Sub-Item 3.2</a>
         <a href="#">Sub-Item 3.3</a>           
       </div>
</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

[pann84]

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.

[jackbach]

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

[kseso?]

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

[jackbach]

Iniciado por kseso?

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...

[pann84]

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;
}

[alexk]

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

[kseso?]

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
 
<style type="text/css">
* {margin: 0; padding: 0; outline: 0; position: relative;}
#oferta {list-style-type:none; margin:0 0 10px; padding-left:20px; width:350px; border-bottom:1px solid #cce;}
#oferta li {display:block; padding:0; margin:0;}
#oferta li a, #oferta li a:visited {display:block; text-decoration:none;}
#oferta li dd, #oferta li ul.ampliarinfo {display:none;}
#oferta li:hover dt a {color:#222; }
#oferta li:hover dd, #oferta li a:hover dd, #oferta li:hover ul, #oferta li a:hover ul {display:block;}
#oferta dt {margin:0; padding: 0; font-size: 1.1em; font-weight: 100; border-top:1px solid #cce;}
#oferta dd {margin:0; padding-left: 20px; font-size: 1em; text-align:left; }
#oferta dd span {display:block; padding-left: 40px; margin-bottom: 15px; font-size: .9em;}
#oferta li:hover dt {font-size: 1em; font-weight: 700;}
.expandido dt a, .expandido dt a:visited {display:block; color:#777; padding:5px 5px 0 0;}
.expandido dd, .expandido dd a, .expandido dd a:visited {color:#0094F0; text-decoration:none; display:block;}
#oferta li ul.ampliarinfo {position: absolute; right: 0; bottom: 0; text-align: right; font-size: .7em;}
#oferta li ul.ampliarinfo a { display: block; color:#00949F;}
#oferta li ul.ampliarinfo a:hover {text-decoration: underline; color:#444}
</style>
</head>
<body>
    <ul id="oferta">
      <li>
        <dl class="expandido">
             <dt><a href="#">Instalador autorizado de gas categor&iacute;a B.</a></dt>
               <dd>Duración: 80horas</dd>
               <dd>Fechas: marzo-julio de 2010</dd>
               <dd>Horario: de 19h a 21h
                   <span>lunes, Xles y viernes</span>
               </dd>
        </dl>
          <ul class="ampliarinfo">
             <li><a href="#" title="el titulo">+info</a></li>
             <li><a href="#" title="inscripción">inscripción</a></li>
             <li><a href="#" title="compartir">compartir</a></li>
         </ul>
      </li>
      <li>
        <dl class="expandido">
           <dt><a href="#">Nuevo reglamento de distribución de gas</a></dt>
             <dd>Duración: 80horas</dd>
             <dd>Fechas: marzo-julio de 2010</dd>
             <dd>Horario: de 19h a 21h
               <span>lunes, Xles y viernes
               </span>
           </dd>
        </dl>
        <ul class="ampliarinfo">
           <li><a href="#" title="el titulo">+info</a></li>
           <li><a href="#" title="inscripción">inscripción</a></li>
           <li><a href="#" title="compartir">compartir</a></li>
        </ul>
      </li>
      <li>
        <dl class="expandido">
           <dt><a href="#">Soldadura semiatumática mig/max</a></dt>
             <dd>Duración: 80horas</dd>
             <dd>Fechas: marzo-julio de 2010</dd>
             <dd>Horario: de 19h a 21h
               <span>lunes, Xles y viernes</span>
           </dd>
        </dl>
        <ul class="ampliarinfo">
          <li><a href="#" title="el titulo">+info</a></li>
          <li><a href="#" title="inscripción">inscripción</a></li>
          <li><a href="#" title="compartir">compartir</a></li>
        </ul>
      </li>
      <li>
        <dl class="expandido">
          <dt><a href="#">Instalador autorizado de gas categoría A</a></dt>
            <dd>Duración: 80horas</dd>
            <dd>Fechas: marzo-julio de 2010</dd>
            <dd>Horario: de 19h a 21h
              <span>lunes, Xles y viernes</span>
            </dd>
        </dl>
        <ul class="ampliarinfo">
          <li><a href="#" title="el titulo">+info</a></li>
          <li><a href="#" title="inscripción">inscripción</a></li>
          <li><a href="#" title="compartir">compartir</a></li>
        </ul>
      </li>
    </ul>
</body>
</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.

[xcoltx]

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:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    $("a[id^='itemp']").click(function(){
        $(this).siblings("ul").slideToggle("normal");
        }); 
});
</script>
 

Código HTML:

<ul>
<li><a id="itemp1" href="#">ITEM 1</a>
    <ul style="display:none;">
    <li><a id="itemh11" href="index.php?sec=11">Sub_Item 11</a></li>
    <li><a id="itemh12" href="index.php?sec=12">Sub_Item 12</a></li>
    </ul>
</li>
                
<li><a id="itemp2" href="#">ITEM 2</a>
    <ul style="display:none;">
    <li><a id="itemh21" href="index.php?sec=21">Sub_Item 21</a></li>
    <li><a id="itemh22" href="index.php?sec=22">Sub_Item 22</a></li>
    </ul>
</li>
</ul>
 

Aca al hacer click en un item de lista... se muestra otra sublista con los subitemes.

[pann84]

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 ^^