Demo Dynamic HTML - Menú arbóreo

Menú arbóreo

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo es una de las más interesantes ya que permite crear un menú arbóreo que muestra y oculta sus datos según decida el usuario.
Muy útil para gestionar enlaces y bookmark en HTML, este ejemplo tiene justamente como objeto definir los recursos sobre Dynamic HTML que hay en la red.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<STYLE TYPE="text/css">

</STYLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>

</HEAD>

<P ALIGN=CENTER>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<P STYLE="margin-left:25;font-family:Arial,sans-serif;font-size:10pt;"><A 
HREF="#" onClick="expandAll(false); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse All"></A>
Display/Hide All</P>

<DIV ID="elOneParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elOne'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
World Wide Web Consortium (W3C)</H3>
</DIV>

<DIV ID="elOneChild" CLASS=child><B>Standards</B>
<P><A NAME="HTML4" HREF="http://www.w3.org/TR/REC-html40/">HTML 4.0 Specification - Recommendation</A>
<B><I>  Final! - Important!!</I></B>
<BR><TT>http://www.w3.org/TR/REC-html40/</TT><BR>
The <I>Biggie</I>! Already implemented in part by 4th generation browsers, HTML 4.0 ties up the loose ends created by the browser wars, and sets the standard for the fifth browser generation.</P>

<P><A HREF="http://www.w3.org/pub/WWW/TR/REC-html32.html">HTML 3.2 Specification - Recommendation</A>
<BR><TT>http://www.w3.org/pub/WWW/TR/REC-html32.html</TT></P>

<P><A HREF="http://www.w3.org/pub/WWW/TR/PR-CSS1">Cascading Style Sheets, level 1 (CSS1)</A>
<BR><TT>http://www.w3.org/pub/WWW/TR/PR-CSS1</TT></P>

<B>Soon-to-be Standards</B>
<P><A NAME="DOM" HREF="http://www.w3.org/TR/WD-DOM/">Document Object Model Specification - Working Draft</A>
<BR><TT>http://www.w3.org/TR/WD-DOM/</TT><BR>
By far the most important pending recommendation for Dynamic HTML. At last being publicly discussed and developed.</P>

<P><A NAME="CSS2" HREF="http://www.w3.org/TR/WD-CSS2/">Cascading Style Sheets, level 2 (CSS2) - Working Draft</A>
<BR><TT>http://www.w3.org/TR/WD-CSS2/</TT><BR>
The future style sheet standard. Many features are already implemented in DHTML browsers. Expands on CSS1 and <I>includes</I> the following separately-developed working drafts:</P>
<UL><LI><A NAME="CSSpos" HREF="http://www.w3.org/pub/WWW/TR/WD-positioning">CSS Positioning</A>
<LI><A HREF="http://www.w3.org/TR/WD-font">Web Fonts</A>
<LI><A HREF="http://www.w3.org/TR/WD-acss">Aural Cascading Style Sheets</A>
<LI><A HREF=" http://www.w3.org/TR/WD-print">CSS Printing Extensions</A></UL>
</DIV>

<DIV ID="elTwoParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elTwo'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
Netscape</H3>
</DIV>

<DIV ID="elTwoChild" CLASS=child>
<P><IMG NAME="NS" SRC="art/arrow.gif" WIDTH=13 HEIGHT=13 BORDER=0 ALT=""> <A NAME="NS" HREF="http://home.netscape.com/comprod/products/communicator/index.html">Netscape Navigator and Communicator</A><B><I>  New Release!</I></B>
<BR><TT>http://home.netscape.com/comprod/products/communicator/index.html</TT><BR>
Latest Version: 4.05</P>

<P><A NAME="NSdocs" HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm">Dynamic HTML documentation</A>
<B><I>  Updated!</I></B>
<BR><TT>http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm</TT><BR>
Recently updated for Communicator final release with better CSSdocumentation and examples. An invaluable reference for developers, the complete documentation can be viewed <A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm">online</A>, or downloaded as:</P>
<UL><LI><A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/dynhtml.zip">Windows ZIP</A>
<LI><A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/dynamic.pdf">Acrobat PDF</A>
<LI><A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/dynhtml.tar.gz">UNIX TAR.GZ</A> 
</UL>

<P><A NAME="vdhtml" HREF="http://developer.netscape.com/library/examples/dynhtml/visual/index.html">Netscape Visual DHTML 0.2 (beta)</A>
<B><I>  New!</I></B>
<BR><TT>http://developer.netscape.com/library/examples/dynhtml/visual/index.html</TT><BR>
A visual development tool for writing Netscape DHTML, written in DHTML. Promising. Still in Beta. An off-line downloadable version promised soon.</P>

