Hiranthi's weblog

De IKEA website heeft een vernieuwde weergave van de productoverzicht pagina’s. Op het eerste gezicht lijkt er niks verandert, maar als je met je muis over een product gaat krijg je meer informatie over dat product te zien. In deze tutorial ga ik je laten zien hoe jij dat effect kunt nabootsen.

Grid view

Als eerste hebben we een standaard grid view, gevuld met producten, nodig voor de product-overzicht pagina.

<ul id="products">
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product last">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
</ul>

Voor het gemak heb ik vijf keer hetzelfde product gebruikt (het wordt dus een grid-view met 5 producten op een rij).
Het laatste product heeft niet alleen de class product (de li), maar ook de class last.

Opmaak

Om het geheel te laten werken hebben we ook stijling nodig. Er komt dus geheel geen JavaScript aan te pas!

ul#products
{
  margin:0 0 2em;
}

ul#products li.product
{
  width:19.8%;
  height:200px;
  display:inline;
  float:left;
  border-right:1px solid #eee;
  position:relative;
  <a title="Zie ook Meerdere achtergronden" href="http://hiranthi.nl/tutorials/meerdere-achtergronden/">background</a>:#fff;
  margin:0 0 2em;
}

ul#products li.product:hover
{
  border-right-color:#fff;
  z-index:9;
}

ul#products li.product .info
{
  display:block;
  background:#fff;
}

ul#products li.product .prod-info
{
  padding:1.1em;
}

ul#products li.product .info:hover .prod-info
{
  -moz-box-shadow:0 0 .5em #888;
  -webkit-box-shadow:0 0 .5em #888;
  box-shadow:0 0 .5em #888;
  filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */
  padding:1em;
  border:1px solid #eee;
}

ul#products li.product img
{
  margin:0 auto 5px;
  display:block;
}

ul#products li.product h2
{
  text-transform:uppercase;
  margin:0 0 .5em;
  padding:.5em 0;
  font-size:1.4em;
}

ul#products li.product p
{
  font-size:1.2em;
  margin:0 0 .5em;
  line-height:1.4em;
}

ul#products li.product p.prod-price
{
  font-weight:bold;
  font-size:1.6em;
  line-height:1.8em;
}

ul#products li.last
{
  border:none;
}

ul#products li.product a.prod-link
{
  text-decoration:none;
  color:darkturquoise;
}

ul#products li.product .prod-more-info
{
  display:none;
}

ul#products li.product .info:hover .prod-more-info
{
  display:block;
  width:100%;
}

De z-index:9; op ul#products li.product:hover zorgt ervoor dat de li boven andere elementen gezet wordt. Werkt deze niet bij jou? Dan kan het zijn dat het element (waar deze overheen moet gaan) een hogere z-index heeft. Je kunt de z-index zo hoog maken als je zelf wil (hou wel rekening met evt. Lightbox varianten, zij gebruiken ook een z-index om boven alle elementen te komen).

CSS3

Voor de schaduw maak ik gebruik van CSS3 in plaats van afbeeldingen:

-moz-box-shadow:0 0 .5em #888;
-webkit-box-shadow:0 0 .5em #888;
box-shadow:0 0 .5em #888;

In Internet Explorer wordt CSS3 (nog) niet ondersteund. IE heeft wel filters die eenzelfde resultaat geven (maar deze komen niet door de W3C validatie heen):

filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */

Online demo

Natuurlijk heb ik ook een demo online gezet: IKEA product (grid view) nabootsing.

Print PDF

Ben je op zoek naar een makkelijke manier om je Shopp™ webshop uit te breiden? Dan is Shopplugin.nl voor jou het juiste adres!

Shopplugin.nl geeft jou de mogelijkheid om snel functionaliteiten aan je webshop toe te voegen. Of het nu voor het uitbreiden van je webwinkel is, of om je workflow te vereenvoudigen: het is allemaal mogelijk!

Bekijk snel de webshop – uiteraard ook gebaseerd op Shopp – om te zien wat we jou te bieden hebben!