宜家风格灯箱 [英] IKEA Style Lightbox

问题描述

以下是宜家产品的产品列表.当用户将鼠标悬停在产品上时，会触发一个灯箱，并且该部分会水平展开:

Here is a product listing of IKEA products. When the user hovers over a product, a lightbox is triggered and the section expands horizontally:

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

这里使用了什么灯箱?还是可以操纵哪个灯箱来实现这一目标?谢谢.

What Lightbox is used here? Or which Lightbox can be manipulated to achieve this? Thank you.

推荐答案

由于我们生活在未来，因此仅使用CSS就可以轻松实现这种效果.

Since we are living in the future, you can quite easily achieve this effect using CSS alone.

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

Here's a quick example. First the unremarkable markup:

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

现在，该样式(我不会解释，但我尝试对其进行评论):

Now, the style (I won't explain, but I tried to keep it well commented):

.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;
}

真的是这样.我还添加了仅在悬停时可见的元素:

This is it really. I also added elements that are only visible on hover:

.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 /

You can see a full example on jsFiddle: http://jsfiddle.net/kobi/sqfAS/

边界是一些次要点(它们在元素之间加倍-您甚至可以以-1的边距将其加倍)和IE9(仍不支持transition)-但弹出窗口仍然有效.另一个可用性/可访问性问题是使用 Tab 菜单不起作用(以我的观点，IKEA也不起作用...)

A few minor point are the borders (they are doubled between elements - you can even it out with a -1 margin), and IE9, which still doesn't support transition - but the popup still works. Another usability/accessibility issue is that the menu doesn't work using Tab (in my defense, the IKEA one doesn't work either...)

这篇关于宜家风格灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！