css - 制作垂直图像菜单

Question

我很难使用图像制作垂直菜单。

有5 张图像，我想以“折叠”模式显示所有图像，单击后，单击的图像应展开，其他图像应折叠以腾出空间。

我快到了：http: //jsbin.com/eyepam/2/

但我不能让它完美地工作：

• 菜单永远不会扩展到完整的可用宽度（右侧总是有一个白边）
• 重置尺寸时动画不够平滑，我想让动画比它更平滑（看起来它首先静止，然后展开点击的动画，想法是展开点击的动画并折叠所有其他动画... 顺利）

任何对 CSS 有更好了解的人都可以帮助我到达那里吗？

Answer 1

在这里查看我的解决方案

jQuery代码：

var winWidth = $(window).width(),
    activeWidth = winWidth / 2,
    nonActiveWidth = (winWidth - activeWidth) / 4 ;

$(function () {
  $("ul li")
    .height($(window).height())
    .click(function () {

      $(this) // expand active one
        .animate({ width: activeWidth , queue: false});
      $("ul li") // collapse others
        .not(':eq('+$(this).index()+')')
        .animate({ width: nonActiveWidth , queue: false});
    });

});

我将宽度调整移至 CSS：

重要的部分，使用box-sizing:border-box使边框显示为“内部边框”，因此它根本不会干扰我们对<li>' 宽度的计算。

.container ul li {
  overflow: hidden;
  width: 20%;
  display: inline-block;
  float: left;
  border-left: 4px solid #000;
  height: 768px;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;   
}