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.

回答1:

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

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

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

来源：https://stackoverflow.com/questions/9563482/ikea-style-lightbox

标签

javascript

jquery

lightbox