纯CSS3实现手风琴风格菜单具体步骤

概述有朋友问我，我的demo里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点js，全部用css3来实现的，菜单主要通过使用:target伪类来实现

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

有朋友问我，我的 demo 里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点 Js，全部用 CSS3 来实现的，菜单主要通过使用:target 伪类来实现，教程中我们主要通过使用伪类:before 和:target 来定义样式，使用:target 来实现菜单点击展开子菜单事件，希望你能够喜欢这个教程：

如何使用纯 CSS3 创建手风琴风格菜单呢，菜单主要通过使用:target 伪类来实现，教程中我们主要通过使用伪类:before 和:target 来定义样式，使用:target 来实现菜单点击展开子菜单事件。

:target 使用介绍

CSS3 target 伪类是众多实用的 CSS3 特性中的一个。它用来匹配文档(页面)的 URI 中某个标志符的目标元素。具体来说，URI 中的标志符通常会包含一 个”#”字符，然后后面带有一个标志符名称，比如#respond，target 就是用来匹配 ID 为 respond 的元素的。

现在在页面中，点击一个 ID 链接后，页面只会跳转到相应的位置，但是并不会有比较明显的 UI 标识，使用:target 伪类可以像:hover 等伪类一样对目标元素定义样式。

第一步：HTML 标签结构

一 个简单的无序列表，每个 li 中包含一个超链接和 span，同时为每一个 li 添加一个不同的 ID 和一个连接到这个 ID 的超链接。为了添加样式和展开菜单项下 面的内容，需要使用:target 伪类。

<ul >

<li ID="one" ><a href="#one">我的文件<span>495</span></a></li>

<li ID="two" ><a href="#two">邮件<span>26</span></a></li>

<li ID="three" ><a href="#three">网盘<span>58</span></a></li>

<li ID="four" ><a href="#four">退出登录</a></li>

</ul>

第二步：菜单布局基本样式

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

margin: 0;

padding: 0;

border: none;

outline: none;

text-align:left;

}

.accordion li {

List-style: none;

}

定义菜单项链接样式，添加渐变，阴影的效果，定义字体等。这里没有指定固定的宽度，菜单的 宽度 100%填充它的父元素，如果你想把菜单设置成 300px，你可以给它添加一个父 div，指定宽度为 300px 就可以了。虽然没有指定宽度，但是定义 了最小宽度，保证菜单布局能够正确的显示。

