Olá a todos,

Hoje iremos fazer uma barra lateral de SHOPPING

Primeiro insira o código html:

Código:

<div id="vitrine">
            
            <p class="pub">Shopping <b>RAAFS</b>©
               <a href="#" rel="nofollow" target="_blank" class="exit" onclick="document.getElementById('vitrine').style.display='none';"> </a>
               <a href="#" rel="nofollow" class="oa" target="_blank"> </a>
            </p>
            
            <ul id="menuprodutos">
               <a href="#" target="_blank" rel="nofollow" title="1" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                  <img width="90" height="90" src="/imagens/1.png" title="1" alt="1" itemprop="image">
                  <p class="produto" itemprop="name">Template 1</p>
                  <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$15.00</span></p>
                  <p class="cartoes">HTML + CSS</p>
               </a>
               
               <a href="#" target="_blank" title="2" rel="nofollow" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                  <img width="90" height="90" src="/imagens/2.png" title="2" alt="2" itemprop="image">
                  <p class="produto" itemprop="name">Sistema de Notícias</p>
                  <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$5.00</span></p>
                  <p class="cartoes">PHP + CSS</p>
               </a>
               
               <a href="#" target="_blank" rel="nofollow" title="One Piece" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                  <img width="90" height="90" src="/imagens/3.png" title="2" alt="2" itemprop="image">
                  <p class="produto" itemprop="name">Encriptador </p>
                  <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$10.00</span></p>
                  <p class="cartoes">HTML + JS</p>
               </a>
               
               <a href="#" target="_blank" rel="nofollow" title="Fairy Tail" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                  <img width="90" height="90" src="/imagens/4.png" title="3" alt="3" itemprop="image">
                  <p class="produto" itemprop="name">Template 2</p>
                  <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$20.00</span></p>
                  <p class="cartoes">HTML + CSS + JS</p>
               </a>
               
            </ul>
         </div>

Bom, para funcionar precisa de um CSS.

Código:

#vitrine:hover {
   right:0px;
   -moz-transition-delay: 0s;
    -moz-transition-duration: 0.6s;
    -moz-transition-property: #vitrine;
    -moz-transition-timing-function: ease-in-all;
   -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-property: #vitrine;
    -webkit-transition-timing-function: ease-in-all;
}
#vitrine {
    background: url("http://i.imgur.com/upNlPqJ.png") no-repeat scroll left 60px transparent !important;
    display: block;
    float: left;
    height: 290px;
    padding: 0 0 0 63px;
    position: fixed;
    right: -714px;
    top: 30%;
    width: 714px;
    z-index: 99999;
   -moz-transition-delay: 0s;
    -moz-transition-duration: 0.6s;
    -moz-transition-property: #vitrine;
    -moz-transition-timing-function: ease-in-all;
   -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-property: #vitrine;
    -webkit-transition-timing-function: ease-in-all;
}
#vitrine .pub {
   border-bottom: 1px solid #CBCBCB;
   border-right: 1px solid #CBCBCB;
   border-left: 1px solid #CBCBCB;
    border-top: 1px solid #CBCBCB;
    color: #5F5F5F;
    display: block;
    left: right;
    font-family: Arial;
    font-size: 14px;
    height: 46px;
    line-height: 50px;
    margin: -14px 0 0;
    overflow: hidden;
    padding: 0 0 0 20px;
    position: relative;
    width: 692px;
    z-index: -1;
   background:#efefef;
   text-align: left;
}
#vitrine .pub .oa {
    background: url("http://i.imgur.com/2aC3TpS.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    height: 34px;
    margin-top: 6px;
    text-indent: -5000px !important;
    text-decoration:none;
   width: 127px;
}
#vitrine .pub .exit {
    background: url("http://i.imgur.com/u86ZYcl.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    height: 22px;
    margin: 12px 15px 10px 20px;
    text-indent: -5000px !important;
    width: 23px;
   text-decoration:none;
}
#vitrine .pub span {
   display:block;
   width:10px;
   height:10px;
   background:#000;
}
#vitrine #menuprodutos {
   background:#efefef;
    border-left: 1px solid #CBCBCB;
   border-right: 1px solid #CBCBCB;
   border-bottom: 1px solid #CBCBCB;
    height: 240px;
    overflow: hidden;
    padding: 5px;
   width:702px;
   margin:0;
}
#vitrine #menuprodutos a {
    border-radius: 0 30px 0 0;
    color: #000000;
    display: inline-table;
    font-family: Myriad Pro;
    font-size: 14px;
    margin-left: 10px;
   margin-top:10px;
    overflow: hidden;
    padding: 20px 10px 0 10px;
    text-align: center;
    text-decoration: none;
    width: 136px;
   height:190px !important;
   border-top:1px solid #cbcbcb;
   border-left:1px solid #cbcbcb;
   border-right:1px solid #cbcbcb;
   background: none repeat scroll 0 0 #fff;
   border-bottom: 2px solid #cbcbcb;
   box-shadow:2px 2px 0 0 #cbcbcb;
}
#vitrine #menuprodutos a:hover {
    background: none repeat scroll 0 0 #efefef;
    text-decoration: none;
}
#vitrine #menuprodutos a img {
    height: 110px;
    width: 110px;
}
#vitrine_ #menuprodutos p { margin:0; text-align:right; width:133px;font-family: Arial;}
#vitrine #menuprodutos a .cartoes {color:#F2641A; font-size:12px; font-weight:bold;}
#vitrine #menuprodutos a .valor {
    line-height:18px;
   color:#C50000;
   font-size:16px;
   font-weight:bold;
   text-align:center;
}
#vitrine #menuprodutos a .produto {
   margin-top: 22px;
   color:#222;
   font-size:14px;
   text-align:center;
}


TAMANHO DAS IMAGENS DO SHOPPING: 123PX x 123PX

A logomarca: 125PX x 34PX

Botão fechar: 22PX x 21PX

A aba: 64PX x 200PX

Pré-Visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Gostei bastante.

Eu imaginei uma coisa mas no fim foi outra :S
Achei bem legal o resultado