<P><A HREF="http://developer.netscape.com/library/documentation/htmlguid/dynamic_resources.html">Dynamic HTML Resources</A>
<BR><TT>http://developer.netscape.com/library/documentation/htmlguid/dynamic_resources.html</TT><BR>
Netscape own enlaces to best examples of Navigator DHTML</P>

<P><IMG NAME="moz" SRC="art/arrow.gif" WIDTH=13 HEIGHT=13 BORDER=0 ALT=""> <A NAME="moz" HREF="http://www.mozilla.org">mozilla.org</A>
<B><I>  New!</I></B>
<BR><TT>http://www.mozilla.org</TT><BR>
Established to coordinate the community development of Communicator 5. Source code released on March 31.</P>

<P><A HREF="http://developer.netscape.com/viewsource/index_frame.html?content=archive/archivelist.html#apostle">The JavaScript Apostle</A>
<BR><TT>http://developer.netscape.com/viewsource/index_frame.html?content=archive/archivelist.html#apostle</TT><BR>
Resident JavaScript/DHTML expert Danny Goodman's monthly column.</P>

<P><A HREF="http://developer.netscape.com/docs/examples/index.html?content=dynhtml.html">Dynamic HTML Sample Code</A>
<BR><TT>http://developer.netscape.com/docs/examples/index.html?content=dynhtml.html</TT><BR>
DHTML Code Snippets in a Navigator Flavour.</P>
</DIV>

<DIV ID="elThreeParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elThree'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
Microsoft</H3>
</DIV>

<DIV ID="elThreeChild" CLASS=child>
<P><A HREF="http://www.microsoft.com/workshop/prog/ie4/">Microsoft Internet Explorer</A>
<BR><TT>http://www.microsoft.com/workshop/prog/ie4/</TT><BR>
Latest Version: 4.01</P>

<P><A HREF="http://www.microsoft.com/sitebuilder/workshop/author/dhtml/">Dynamic HTML - SiteBuilder Network</A>
<BR><TT>http://www.microsoft.com/sitebuilder/workshop/author/dhtml/</TT><BR>
a.k.a <I>Anything you can do, I can do better.</I><BR>The starting point for exploring Explorer's DHTML</P>
<P><A HREF="http://www.microsoft.com/msdn/sdk/inetsdk/help/">Dynamic HTML Documentation - Internet Client SDK</A>
<B><I>  Invaluable!</I></B>
<BR><TT>http://www.microsoft.com/msdn/sdk/inetsdk/help/</TT><BR>
<I>The Complete Reference for Internet Explorer DHTML</I>.</P>

<P><A HREF="http://www.microsoft.com/sitebuilder/columnists/default.asp">DHTML Dude</A>
<BR><TT>http://www.microsoft.com/sitebuilder/columnists/default.asp</TT><BR>
Microsoft's own regular DHTML column with a name I wish I had thought of.</P>

<P><IMG NAME="edComp" SRC="art/arrow.gif" WIDTH=13 HEIGHT=13 BORDER=0 ALT=""> <A HREF="http://www.microsoft.com/sitebuilder/features/dhtmledit.asp">Microsoft DHTML Editing Component</A>
<BR><TT>http://www.microsoft.com/sitebuilder/features/dhtmledit.asp</TT><BR>
Preview of a new DHTML editing component thacan be included in any HTML or COM based application.</P>
<P><A HREF="http://www.microsoft.com/gallery/files/html/">Dynamic HTML Gallery</A>
<BR><TT>http://www.microsoft.com/gallery/files/html/</TT><BR>
DHTML Examples in an Explorer flavour.</I>.<BR><BR></P>
</DIV>

<DIV ID="elFourParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elFour'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
Scripting</H3>
</DIV>

<DIV ID="elFourChild" CLASS=child>
<P><A NAME="JSref" HREF="http://developer.netscape.com/library/documentation/communicator/jsref/index.htm">JavaScript, The Complete Reference</A>
<B><I>  Updated! - Must Have!!</I></B>
<BR><TT>http://developer.netscape.com/library/documentation/communicator/jsref/index.htm</TT><BR>
Finally available, the comprehensive documentation for JavaScript, both client and server. Includes the JavaScript 1.2 addendum. The new <I>JavaScript Bible</I>. Can be viewed <A HREF="http://developer.netscape.com/library/documentation/communicator/jsref/index.htm">online</A>, or downloaded as:
<UL><LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsref/jsref.zip">Windows ZIP</A>
<LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsref/jsref.pdf">Acrobat PDF</A>
</UL>

