menu vertical 3 niveles

raikkonen83 · #1 (**permalink**) 17/05/2010, 00:52

buenos dias

He estado buscando y no he conseguido encontrar ninguna solucion q se ajuste al problema q tengo.

He de hacer un menu vertical con 3 niveles. una cosa asi:

opcion1
opcion 1.1
opcion 1.1.1
opcion 1.1.2
opcion 1.2
opcion 2
opcion 2.1
opcion 2.1.1
opcion 2.1.2

y asi sucesivamente. El menu sera dinamico y el 3er nivel no se deberia mostrar por defecto, solamente al clicar sobre su segundo nivel ( por ejemplo, opcion 1.1.1 y opcion 1.1.2 no deberian mostrarse por defecto, sino solo cuando se pulsara sobre opcion 1.1)

Agradeceria mucho algun tipo de solucion a este problema o muy cercana a esta.

Muchas gracias

Adler · #2 (**permalink**) 17/05/2010, 05:04

Hola

A ver si es esto lo que buscas

Código Javascript:

Ver original<!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">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
.selsub {color:#FFF555;}
.noselsub {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function versubmenu(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);
 
obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';
 
    if ((visto_subm != null) && (visto_color != null)) {
        visto_subm.className = 'ocultar';
        visto_color.className = 'nosel';
    }
//alert (visto_subm + " - " + visto_color)
//alert (obj + " - " + objhl)
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
 
 
var visto_subsubm = null;
var visto_colorSUB = null;
function versubsubmenu(num) {
objhl = document.getElementById(num);
obj = document.getElementById(num + "sub");
obj.className = (obj==visto_subsubm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_colorSUB) ? 'noselsub' : 'selsub';
 
    if ((visto_subsubm != null) && (visto_colorSUB != null)) {
        visto_subsubm.className = 'ocultar';
        visto_colorSUB.className = 'noselsub';
    }
 
visto_subsubm = (obj==visto_subsubm) ? null : obj;
visto_colorSUB = (obj==visto_colorSUB) ? null : objhl;
}
</script>
<head>
</head>
<body>
<div id="0" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU0</div>
<div id="sub0" class="ocultar" style="z-index:1;">
<div id="s00" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="s00sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="s01" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="s01sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>
 
 
<div id="1" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU1</div>
<div id="sub1" class="ocultar" style="z-index:1;">
<div id="s10" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="s10sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="s11" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="s11sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>
 
 
<div id="2" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU2</div>
<div id="sub2" class="ocultar" style="z-index:1;">
<div id="s20" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="s20sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="s21" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="s21sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>
 
 
<div id="3" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU3</div>
<div id="sub3" class="ocultar" style="z-index:1;">
<div id="s30" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="s30sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="s31" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="s31sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>
 
</body>
</html>

Suerte