首页>>Jquery文字>>模拟多层级连菜单(2014-04-10)

模拟多层级连菜单

模拟多层级连菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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