<P><A NAME="JSguide" HREF="http://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm">JavaScript Guide</A>
<BR><TT>http://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm</TT><BR>
Describes the core JavaScript language, including JavaScript 1.2 features. Serves as a quick reference to JavaScript structure. Full description of properties and methods, however, only in <A HREF="#JSref">The JavaScript Reference</A>. Can be viewed <A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm">online</A>, or downloaded as:</P>
<UL><LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide4/jsguide.zip">Windows ZIP</A>
<LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide4/jsguide.pdf">Acrobat PDF</A>
</UL>

<P><A NAME="JS12" HREF="http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">JavaScript 1.2 Addendum</A>
<BR><TT>http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm</TT><BR>
Puts the <I>Dynamic</I> in Netscape's Dynamic HTML. Now also available as part of <A HREF="#JSref">The JavaScript Reference</A>. Can be viewed <A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">online</A>, or downloaded as:</P>
<UL><LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.zip">Windows ZIP</A>
<LI><A HREF="http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.pdf">Acrobat PDF</A>
</UL>

<P><A NAME="ECMA" HREF="http://www.ecma.ch/STAND/Ecma-262.htm">ECMAscript</A>
<BR><TT>http://www.ecma.ch/STAND/Ecma-262.htm</TT><BR>
The new international web scripting language standard based on JavaScript 1.1, recently ratified by ECMA, now available for downloading, in <BR><A HREF="ftp://anonymous@ftp.ecma.ch/ecma-st/e262-doc.exe">self-expanding MS WORD</A> or <A HREF="ftp://anonymous@ftp.ecma.ch/ecma-st/e262-pdf.pdf">Acrobat PDF</A> format. <BR>You read it here first: ECMA stands for  European Computer Manufacturers Association</P>

<P><A NAME="MSscript" HREF="http://www.microsoft.com/scripting/">Microsoft Scripting</A>
<BR><TT>http://www.microsoft.com/scripting/</TT><BR>
Microsoft's new home page for all its scripting docs, articles and enlaces.</P>

<P><A NAME="Jscript" HREF="http://www.microsoft.com/jscript/">JScript</A>
<BR><TT>http://www.microsoft.com/jscript/</TT><BR>
Complete Reference for JScript 3 for IE4.</P>
<UL><P><A HREF="http://www.microsoft.com/workshop/prog/ie4/jscript3.htm">What's New in JScript 3.0</A>
<BR><TT>http://www.microsoft.com/workshop/prog/ie4/jscript3.htm</TT><BR>
Answers the question "How compatible is JScript 3 with JavaScript 1.2?"</P>
</UL>

<P><A HREF="http://www.microsoft.com/vbscript/">VBScript</A>
<BR><TT>http://www.microsoft.com/vbscript/</TT><BR>
The 8-track tape of scripting.</P>
</DIV>

<DIV ID="elSixParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elSix'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
Implementation Issues (bugs or limitations)</H3>
</DIV>

<DIV ID="elSixChild" CLASS=child>
<P><A NAME="JSbugs" HREF="http://developer.netscape.com/support/bugs/index.html?content=known/javascript.html">Netscape JavaScript Bugs</A>
<BR><TT>http://developer.netscape.com/support/bugs/index.html?content=known/javascript.html</TT></P>
<P><A HREF="http://developer.netscape.com/support/bugs/known/css.html">Communicator CSS1 Known Issues</A>
<BR><TT>http://developer.netscape.com/support/bugs/known/css.html</TT></P>
</DIV>

<DIV ID="elSevenParent" CLASS=parent>
<H3><A HREF="#" onClick="expandIt('elSeven'); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse Item"></A>
Further Reading</H3>
</DIV>

<DIV ID="elSevenChild" CLASS=child>
<P><B>There's no place like home</B></P>
<P><A NAME="docJS" HREF="http://www.webreference.com/js/">Doc JavaScript</A>
<BR><TT>http://www.webreference.com/js/</TT><BR>
Bi-weekly prescriptions for all your JavaScript ailments.</P>

<P><A HREF="http://www.webreference.com/dev/style/">Cascading Style Sheets</A>
<BR><TT>http://www.webreference.com/dev/style/</TT><BR>
An Introduction to CSS</P>

<P><A HREF="http://www.webreference.com/dev/style/syntax.html">Style Sheet Syntax</A>
<BR><TT>http://www.webreference.com/dev/style/syntax.html</TT><BR>
Excert from the upcoming book <I>HTML Web Publishing SECRETS</I> from IDG Books</P>

<P><A HREF="http://www.webreference.com/content/css/">Cascading Style Sheets: Designing for the Web</A>
<BR><TT>http://www.webreference.com/content/css/</TT><BR>
Excerpts and a full chapter from the book by Hakon Lee and Bert Bos of the W3C.</P>