.accordion li > a {

display: block;

position: relative;

min-wIDth: 110px;

padding: 0 10px 0 40px;

color: #fdfdfd;

Font: bold 14px/32px 黑体,宋体;

text-decoration: none;

text-shadow: 0px 1px 0px rgba(0,.35);

background: #6c6e74;

background: -moz-linear-gradIEnt(top,#6c6e74 0%,#4b4d51 100%);

background: -webkit-gradIEnt(linear,left top,left bottom,color-stop(0%,#6c6e74),color-stop(100%,#4b4d51));

background: -webkit-linear-gradIEnt(top,#4b4d51 100%);

background: -o-linear-gradIEnt(top,#4b4d51 100%);

background: -ms-linear-gradIEnt(top,#4b4d51 100%);

background: linear-gradIEnt(top,#4b4d51 100%);

-webkit-Box-shadow: inset 0px 1px 0px 0px rgba(255,255,.1),0px 1px 0px 0px rgba(0,.1);

-moz-Box-shadow: inset 0px 1px 0px 0px rgba(255,.1);

Box-shadow: inset 0px 1px 0px 0px rgba(255,.1);

}

定义数字指示器样式，当然如果你的菜单不需要数字指示器，你打可以删掉这个 HTML 结构中 span 元素。

.accordion li > a span {

display: block;

position: absolute;

top: 7px;

right: 0;

padding: 0 10px;

margin-right: 10px;

Font: normal bold 12px/18px Arial,sans-serif;

background: #404247;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

-webkit-Box-shadow: inset 1px 1px 1px rgba(0,.2),1px 1px 1px rgba(255,.1);

-moz-Box-shadow: inset 1px 1px 1px rgba(0,.1);

Box-shadow: inset 1px 1px 1px rgba(0,.1);

}

第三步：添加图标样式

我们使用:before 为菜单插入图标，图标的宽 高都是 24px，用下面的样式使其正确的显示。我创建了一个 sprite，包含了四个图标的正常和 hover 时候的不同样式。

.accordion > li > a:before {

position: absolute;

top: 0;

left: 0;

content: '';

wIDth: 24px;

height: 24px;

margin: 4px 8px;

background-repeat: no-repeat;

background-image: url(../images/icons.png);

background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before { background-position: -72px -24px; }

第四步：子菜单 HTML 和样式

同样也使用 ul 作为子菜单，放到父菜单的 li 里面，如下代码：

<li ID="one"><a href="#one">我的文件<span>495</span></a>

<ul>

<li><a href="JavaScript:voID(0);"><em>01</em>音乐<span>42</span></a></li>

<li><a href="JavaScript:voID(0);"><em>02</em>视频<span>87</span></a></li>

<li><a href="JavaScript:voID(0);"><em>03</em>图片<span>366</span></a></li>

</ul>

</li>

.sub-menu li a {

Font: bold 12px/32px 黑体,宋体;

color: #797979;

text-shadow: 1px 1px 0px rgba(255,.2);

background: #e5e5e5;

border-bottom: 1px solID #c9c9c9;

-webkit-Box-shadow: inset 0px 1px 0px 0px rgba(255,.1);

}

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,.2);

background: transparent;

border: 1px solID #c9c9c9;

-webkit-Box-shadow: none;

-moz-Box-shadow: none;

Box-shadow: none;

}

.sub-menu em {

position: absolute;

top: 0;

left: 0;

margin-left: 14px;

color: #a6a6a6;

Font: normal 10px/32px Arial,sans-serif;

}

第五步：定义鼠标悬浮和菜单激活时状态样式

当鼠标悬浮和菜单激活时改变 背景为绿色。

accordion > li:hover > a,

.accordion > li:target > a {

color: #3e5706;

text-shadow: 1px 1px 1px rgba(255,.2);

background: #a5cd4e;

background: -moz-linear-gradIEnt(top,#a5cd4e 0%,#6b8f1a 100%);

background: -webkit-gradIEnt(linear,#a5cd4e),#6b8f1a));

background: -webkit-linear-gradIEnt(top,#6b8f1a 100%);

background: -o-linear-gradIEnt(top,#6b8f1a 100%);

background: -ms-linear-gradIEnt(top,#6b8f1a 100%);

background: linear-gradIEnt(top,#6b8f1a 100%);

}

.accordion > li:hover > a span,

.accordion > li:target > a span {

color: #fdfdfd;

text-shadow: 0px 1px 0px rgba(0,.35);

background: #3e5706;

}

.sub-menu li:hover a { background: #efefef; }

第六步：控制子菜单的显示与隐藏

为了隐藏子菜单，我们需要定义子菜单的高度为 0px。当点击父菜单时，为子菜单添加下滑显示的动态效果。为了实现下滑的效果，需要指定子菜单固定的高度。因 为这个教程中子菜单有三个 link，所以这里指定了 98px。如果你想加更多的子菜单就需要修改 height 为所有子菜单的高度和，当然如果你想要让它自 动变化，可以给高度赋值 100%，但是这样下滑的动画效果就没有了。

.accordion li > .sub-menu {

height: 0;

overflow: hIDden;

-webkit-Transition: all .2s ease-in-out;

-moz-Transition: all .2s ease-in-out;

-o-Transition: all .2s ease-in-out;

-ms-Transition: all .2s ease-in-out;

Transition: all .2s ease-in-out;

}

.accordion li:target > .sub-menu {

height: 98px;

}

这样子就可以了，大家可以点击演示地址查看效果。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的纯CSS3实现手风琴风格菜单具体步骤全部内容，希望文章能够帮你解决纯CSS3实现手风琴风格菜单具体步骤所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。