首页>>导航菜单>>CSS3手风琴菜单 可同时折叠多个菜单(2016-08-11)

CSS3手风琴菜单 可同时折叠多个菜单

CSS3手风琴菜单 可同时折叠多个菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul>  
  2.     <li class="block">  
  3.         <input type="checkbox" name="item" id="item1" />     
  4.         <label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label>  
  5.         <ul class="options">  
  6.             <li><a href="#"><i aria-hidden="true" class="icon-search"></i> Find New Friends</a></li>  
  7.             <li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>  
  8.             <li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>  
  9.         </ul>  
  10.     </li>  
  11.     <li class="block">  
  12.         <input type="checkbox" name="item" id="item2" />     
  13.         <label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label>  
  14.         <ul class="options">  
  15.             <li><a href="#"><i aria-hidden="true" class="icon-movie"></i> My Videos <span>7</span></a></li>  
  16.             <li><a href="#"><i aria-hidden="true" class="icon-download"></i> My Downloaded Videos <span>3</span></a></li>  
  17.             <li><a href="#"><i aria-hidden="true" class="icon-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li>  
  18.         </ul>  
  19.     </li>  
  20.     <li class="block">  
  21.         <input type="checkbox" name="item" id="item3" />     
  22.         <label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label>  
  23.         <ul class="options">  
  24.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-deviantart"></i> My Deviant Art</a></li>  
  25.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-dribbble"></i> Latest Dribbble Images</a></li>  
  26.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-flickr"></i> Sample Flickr Stream</a></li>  
  27.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-picassa"></i> Sample Picasa Stream</a></li>  
  28.         </ul>  
  29.     </li>  
  30.     <li class="block">  
  31.         <input type="checkbox" name="item" id="item4" />     
  32.         <label for="item4"><i aria-hidden="true" class="icon-microphone"></i> Podcasts <span>1</span></label>  
  33.         <ul class="options">  
  34.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-music"></i> CSS-Tricks</a></li>  
  35.         </ul>  
  36.     </li>  
  37.     <li class="block">  
  38.         <input type="checkbox" name="item" id="item5" />     
  39.         <label for="item5"><i aria-hidden="true" class="icon-android"></i> Robots <span>3</span></label>  
  40.         <ul class="options">  
  41.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-eye"></i> Hal 9000</a></li>  
  42.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-cloud"></i> Skynet</a></li>  
  43.             <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-reddit"></i> Johnny 5</a></li>  
  44.         </ul>  
  45.     </li>  
  46. </ul>  

 


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