您现在的位置是：网站首页> 编程资料编程资料

超酷炫 CSS3垂直手风琴菜单_css3_CSS_网页制作_

2021-09-13 881人已围观

简介这篇文章主要为大家详细介绍了一款非常炫酷的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="#">Photoshopa>li>
<li><a href="#">HTMLa>li>
<li><a href="#">CSSa>li>
<li><a href="#">Maquetacion weba>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="#">Javascripta>li>
<li><a href="#">jQuerya>li>
<li><a href="#">Frameworks javascripta>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="#">Tabletsa>li>
<li><a href="#">Dispositivos mobilesa>li>
<li><a href="#">Medios de escritorioa>li>
<li><a href="#">Otros dispositivosa>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="#">Googlea>li>
<li><a href="#">Binga>li>
<li><a href="#">Yahooa>li>
<li><a href="#">Otros buscadoresa>li>
ul>
li>
ul>

CSS代码：

CSS Code复制内容到剪贴板