DEMO
Ο ΚΩΔΙΚΑΣ:
<style>
/*HOROSCOOP*/ .horoscoop { width:100px; height:400px; position:absolute; left:0px; top:30px; } .horoscoop .contenu { width:332px; height:361px; position:absolute; top:50px; left:-588px; z-index:10; padding-top:28px; padding-bottom:28px; padding-left:17px; padding-right:17px;} .horoscoop .contenu .border-contenu { width:383px; height:517px; position:absolute; background:black; top:0px; left:0px; z-index:5; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} .horoscoop .contenu .incontenu { width:352px; height:461px; position:relative; background:white; opacity:1; z-index:6;} .horoscoop .trigger { width:60px; height:324px; position:relative; float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png) no-repeat center; cursor:pointer; z-index:11;} .horoscoop .contenu .footer { position:absolute; bottom:-23px; margin-left:50%; width:300px; left:-150px; text-align:center; color:white; font-size:15px;} .horoscoop .contenu .content { position:absolute; width:322px; height:180px; padding-left:30px; cursor:pointer;} .horoscoop .contenu .separation { position:absolute; width:332px; height:5px; top:180px; font-size:12px; } .horoscoop .contenu #horoscoop_0 {top:8px;} .horoscoop .contenu #horoscoop_1{ top:100px;} .horoscoop .contenu #horoscoop_2{top:192px;} .horoscoop .contenu #horoscoop_3{ top:284px;} .horoscoop .contenu #horoscoop_4 { top:376px;} .horoscoop .contenu .content .title { position:relative; display:block; width:100%; text-align:left; font-size:14px; top:5px; margin-left:10px; font-weight:bold; margin-bottom:5px;} .horoscoop .contenu .content .logo { position:relative; float:left; width:109px; height:112px; margin-top:4px;} .horoscoop .contenu .content .catcher { position:relative; margin-left:10px; width:238px; float:left; font-size:13px; line-height:17px} .horoscoop .contenu .content .plus { clear: left; float: left; font-size: 12px; font-weight: bold; position: relative; right: 10px; text-align: right; width: 100%;} .opacity_8 { opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
</style>
<script type="text/javascript" src="http://www.horoscope.fr/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.horoscoop .trigger').click(function(e){
if($('.horoscoop .contenu').hasClass('open')) $('.horoscoop .contenu').removeClass('open').stop().animate({left:'-588px'},800,function(){$('.horoscoop .trigger').css('background','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png)');});
else $('.horoscoop .contenu').addClass('open').stop().animate({left:'30px'},800,function(){$('.horoscoop .trigger').css('background','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jJOUfyleUdlR7zbmTTsPaFXogjxPNOm9PkQAXP3OYD-Bg0G4XfsoqYRIZGRZQ4rDMCldSmL_B0ZnG7cWQ5b8gA3uKkLCoDTw-e75Gi3vq8GbB0h2C_SvndPj3MwQRe2oitGcCBW6HMkK/s324/close%252520arrow.png)');});
}) ;
});
</script>
<div class="horoscoop">
<div class="trigger" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; "></div>
<div class="contenu round_10" style="left: -588px; ">
<div class="border-contenu opacity_8"></div>
<div class="incontenu round_10">
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 1" target="_parent">
<div class="content" id="horoscoop_0">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image1" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title 1</span>
<span class="catcher">demo1</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 2" target="_parent">
<div class="content" id="horoscoop_1">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 2" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title 2</span>
<span class="catcher">demo 2</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 3" target="_parent">
<div class="content" id="horoscoop_2">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 3" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title3</span>
<span class="catcher">demo3</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 4" target="_parent">
<div class="content" id="horoscoop_3">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 4" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title4</span>
<span class="catcher">demo4</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 5" target="_parent">
<div class="content" id="horoscoop_4">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image5" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title5</span>
<span class="catcher">demo5</span>
</div>
</div>
</a>
<span class="footer">down title</span>
</div>
</div>
</div>
*** το -588 είναι το πόσο αριστερά πηγαίνει το πλαίσιο (αν χρησιμοποιείτε ευρεία οθόνη)
***αλλάξτε τα χρωματιστά σημεία με τα αντίστοιχα δικά σας (εικόνα, λινκ, τίτλος, κείμενο)
*** το down title είναι ο τίτλος που βάζω στο κάτω μαύρο μέρος του συρόμενου...
***ότι απορίες έχετε γράψτε τις στα σχόλια, να σας τις εξηγήσω...(η σε email)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!! (Πηγή δεν έχω, αλλά μπορείτε να θεωρήσετε πηγή τη διεύθυνση στο μέσα στο .js )
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}