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

有朋友问我，我的 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 伪类。

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

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

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

第三步：添加图标样式

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

第四步：子菜单 HTML 和样式

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

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

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

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

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

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