CSS3手风琴的两种制作方案

CSS3手风琴效果，使用到的是css3里面新的属性：:target和:checked

因而从这两种属性出发我们可以制作两种方案。

第一种：:target

<section>
<ul>
<li id="one"><a href="#one">我的朋友 </a>
<ul>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
</ul>
</li>
<li id="two"><a href="#two">我的邻居</a>
<ul>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
</ul>
</li>
<li id="three"><a href="#three">我的应用</a>
<ul>
<li><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li id="five"><a href="#five">我的机器</a>
<ul>
<li><a href="#">Cute Kittens</a></li>
<li><a href="#">Strange “Stuff”</a></li>
<li><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>
.menu ul{line-height:30px;display:none;overflow:hidden;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;transition:all .5s linear}
.menu li:target ul{display:block;border-top:1px solid #3d3d3d;box-shadow:0 1px 0 #888 inset}

关键代码就是上面这两句了，当然<a href="#five">我的机器</a>这个链接是可以随便你放在那个地方的，不必说必须放在这个ID的后面，放在这个锚点的前面也是OK的。也不用UL、LI这种方式，随便你弄，只要保证这个点击的地址对于于一个ID就行了。

第二种：:checked

<div>
<label for="list1">我的同学</label>
<input type="radio" name="list" id="list1" checked="chekced"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list2">我的同学</label>
<input type="radio" name="list" id="list2"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list3">我的同学</label>
<input type="radio" name="list" id="list3"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list4">我的同学</label>
<input type="radio" name="list" id="list4"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
</div>

input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear;
-moz-transition:all .5s linear;
-ms-transition:all .5s linear;
-o-transition:all .5s linear;
transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}

这个:checked就有一定的限制了，那就是需要改变的元素必须在input[type="checkbox"]或者input[type="radio"]之后，否则就会找不到目标哦。

这个是怎么弄的呢？就是通过点击label相应的选中从而来展开或者伸缩菜单的。

同理上面的#list1:checked + ul{display: block;} 的加号你也可以 改成其他的css形式，关键就是要和其他的对应到相关的元素同时不要影响到其他元素就行了。

这两种方案孰优孰劣呢？

相对来说，我会比较喜欢用:checked这种方案，原因有

1.刚进入的时候，可以在HTML里面定义一个展开的盒子（符合手风琴的思路），虽然说第一种也可以，比较麻烦吧，我还不太清楚怎么弄。

2.内容具有cookie性，可以保存上次的checked状态，而target则需要用到链接来区分。

3.多余出来的标签符合html语义，不会需要增加链接。

两种演示 使用到:target的登陆注册首先有一屏是显示的演示 精美的菜单演示

这些都不是你想要的吗？你只是想找个CSS手风琴，兼容IE7及以上吗？我也看了网上的一些案例，不过这些案例都不像手风琴，因为使用到CSS2的都是用hover效果，达不到一直显示在那里，如果你确定你要的是这种效果，那么我这里也给出一个案例，代码很简单，就是设置鼠标移上去的时候盒子的宽度或者高度变化。

CSS2手风琴演示