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手风琴演示

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:CSS3手风琴的两种制作方案 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css3-accordion-tutorial.html)

发表评论

请登录后发表评论:

“CSS3手风琴的两种制作方案”有5个评论

  1. 笨小孩_Leo

    display属性,用transition渐变好像无效啊,时间设成任何值都是一样的啊,网上搜了下,也说是无效的

    登录回复
  2. 链接通知 : CSS3创建一个滑出滑入的动画 — 好JSER
  3. 前端博客

    这个使用:checked的案例更加的动画更加的好看。

    登录回复
  4. zencart教程

    都能兼容IE浏览器吗

    登录回复
    • 前端博客

      css3一般不兼容IE9以下浏览器。现在css3在移动方面比较适合。

      登录回复