<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "<a href =" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "target =" _ blank "> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd </a>">
<HTML xmlns = "<a href =" http://www.w3.org/1999/xhtml "target =" _ blank "> http://www.w3.org/1999/xhtml </a>">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
Body
{
Margin: 0px;
Padding: 20px;
Font: 12px tahoma,, sans-serif;
}
/* Unlimited sub-menu start */
*
{
Margin: 0px;
Padding: 0px;
}
/* External box */
# Treemenu
{
Width: 160px;
Word-wrap: Break-word;
Background-color: # ffffcc;
}
/* Every ul */
# Treemenu ul
{
Margin: 0px 0px 0px 10px;
List-style: none;
}
/* The first ul */
Ul # treetop
{
Margin: 0px;
}
/* Each li */
# Treemenu ul Li
{
Width: 100%;
}
/* Start A in each li */
# Treemenu ul Li
{
Padding: 0px 0px 0px 30px;
Font-size: 12px;
Font-weight: normal;
Text-Decoration: none;
}
# Treemenu ul Li A: link,
# Treemenu ul Li A: visited
{
Color: #009933;
}
# Treemenu ul Li A: hover
{
Color: # ff0000;
}
# Treemenu ul Li A: active
{
Color: #009933;
}
/* End a in each li */
/* Start of the closed node */
Li. treeclosed
{
Background: URL (<a href = "http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif" target = "_ blank"> http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif </a>) No-repeat 0px 0px;
}
Li. treeclosed ul
{
Display: none;
}
/* Close the node */
/* Open node */
Li. treeopened
{
Background: URL (<a href = "http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif" target = "_ blank"> http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif </a>) No-repeat 0px 0px;
}
/* Start the final node */
Li. treechild
{
Background: URL (<a href = "http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif" target = "_ blank"> http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif </a>) No-repeat 0px 0px;
}
/* Adjust the final node position */
# Treemenu ul Li. treechild
{
Margin: 0px 0px 0px 4px;
}
/* Adjust the position of a in the final node */
# Treemenu ul Li. treechild
{
Padding: 0px 0px 0px 15px;
}
/* End of the final node */
/* Show all and fold start */
# Switchallnodes
{
Padding: 10px 0px 10px 15px;
}
A # allopenid,
A # allcloseid
{
Color: #009933;
Text-Decoration: none;
}
A # allcloseid
{
Display: none;
}
A # allopenid: hover,
A # allcloseid: hover
{
Color: # ff0000;
}
/* Expand and collapse all at the end */
/* Unlimited sub-menu ends */
</Style>
<Title> untitled document </title>
</Head>
<Body>
<Div id = "treemenu">
<H4> tree menu </H4>
<Div id = "switchallnodes">
<A id = "allopenid" href = "#" onclick = "javascript: funswitchallnodes ('open', 'allopenid', 'allcloseid');"> Expand All </a>
<A id = "allcloseid" href = "#" onclick = "javascript: funswitchallnodes ('close', 'allopenid', 'allcloseid');"> hide all </a>
</Div>
<Ul id = "treetop">
<! -- Starts at level 1st -->
<Li class = "treeopened"> <a href = "#"> IECN. Net </a>
<Ul>
<! -- Starts at level 2nd -->
<Li> <a href = "#"> technical zone </a>
<Ul>
<! -- Starts at level 3rd -->
<Li> <a href = "#"> webpage technology </a>
<Ul>
<! -- Level 1 content -->
<Li class = "treechild"> <a href = "#"> JavaScript </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#"> html/XHTML/CSS </a> </LI>
<Li class = "treechild"> <a href = "#"> Ajax </a> </LI>
<Li class = "treechild"> <a href = "#"> webpage creation tool </a> </LI>
<Li class = "treechild"> <a href = "#"> Design/graphics </a> </LI>
<Li class = "treechild"> <a href = "#"> Flash/multimedia </a> </LI>
<Li class = "treechild"> <a href = "#"> VML/Web3D </a> </LI>
</Ul>
</LI>
<! -- End of level 3rd -->
<! -- Starts at level 3rd -->
<Li> <a href = "#"> Web programming </a>
<Ul>
<! -- Level 1 content -->
<Li class = "treechild"> <a href = "#"> JAVA </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#">. Net </a> </LI>
<Li class = "treechild"> <a href = "#"> Asp/VBScript </a> </LI>
<Li class = "treechild"> <a href = "#"> php </a> </LI>
<Li class = "treechild"> <a href = "#"> PERL/python </a> </LI>
<Li class = "treechild"> <a href = "#"> Web Integration/open source </a> </LI>
</Ul>
</LI>
<! -- End of level 3rd -->
<! -- Starts at level 3rd -->
<Li> <a href = "#"> database </a>
<Ul>
<! -- Level 1 content -->
<Li class = "treechild"> <a href = "#"> access/sqlserver </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#"> MySQL/postgresql </a> </LI>
<Li class = "treechild"> <a href = "#"> Oracle/DB2/SYBASE </a> </LI>
</Ul>
</LI>
<! -- End of level 3rd -->
<! -- Starts at level 3rd -->
<Li> <a href = "#"> server </a>
<Ul>
<! -- Level 1 content -->
<Li class = "treechild"> <a href = "#"> Windows/IIS </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#"> Unix/Linux/apache </a> </LI>
<Li class = "treechild"> <a href = "#"> application server </a> </LI>
</Ul>
</LI>
<! -- End of level 3rd -->
</Ul>
</LI>
<! -- End of level 2nd -->
<! -- Starts at level 2nd -->
<Li> <a href = "#"> Level 2 Directory </a>
<Ul>
<! -- Starts at level 3rd -->
<Li> <a href = "#"> Level 3 directory </a>
<Ul>
<! -- Starts at level 4th -->
<Li> <a href = "#"> Level 4 directory </a>
<Ul>
<! -- Starts at level 5th -->
<Li> <a href = "#"> Level 5 directory </a>
<Ul>
<! -- Starts at the intermediate level -->
<Li> <a href = "#"> ...... </a>
<Ul>
<! -- Starts at level n -->
<Li> <a href = "#"> level n directory </a>
<Ul>
<! -- Level n + 1 content -->
<Li class = "treechild"> <a href = "#"> final node 1 </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#"> final node 2 </a> </LI>
<Li class = "treechild"> <a href = "#"> final node 3 </a> </LI>
</Ul>
</LI>
<! -- End at level n -->
</Ul>
</LI>
<! -- End of intermediate stage -->
</Ul>
</LI>
<! -- End of level 5th -->
</Ul>
</LI>
<! -- End of level 4th -->
</Ul>
</LI>
<! -- End of level 3rd -->
</Ul>
</LI>
<! -- End of level 2nd -->
<! -- Starts at level 2nd -->
<Li> <a href = "#"> Second Level-2 Directory </a>
<Ul>
<! -- Starts at level 3rd -->
<Li> <a href = "#"> Second Level-3 directory </a>
<Ul>
<! -- Starts at level 4th -->
<Li> <a href = "#"> Second Level-4 directory </a>
<Ul>
<! -- Starts at level 5th -->
<Li> <a href = "#"> Second Level 5 directory </a>
<Ul>
<! -- Starts at the intermediate level -->
<Li> <a href = "#"> ...... </a>
<Ul>
<! -- Starts at level n -->
<Li> <a href = "#"> second level n directory </a>
<Ul>
<! -- Level n + 1 content -->
<Li class = "treechild"> <a href = "#"> final node 1 </a> </LI> <! -- Treechild node -->
<Li class = "treechild"> <a href = "#"> final node 2 </a> </LI>
<Li class = "treechild"> <a href = "#"> final node 3 </a> </LI>
</Ul>
</LI>
<! -- End at level n -->
</Ul>
</LI>
<! -- End of intermediate stage -->
</Ul>
</LI>
<! -- End of level 5th -->
</Ul>
</LI>
<! -- End of level 4th -->
</Ul>
</LI>
<! -- End of level 3rd -->
</Ul>
</LI>
<! -- End of level 2nd -->
</Ul>
</LI>
<! -- End of level 1st -->
</Ul>
</Div>
<SCRIPT type = "text/JavaScript">
<! --
/*
The structure is <ul> <li> <Div class = "treetmp"> <A> content </a> </div> </LI> </ul>
<Treetmp> after being clicked, change the Class Name of the <treetmp> parent <li>.
*/
Function funswitch (praobj)
{
If (praobj. parentnode. classname = "treeopened ")
Praobj. parentnode. classname = "treeclosed ";
Else
Praobj. parentnode. classname = "treeopened ";
}
Function inittreemenu ()
{
/* Get all the <li> IDs in treemenu and substitute them into the object array */
This. allnodesobj = Document. getelementbyid ("treemenu"). getelementsbytagname ("Li ");
For (I = 0; I <this. allnodesobj. length; I ++)
{
/* Define <li> with no class name defined as treeclosed */
If (this. allnodesobj [I]. classname = "")
This. allnodesobj [I]. classname = "treeclosed ";
/* Add a temporary Div outside the <li> <A> of the class name not treechild. Click this Div to execute the funswitch function */
If (this. allnodesobj [I]. classname! = "Treechild ")
{
VaR myhtmlina = This. allnodesobj [I]. getelementsbytagname ("A") [0]. outerhtml. tostring ();
This. allnodesobj [I]. getelementsbytagname ("A") [0]. outerhtml = "<Div class = 'treetmp' onclick = 'javascript: funswitch (this); '>" + myhtmlina + "</div> ";
}
}
}
/*
Expand or close all nodes
Show all usage: funswitchallnodes ("open", "allopenid", "allcloseid ");
Disable all usage: funswitchallnodes ("close", "allopenid", "allcloseid ");
*/
Function funswitchallnodes (praswitch, praopenid, pracloseid)
{
VaR myclassname;
If (praswitch = "open ")
{
Myclassname = "treeopened ";
Document. getelementbyid (praopenid). style. Display = "NONE ";
Document. getelementbyid (pracloseid). style. Display = "inline ";
}
If (praswitch = "close ")
{
Myclassname = "treeclosed ";
Document. getelementbyid (praopenid). style. Display = "inline ";
Document. getelementbyid (pracloseid). style. Display = "NONE ";
}
/* Get all the <li> IDs in treemenu and substitute them into the object array */
This. allnodesobj = Document. getelementbyid ("treemenu"). getelementsbytagname ("Li ");
For (I = 0; I <this. allnodesobj. length; I ++)
{
If (this. allnodesobj [I]. classname! = "Treechild ")
This. allnodesobj [I]. classname = myclassname;
}
}
Inittreemenu ();
-->
</SCRIPT>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
