Foros del Web - Ver Mensaje Individual - Como se llama este efecto en los textos??

IsaBelM · #7 (**permalink**) 15/05/2012, 07:03

este código esta montado usando radio, también tienes la posibilidad de usar checkbox. en ambos caso no obtendrás exactamente el mismo resultado que con javascript.

si usas radio, una vez que selecciones una opción, siempre tendrá que haber una abierta
si usas checkbox, se puede cerrar la opción seleccionada, pero permite que hay mas de una opción abierta

lo mejor es que lo pruebas y lo veas por ti mismo

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#opciones .control {
width: 0;
height: 0;
overflow: hidden;
position: absolute;
}

#opciones .control + div > label {
display: inline-block;
}

#opciones .control + div > div{
display: none;
}

#opciones .control:checked + div > label + div{
display: block;
}

#opciones .control:checked + div > label{
color: red;
}
</style>
</head<
<body>

<div id="opciones">

<input type="radio" name="c" id="opt1" class="control" />
<div>
<label for="opt1">MENU 1</label>
<div>
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
</div>

<input type="radio" name="c" id="opt2" class="control" />
<div>
<label for="opt2">MENU 2</label>
<div>
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
</div>

<input type="radio" name="c" id="opt3" class="control" />
<div>
<label for="opt3">MENU 3</label>
<div>
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
</div>

<input type="radio" name="c" id="opt4" class="control" />
<div>
<label for="opt4">MENU 4</label>
<div>
SubMenu4<br />
SubMenu4<br />
SubMenu4
</div>
</div>

</div>
</body>
</html>