模拟多层级连菜单

模拟多层级连菜单

 

演示

 

XML/HTML Code

1. <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>flyout menu</a>  
2.   
3. <a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a>  
4. <div id="news-items" class="hidden">  
5. <ul>  
6.     <li><a href="#">Breaking News</a>  
7.         <ul>  
8.             <li><a href="#">Entertainment</a></li>  
9.             <li><a href="/tags/html5.asp">Politics</a></li>  
10.             <li><a href="#">A&E</a></li>  
11.             <li><a href="#">Sports</a>  
12.                 <ul>  
13.                     <li><a href="#">Baseball</a></li>  
14.                     <li><a href="#">Basketball</a></li>  
15.                     <li><a href="#">A really long label would wrap nicely as you can see</a></li>  
16.                     <li><a href="#">Swimming</a>  
17.                         <ul>  
18.                             <li><a href="#">High School</a></li>  
19.                             <li><a href="#">College</a></li>  
20.                             <li><a href="#">Professional</a>  
21.                                 <ul>  
22.                                     <li><a href="#">Mens Swimming</a>  
23.                                         <ul>  
24.                                             <li><a href="#">News</a></li>  
25.                                             <li><a href="#">Events</a></li>  
26.                                             <li><a href="#">Awards</a></li>  
27.                                             <li><a href="#">Schedule</a></li>  
28.                                             <li><a href="#">Team Members</a></li>  
29.                                             <li><a href="#">Fan Site</a></li>  
30.                                         </ul>  
31.                                     </li>  
32.                                     <li><a href="#">Womens Swimming</a>  
33.                                         <ul>  
34.                                             <li><a href="#">News</a></li>  
35.                                             <li><a href="#">Events</a></li>  
36.                                             <li><a href="#">Awards</a></li>  
37.                                             <li><a href="#">Schedule</a></li>  
38.                                             <li><a href="#">Team Members</a></li>  
39.                                             <li><a href="#">Fan <storng>牛</storng><u>图</u><i>库</i> Site</a></li>  
40.                                         </ul>  
41.                                     </li>  
42.                                 </ul>  
43.                             </li>  
44.                             <li><a href="#">Adult Recreational</a></li>  
45.                             <li><a href="#">Youth Recreational</a></li>  
46.                             <li><a href="#">Senior Recreational</a></li>  
47.                         </ul>  
48.                     </li>  
49.                     <li><a href="#">Tennis</a></li>  
50.                     <li><a href="#">Ice Skating</a></li>  
51.                     <li><a href="#">Javascript <storng>牛</storng><u>图</u><i>库</i> Programming</a></li>  
52.                     <li><a href="#">Running</a></li>  
53.                     <li><a href="#">Walking</a></li>  
54.                 </ul>  
55.             </li>  
56.             <li><a href="#">Local</a></li>  
57.             <li><a href="#">Health</a></li>  
58.         </ul>  
59.     </li>  
60.     <li><a href="#">Entertainment</a>  
61.     <ul>  
62.         <li><a href="#">Celebrity news</a></li>  
63.         <li><a href="#">Gossip</a></li>  
64.         <li><a href="#">Movies</a></li>  
65.         <li><a href="#">Music</a>  
66.         <ul>  
67.             <li><a href="#">Alternative</a></li>  
68.             <li><a href="#">Country</a></li>  
69.             <li><a href="#">Dance</a></li>  
70.             <li><a href="#">Electronica</a></li>  
71.             <li><a href="#">Metal</a></li>  
72.             <li><a href="#">Pop</a></li>  
73.             <li><a href="#">Rock</a>  
74.                 <ul>  
75.                     <li><a href="#">Bands</a>  
76.                         <ul>  
77.                             <li><a href="#">Dokken</a></li>  
78.                         </ul>  
79.                     </li>  
80.                     <li><a href="#">Fan Clubs</a></li>  
81.                     <li><a href="#">Songs</a></li>  
82.                 </ul>  
83.             </li>  
84.         </ul>  
85.         </li>  
86.         <li><a href="#">Slide shows</a></li>  
87.         <li><a href="#">Red carpet</a></li>  
88.     </ul>  
89.     </li>  
90.     <li><a href="#">Finance</a>  
91.     <ul>  
92.         <li><a href="#">Personal</a>  
93.         <ul>  
94.             <li><a href="#">Loans</a></li>  
95.             <li><a href="#">Savings</a></li>  
96.             <li><a href="#">Mortgage</a></li>  
97.             <li><a href="#">Debt</a></li>  
98.         </ul>  
99.         </li>  
100.         <li><a href="#">Business</a></li>  
101.     </ul>  
102.     </li>  
103.     <li><a href="#">Food & Cooking</a>  
104.     <ul>  
105.         <li><a href="#">Breakfast</a></li>  
106.         <li><a href="#">Lunch</a></li>  
107.         <li><a href="#">Dinner</a></li>  
108.         <li><a href="#">Dessert</a>  
109.             <ul>  
110.                 <li><a href="#">Dump Cake</a></li>  
111.                 <li><a href="#">Doritos</a></li>  
112.                 <li><a href="#">Both please.</a></li>  
113.             </ul>  
114.         </li>  
115.     </ul>  
116.     </li>  
117.     <li><a href="#">Lifestyle</a></li>  
118.     <li><a href="#">News</a></li>  
119.     <li><a href="#">Politics</a></li>  
120.     <li><a href="#">Sports</a>  
121.         <ul>  
122.             <li><a href="#">Baseball</a></li>  
123.             <li><a href="#">Basketball</a></li>  
124.             <li><a href="#">Swimming</a>  
125.             <ul>  
126.                 <li><a href="#">High School</a></li>  
127.                 <li><a href="#">College</a></li>  
128.                 <li><a href="#">Professional</a>  
129.                 <ul>  
130.                     <li><a href="#">Mens Swimming</a>  
131.                     <ul>  
132.                             <li><a href="#">News</a></li>  
133.                             <li><a href="#">Events</a></li>  
134.                             <li><a href="#">Awards</a></li>  
135.                             <li><a href="#">Schedule</a></li>  
136.                             <li><a href="#">Team Members</a></li>  
137.                             <li><a href="#">Fan Site</a></li>  
138.                         </ul>  
139.                     </li>  
140.                     <li><a href="#">Womens Swimming</a>  
141.                     <ul>  
142.                         <li><a href="#">News</a></li>  
143.                         <li><a href="#">Events</a></li>  
144.                         <li><a href="#">Awards</a></li>  
145.                         <li><a href="#">Schedule</a></li>  
146.                         <li><a href="#">Team Members</a></li>  
147.                         <li><a href="#">Fan Site</a></li>  
148.                     </ul>  
149.                     </li>  
150.                 </ul>  
151.                 </li>  
152.                 <li><a href="#">Adult Recreational</a></li>  
153.                 <li><a href="#">Youth Recreational</a></li>  
154.                 <li><a href="#">Senior Recreational</a></li>  
155.             </ul>  
156.             </li>  
157.             <li><a href="#">Tennis</a></li>  
158.             <li><a href="#">Ice Skating</a></li>  
159.             <li><a href="#">Javascript Programming</a></li>  
160.             <li><a href="#">Running</a></li>  
161.             <li><a href="#">Walking</a></li>  
162.         </ul>  
163.         </li>  
164.     </ul>  
165. </div>  

 

原文地址:http://www.freejs.net/article_jquerywenzi_301.html