超酷炫 CSS3垂直手风琴菜单

CSS3目前非常流行，在很多开发者看来，CSS3是制作网页动画和网页特效的神器，很多意想不到的效果都可以用CSS3实现。但是今天我们要分享一款用CSS3实现的非常普通的菜单，它是一个垂直的手风琴折叠菜单，先来看看效果图：

实现代码如下：

XML/HTML Code复制内容到剪贴板

<ul id="accordion" class="accordion">  

 <li>  

  <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>  

  <ul class="submenu">  

   <li><a href="#">Photoshop</a></li>  

   <li><a href="#">HTML</a></li>  

   <li><a href="#">CSS</a></li>  

   <li><a href="#">Maquetacion web</a></li>  

  </ul>  

 </li>  

 <li>  

  <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>  

  <ul class="submenu">  

   <li><a href="#">Javascript</a></li>  

   <li><a href="#">jQuery</a></li>  

   <li><a href="#">Frameworks javascript</a></li>  

  </ul>  

 </li>  

 <li>  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!