Question

以下是宜家产品的产品清单。当用户将鼠标悬停在产品上时，会触发灯箱并且该部分会水平扩展：

http://www.ikea.com/my/en/catalog/categories/departments/eating/16043/

这里使用什么灯箱？或者可以操纵哪个Lightbox来实现这一目标？谢谢。

Answer 1

由于我们生活在未来，你可以很容易地使用CSS来实现这种效果。

这是一个简单的例子。首先是不起眼的标记：

<ul class="Menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

现在，风格（我不会解释，但我试着保持良好的评论）：

.Menu {list-style:none; margin: 1em 1em}

.Menu > li {
    float:left; text-align:center; padding: 15px 30px; /* size of the box */
    width: 50px; height: 30px; overflow:hidden; /* fixed size */
    border:solid 1px silver;
    background-color:white; /* boxes are over each other when hovered */
    /* z-index is needed so hovered boxes are in front of other boxes */
    position:relative; z-index:100; 
     /* showing off. Not for IE. */
    transition: 0.5s;
    -o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;
}

.Menu > li:hover {
    padding: 20px 35px 35px; /* larger */
    /* keep other boxes on same position (this is the real trick here) */
    margin: -5px -5px -20px; /* math! this + new padding = old padding */
    z-index:110; /* in front of other boxes */
    /* special effects: */
    border-color: #777;
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
    border-radius:3px;
}

这是真的。我还添加了仅在悬停时可见的元素：

.VisibleOnHover {visibility:hidden;opacity:0;
    background-color:#ff6; border:solid 1px #994; padding:2px 4px; margin: 2px;
    position:absolute; font-size:small;
    transition: 0.5s; -o-transition: 0.5s;
    -webkit-transition: 0.5s; -moz-transition: 0.5s;
}

.Menu > :hover > .VisibleOnHover {visibility:visible;opacity:1;}

.VisibleOnHover.Bottom {bottom:0;left:0;right:0;}
.VisibleOnHover.TopLeft {top:0;right:0;}

您可以在jsFiddle上看到完整的示例： http://jsfiddle.net/kobi/sqfAS/

一些小问题是边框（它们在元素之间加倍 - 你甚至可以用-1边距加倍）和IE9，它仍然不支持transition - 但弹出窗口仍然可以工作。另一个可用性/可访问性问题是使用 Tab 菜单不起作用（在我的辩护中，宜家也不起作用......）

宜家风格灯箱

1 个答案: