Menu que aparezca y desaparezca elementos

[Linkysnake]

Hola, estoy utilizando Adobe Muse para diseñar una pagina web y me va bien con el, no se mucho de codigo (de hecho casi nada) pero si los analizo puedo llegar a entender algunos.

El caso es que debo crear una lista de temas en la pagina, y que al dar click en uno de los temas apareza a un lado una lista despegable que contendria los subtemas de cada tema para escoger uno (si se como hacer una lista despegable) pero cuando le de click a otro tema, la lista despegable del primer tema que habia aparecido desaparezca y ahora aparezca el menu despegable del segundo tema con los subtemas correspondientes y asi con todos los temas, es decir mostrar y ocultar elementos cuando cambio entre ellos.

Gracias

[kreil]

Lo que pides la mejor forma de hacerlo (y hacerlo bonito) sería con jquery, con ello podrías hacer que aparezcan distintos menús dependiendo de que opción estés pasando y que vayan desapareciendo como tu dices, pero no es cosa fácil.

[Linkysnake]

Gracias kreil, de hecho ya tengo este codigo

JavaScript:

Código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'> 
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa 
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

y luego lo coloco con el siguiente:

Código:

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
CONTENIDO 1
</div>
<div id="tab2" class="contenido_tab">
CONTENIDO2
</div>
<div id="tab3" class="contenido_tab">
CONTENIDO3
</div>
</div>
<div style="clear:both;">
</div>

Efectivamente Muestra y Oculta cuando se cambia de Seleccion, el detalle es que yo quiero que cuando no se haya seleccionado nada aun no aparezca ningun contenido todavia, hasta que yo seleccione alguno, sabe alguien como lograr eso?

Gracias.

[kreil]

Bueno, según he entendido:
Mostrar y ocultar los diferentes menús y submenus se podría hacer incluso sin jquery, sólo con css.
Ejemplo: tenemos un elemento del menú (<div> por ejemplo) que tiene un atributo class="principal". Queremos que al pasar el ratón se vea una lista que hay contenida dentro de el (<ul>). Sería simplemente poner: .principal:hover li{ display:block; }

Previamente hemos definido que .principal ul{ display: none; }

Si tenemos otro submenú dentro del propio ul. Más de lo mismo: ul li:hover li{ display:block; }
Teniendo previamente ul li li { display:none; }

Espero haberme explicado.
Si investigas un poco el código css de mi web está hecho de esa forma, pero sin doble submenú.