首页>>导航菜单>>将无序列表转换为垂直多级导航菜单(2020-09-28)

将无序列表转换为垂直多级导航菜单

将无序列表转换为垂直多级导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="htmleaf-content">  
  2.             <h3>这个DEMO可以点击可展开项的任何位置来展开列表。</h3>  
  3.             <ul id="menu-2">  
  4.                 <li>  
  5.                     <h3><span>Online Newspapers</span></h3>  
  6.                     <ul>  
  7.                         <li class="active"><a href="#">CNN</a></li>  
  8.                         <li><a href="#">BBC</a></li>  
  9.                         <li><a href="#">NRK</a></li>  
  10.                     </ul>  
  11.                 </li>  
  12.                 <li>  
  13.                     <h3><span>Funny sites</span></h3>  
  14.                     <ul>  
  15.                         <li><a href="#">Google</a></li>  
  16.                         <li><a href="#">Bing</a></li>  
  17.                         <li><a href="#">Yahoo</a></li>  
  18.                     </ul>  
  19.                 </li>  
  20.                 <li>  
  21.                     <h3><span>Search Engines</span></h3>  
  22.                     <ul>  
  23.                         <li><a href="#">Google</a></li>  
  24.                         <li><a href="#">Bing</a></li>  
  25.                         <li><a href="#">Yahoo</a></li>  
  26.                     </ul>  
  27.                 </li>  
  28.             </ul>  
  29.             <h3>这个DEMO只可以点击可展开项前面的小三角符号来展开列表，点击其它地方会导航到相应的链接上。</h3>  
  30.             <ul id="menu-1">  
  31.                 <li>  
  32.                     <h3><a href="#">Online Newspapers</a></h3>  
  33.                     <ul>  
  34.                         <li class="active"><a href="#">CNN</a></li>  
  35.                         <li><a href="#">BBC</a></li>  
  36.                         <li><a href="#">NRK</a></li>  
  37.                     </ul>  
  38.                 </li>  
  39.                 <li>  
  40.                     <h3><a href="#">Funny sites</a></h3>  
  41.                     <ul>  
  42.                         <li><a href="#">Google</a></li>  
  43.                         <li><a href="#">Bing</a></li>  
  44.                         <li><a href="#">Yahoo</a></li>  
  45.                     </ul>  
  46.                 </li>  
  47.                 <li>  
  48.                     <h3><a href="#">Search Engines</a></h3>  
  49.                     <ul>  
  50.                         <li><a href="#">Google</a></li>  
  51.                         <li><a href="#">Bing</a></li>  
  52.                         <li><a href="#">Yahoo</a></li>  
  53.                     </ul>  
  54.                 </li>  
  55.             </ul>  
  56.         </div>  

 


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