Cita:
Iniciado por Mikmoro 
Nada, echándole un poco de imaginación, viendo cuál era el problema de lo que tú tenías y cómo resolverlo. Ya conocía jquery, y en su página tiene muchísima información. Y sí, creo que es realmente potente; tiene mil cosas para hacer.
Fíjate bien en el archivo neodani.js para ver qué tendrás que cambiar cuando modifiques el menú. Y como yo sé poco de javascript, si encima sabes cómo iterar por los elementos igual hasta te ahorras unas cuantas líneas de código.
Saludos.
Dejando de lado el tema del codigo CSS, me pregunto otra vez porque las cosas funcionan a medias!
Te pongo los codigos.
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" xml:lang="es" lang="es-es">
<head>
<title>Columnas equilibradas - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL" />
<meta name="Language" content="español" />
<script src="jquery-1.1.4.pack.js"></script>
<script src="neodani.js"></script>
<style type="text/css">
a {display: block;}
.nivel2 {color: #f00;}
#menu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: #EEEEEE;
color: #000;
}
.nivel1{
background:#9CCEEF;
border-bottom:1px solid #DDDDDD;
color:white;
cursor:default;
display:block;
font-weight:bold;
padding:5px 15px;
width:100%;
}
.nivel2{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding-top:5px;
padding-left:10px;
width: 170px;
font-weight:bold:
}
.nivel2 a{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding:0px 0px;
width: 150px;
}
.nivel3 a{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding:5px 10px;
width: 150px;
}
.nivel3 a:hover {
background : #EFBD9C url(sdmenu/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
width: 150px;
}
#dos{
border-bottom:1px solid #DDDDDD;
color:white;
cursor:default;
display:block;
font-weight:bold;
padding:5px 15px;
width:100%;
}
</style>
</head>
<body>
<div id="menu">
<div class="nivel1" id="uno">Apartado 1 </div>
<div class="nivel2" id="unoA">Seccion 1
<div class="nivel3">
<a href="pag2.html">aaaaa 1</a>
<a href="pag2.html">aaaaa 2</a>
<a href="pag2.html">aaaaa 3</a>
<a href="pag2.html">aaaaa 4</a>
</div>
</div>
<div class="nivel2" id="unoB">Seccion 2
<div class="nivel3">
<a href="pag2.html">bbbbb 1</a>
<a href="pag2.html">bbbbb 2</a>
<a href="pag2.html">bbbbb 3</a>
<a href="pag2.html">bbbbb 4</a>
</div>
</div>
<div class="nivel2" id="unoC">Seccion 3
<div class="nivel3">
<a href="pag2.html">ccccc 1</a>
<a href="pag2.html">ccccc 2</a>
<a href="pag2.html">ccccc 3</a>
<a href="pag2.html">ccccc 4</a>
</div>
</div>
<div class="nivel2" id="unoD">Seccion 4
<div class="nivel3">
<a href="pag2.html">ddddd 1</a>
<a href="pag2.html">ddddd 2</a>
<a href="pag2.html">ddddd 3</a>
<a href="pag2.html">ddddd 4</a>
</div>
</div>
<div class="nivel1" id="dos">Apartado 2
<div class="nivel2">
<a href="pag2.html">ggggg 1</a>
<a href="pag2.html">ggggg 2</a>
<a href="pag2.html">ggggg 3</a>
</div>
</div>
<div class="nivel1" id="tres">Apartado 3
<div class="nivel2">
<a href="pag2.html">hhhhh 1</a>
<a href="pag2.html">hhhhh 2</a>
<a href="pag2.html">hhhhh 3</a>
</div>
</div>
</div>
</body>
</html>
Código:
$(document).ready(function(){
$("div.nivel2").hide();
$("div.nivel3").hide();
$("div#uno").click(function () {
$("#unoA, #unoB, #unoC, #unoD").slideToggle("slow");
});
$("div#dos").click(function () {
$("div#dos div.nivel2").slideToggle("slow");
});
$("div#tres").click(function () {
$("div#tres div.nivel2").slideToggle("slow");
});
$("div#unoA").click(function () {
$("div#unoA div.nivel3").slideToggle("slow");
});
$("div#unoB").click(function () {
$("div#unoB div.nivel3").slideToggle("slow");
});
$("div#unoC").click(function () {
$("div#unoC div.nivel3").slideToggle("slow");
});
$("div#unoD").click(function () {
$("div#unoD div.nivel3").slideToggle("slow");
});
});
Porque cuando desplego el apartado uno sus subcategorias se "entrebancan" al salir, y cuando desplego alguna de esas categorias el efecto es limpio y claro como debería ser!
Sabes a lo que me refiero?
Cuandos desplegas cualquiera de las 4 secciones se muestra un efecto nitido.
En cambio cuando seleccionas el primer apartado se entrecorta, se apelotona!
Mi no entenderrrrrrrrrrr
