Lo haces en javascript y haciendo uso de lasetiquetas <div>
este es un codigo pequeño: esta en hard code pero lo ppuedes implementar para jalar los items de una base de datos :) paga esto en tu pagina y ve que hace:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0079)http://webdeveloper.earthweb.com/rep...64771/tree.htm -->
<HTML><HEAD><TITLE>Cross Browser Navigation Tree</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK
href="images/tree.css" rel=stylesheet>
<SCRIPT language=javascript
src="images/tree.js"></SCRIPT>
<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><A id=xproducts href="javascript:Toggle('products');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
<TD><B>OFF</B></TR></TBODY></TABLE>
<DIV id=products style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG hspace=0
src="images/text.gif"
border=0 width="16" height="16"></TD>
<TD><A
href="off.jsp" target="principal">Consulta</A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG hspace=0
src="images/text.gif"
border=0 width="16" height="16"></TD>
<TD><A
href="cuerpo.jsp" target="principal">Principal</A></TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><A id=xsupport href="javascript:Toggle('support');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
<TD><B>OPTO</B></TR></TBODY></TABLE>
<DIV id=support style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG height=16 hspace=0
src="images/text.gif" width=16
border=0></TD>
<TD><A href="opto.jsp" target="principal">Consulta</A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG height=16 hspace=0
src="images/text.gif" width=16
border=0></TD>
<TD><A href="cuerpo.jsp" target="principal">Principal</A></TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><A id=xcontact href="javascript:Toggle('contact');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
<TD><B>SWAPS</B></TR></TBODY></TABLE>
<DIV id=contact style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG height=16 hspace=0
src="images/text.gif" width=16
border=0></TD>
<TD><A href="swaps.jsp" target="principal">consulta</A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><IMG height=16 hspace=0
src="images/text.gif" width=16
border=0></TD>
<TD><A href="cuerpo.jsp" target="principal">principal</A></TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=16><A id=xsupport href="cuerpo.jsp" target="principal"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
<TD><B><A href="cuerpo.jsp" target="principal" >MENU</A></B></TR></TBODY></TABLE>
<P><A href="javascript:Expand();">Expand All - </A><A
href="javascript:Collapse();">Collapse All</A> </P></BODY></HTML>
El codigo java script lo pones en la ruta especificada hasta arriba y es el que sigue:
function Toggle(item) {
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);
if (visible) {
obj.style.display="none";
key.innerHTML="<img src='images/folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
} else {
obj.style.display="block";
key.innerHTML="<img src='images/textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
}
}
function Expand() {
divs=document.getElementsByTagName("DIV");
for (i=0;i<divs.length;i++) {
divs[i].style.display="block";
key=document.getElementById("x" + divs[i].id);
key.innerHTML="<img src='images/textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
}
}
function Collapse() {
divs=document.getElementsByTagName("DIV");
for (i=0;i<divs.length;i++) {
divs[i].style.display="none";
key=document.getElementById("x" + divs[i].id);
key.innerHTML="<img src='images/folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
}
}
Las imagenes no te apareceran debes especificarle alguna otra esto yo ya lo tengo funcionando por si tienes dudas :)