Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用弹性盒子实现手风琴菜单效果

  弹性盒子是CSS3中的一个比较纠结的东西,之前的版本改了许多次接口,终于现在稍微稳定了。关于弹性盒子的概念网络上一大堆,我就不详细介绍了。它的作用是将容器盒子的空间按一个权重比例分配给子元素,所以可以很容易的实现手风琴菜单效果。
  下面这个效果就没有使用JavaScript,只使用了一些CSS3特性完成的 <style>
.panel {
  border:1px solid #CCC;
  width:400px;height:300px;
  display:flex;
  flex-flow:row wrap;
}
.panel>div {
  flex:1;width:100px;
  border-left:1px solid #CCC;
  transition:flex 500ms ease;
}
.panel>div:first-child {border:0px;}
.panel>div:hover {flex:5;}
</style>
<div class="panel">
  <div style="background:#FEE;"></div>
  <div style="background:#FFE;"></div>
  <div style="background:#EFE;"></div>
  <div style="background:#EFF;"></div>
  <div style="background:#EEF;"></div>
  <div style="background:#FEF;"></div>
</div>

  这个例子已经充分体现出了弹性盒子的特点。当然,低版本浏览器无法兼容上,所以实际用途并不大。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^