Home > Developer > JavaScript
Directly run the Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Menu Tree implemented by jQuery </title>
<Meta name = "Copyright" content = "http://www.jb51.net/"/>
<Meta name = "description" content = "Menu Tree implemented by jQuery, and JavaScript sharding"/>
<Meta content = "JavaScript, sharing, JavaScript code, Ajax" name = "keywords"/>
<Style type = "text/css">
. Padding {height: 300px ;}
This copyright notice must be kept untouched in the stylesheet
All times.
The original version of this stylesheet and the associated (x) html
Is available at http://www.jb51.net
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x) html may be modified in any
Way to fit your requirements.
# Wrap {position: relative; height: 200px; width: 130px; z-index: 100 ;}
# Nav {position: absolute; left: 0; top: 0 ;}
# Nav,
# Nav ul {padding: 0; margin: 0; list-style: none; font-family: arial, sans-serif; background: # fff; font-weight: bold ;}
# Nav li a {padding-left: 20px; white-space: nowrap ;}
# Nav li ul li a {padding-left: 0 ;}
# Nav ul {padding-left: 20px ;}
# Nav li a {color: # 66b; text-decoration: none; font-size: 11px ;}
# Nav li {font-size: 13px; line-height: 25px; color: # d80; cursor: pointer; width: 100% ;}
# Nav li. down {text-indent: 20px ;}
# Nav li a: hover {text-decoration: underline ;}
</Style>
<Script type = "text/javascript" src = "jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls-stunichols.com-all rights reserved.
$ (Document). ready (function (){
$ ("Ul # nav ul"). hide ();
$ ('Ul # nav li: has (ul) '). each (function (I ){
$ (This). children (). slideUp (400 );
});
$ ('Li. p1: has (ul) '). click (function (event ){
If (this = event.tar get ){
Current = this;
$ ('Ul # nav li: has (ul) '). each (function (I ){
If (this! = Current) {$ (this). children (). slideUp (400 );}
});
$ (This). children ("ul: eq (0)"). slideToggle (400 );
}
});
});
</Script>
</Head>
<Body>
<Div id = "wrap">
<Ul id = "nav">
<Li> <a href = "# url"> Home </a> </li>
<Li class = "p1 down"> Products
<Ul>
<Li> <a href = "# url"> Flashguns </a> </li>
<Li> <a href = "# url"> Tripods </a> </li>
<Li> <a href = "# url"> Filters </a> </li>
</Ul>
</Li>
<Li class = "p1 down"> Services
<Ul>
<Li> <a href = "# url"> Printing </a> </li>
<Li> <a href = "# url"> Photo Framing </a> </li>
<Li> <a href = "# url"> Retouching </a> </li>
<Li> <a href = "# url"> Archiving </a> </li>
</Ul>
</Li>
</Ul>
</Div>
</Body>
</Html>
The jquery address must be replaced with one that can be found.
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
