首页>>导航菜单>>CSS3垂直手风琴折叠菜单(2016-07-13)

CSS3垂直手风琴折叠菜单

CSS3垂直手风琴折叠菜单

 

XML/HTML Code
  1. <ul id="accordion" class="accordion">  
  2.         <li>  
  3.             <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>  
  4.             <ul class="submenu">  
  5.                 <li><a href="#">Photoshop</a></li>  
  6.                 <li><a href="#">HTML</a></li>  
  7.                 <li><a href="#">CSS</a></li>  
  8.                 <li><a href="#">Maquetacion web</a></li>  
  9.             </ul>  
  10.         </li>  
  11.         <li>  
  12.             <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>  
  13.             <ul class="submenu">  
  14.                 <li><a href="#">Javascript</a></li>  
  15.                 <li><a href="#">jQuery</a></li>  
  16.                 <li><a href="#">Frameworks javascript</a></li>  
  17.             </ul>  
  18.         </li>  
  19.         <li>  
  20.             <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>  
  21.             <ul class="submenu">  
  22.                 <li><a href="#">Tablets</a></li>  
  23.                 <li><a href="#">Dispositivos mobiles</a></li>  
  24.                 <li><a href="#">Medios de escritorio</a></li>  
  25.                 <li><a href="#">Otros dispositivos</a></li>  
  26.             </ul>  
  27.         </li>  
  28.         <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>  
  29.             <ul class="submenu">  
  30.                 <li><a href="#">Google</a></li>  
  31.                 <li><a href="#">Bing</a></li>  
  32.                 <li><a href="#">Yahoo</a></li>  
  33.                 <li><a href="#">Otros buscadores</a></li>  
  34.             </ul>  
  35.         </li>  
  36.     </ul>  

 


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