<P><A HREF="http://www.webreference.com/dev/style/evolution.html">The Evolution of Style Sheets</A>
<BR><TT>http://www.webreference.com/dev/style/evolution.html</TT><BR>
A history of CSS and future directions.</P>

<P><B>Other Developer Sites</B></P>

<P><A NAME="bWars" HREF="http://www.browserwars.com/">BrowserWars.com</A>
<BR><TT>http://www.browserwars.com/</TT><BR>
Compuserve's new megasite devoted solely to coverage of browser development.</P>

<P><A NAME="builder" HREF="http://www.builder.com/">Builder.com</A>
<BR><TT>http://www.builder.com/</TT><BR>
C|NET's site for web developers. Regular SuperScripter column, and longer in-depth occasional articles.</P>

<P><A NAME="#demos" HREF="http://www.erols.com/jrule/dhtml/">DHTML Demos</A>
<BR><TT>http://www.erols.com/jrule/dhtml/</TT><BR>
Extensive demos of techniques for both browsers.</P>

<P><A NAME="duo" HREF="http://members.xoom.com/dynduo/">Dynamic Duo</A>
<BR><TT>http://members.xoom.com/dynduo/</TT><BR>
Cross-browser tutorials and demos.</P>

<P><A NAME="dhtmlzone" HREF="http://www.dhtmlzone.com/">Dynamic HTML Zone</A>
<BR><TT>http://www.dhtmlzone.com/</TT><BR>
Macromedia's ambitious new Dynamic HTML mega-site with articles, tutorials, and discussion group.</P>

<P><A NAME="IEHelp" HREF="http://www.iehelp.com/">IE Help</A>
<BR><TT>http://www.iehelp.com/</TT><BR>
Compuserve's new Explorer-related site.</P>
<UL>
<P><A NAME="DHTML101" 
HREF="http://www.iehelp.com/iehelp/solutions/">Dynamic HTML Solutions</A>
<BR><TT>http://www.iehelp.com/iehelp/solutions/</TT><BR>
DHTML techniques by yours truly.</P></UL>

<P><A NAME="insidedhtml" HREF="http://www.insidedhtml.com/">Inside DHTML</A>
<BR><TT>http://www.insidedhtml.com/</TT><BR>
Scott Isaacs' comprehensive source of Dynamic HTML information and techniques. Focus on IE4.
<B><I>MSIE4 absolute must!</I></B></P>

<P><A NAME="NSHelp" HREF="http://www.netscapehelp.com/">Netscape Help</A>
<BR><TT>http://www.netscapehelp.com/</TT><BR>
Compuserve's new Netscape-related site.</P>
<UL>
<P><A NAME="DHTML101" 
HREF="http://www.netscapehelp.com/solutions/">Dynamic HTML Solutions</A>
<BR><TT>http://www.netscapehelp.com/solutions/</TT><BR>
Same Content as iehelp.com above.</P></UL>

<P><A NAME="webcoder" HREF="http://webcoder.com/">WebCoder</A>
<BR><TT>http://webcoder.com/</TT><BR>
Nick Heinle's all-encompassing site on DHTML and JavaScript.</P>

<P><A NAME="webdev" HREF="http://www.webdeveloper.com/">WebDeveloper.com</A>
<BR><TT>http://www.webdeveloper.com/</TT><BR>
WebReference.com's sister development site. DHTML articles, new and reviews.</P>

<P><A HREF="http://www.webreview.com/">Web Review</A>
<BR><TT>http://www.webreview.com/</TT><BR>
Regular Dynamic HTML articles, particularly in bi-weekly Web Coder column by Nick Heinle of WebReference's <A HREF="http://www.webreference.com/javascript/">JavaScript Tip of the Week</A></P>

<P><A HREF="http://www.webmonkey.com/">WebMonkey</A>
<BR><TT>http://www.webmonkey.com/</TT><BR>
Regular coding columns, but their <I>Wired</I> layout needs deciphering.</P>

<P><IMG NAME="yasd" SRC="art/arrow.gif" WIDTH=13 HEIGHT=13 BORDER=0 ALT=""> <A NAME="yasd" HREF="http://www.yasd.com/">YASD</A>
<BR><TT>http://www.yasd.com/</TT><BR>
DHTML, JavaScript and many cross-browser techniques from Shelly Powers.</P>

</DIV>

<DIV ID="elExpParent" CLASS=other>
<A HREF="#" onClick="expandAll(true); return false"><IMG
NAME="imEx" SRC="art/triDown2.gif" WIDTH=12 HEIGHT=12 BORDER=0 ALT="Expand/Collapse All"></A>
Display/Hide All
</DIV>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]