超酷炫 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> <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>
<ul class="submenu"> <li><a href="#">Tablets</a></li>
<li><a href="#">Dispositivos mobiles</a></li> <li><a href="#">Medios de escritorio</a></li>
<li><a href="#">Otros dispositivos</a></li> </ul>
</li> <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>
<ul class="submenu"> <li><a href="#">Google</a></li>
<li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li>
<li><a href="#">Otros buscadores</a></li> </ul>
</li> </ul>

学习交流

如何查找有故障的配件

热门图片

猜你喜欢的新闻

猜你喜欢的关注