! ΜΕΝΟΥ ΣΥΡΟΜΕΝΟ ΛΕΥΚΟ

Συρόμενο gadget για ετικέτες...
http://www.dr-blogger.com/2011/11/gadget.html
----------------------------------------------------------------------------------------------------
<style>
/*HOROSCOOP*/ .horoscoop { width:100px; height:400px; position:absolute; left:-100px; 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:grey; 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/AVvXsEj42dDvgEGmdV_uguf-hxG85EgHTOQNIU4rmwDG_t-YmDwFQvbKNw5wO2Y4RrO9cmuNvqGQSHPSlyWEsMDgVHORrBvtQ45Fhof_ZBO6_id8o-Wem9w1h3sXmhvBGnySEVXfPB_YynM5hAtm/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/AVvXsEj42dDvgEGmdV_uguf-hxG85EgHTOQNIU4rmwDG_t-YmDwFQvbKNw5wO2Y4RrO9cmuNvqGQSHPSlyWEsMDgVHORrBvtQ45Fhof_ZBO6_id8o-Wem9w1h3sXmhvBGnySEVXfPB_YynM5hAtm/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/AVvXsEj3uI13ZqqVUTBf46XhyFdC_kVPqMtkEMEQGsap_TZ1wLUzsOxoN6VffqtSTeRYYllhNQfyRch-2qsHCkuNGQ8O0XZh1dTDPrUL8pRwJKw5ERbXvhk28yc32-8FQpz2SzXQWTf12bCUcK2V/s324/close%252520arrow.png)');});
}) ;
});
</script>



<div class="horoscoop">
<div class="trigger" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj42dDvgEGmdV_uguf-hxG85EgHTOQNIU4rmwDG_t-YmDwFQvbKNw5wO2Y4RrO9cmuNvqGQSHPSlyWEsMDgVHORrBvtQ45Fhof_ZBO6_id8o-Wem9w1h3sXmhvBGnySEVXfPB_YynM5hAtm/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">


<!-- ΛΕΥΚΟ          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<a href="http://leuko.gr" target="_parent">
<div class="content" id="horoscoop_0">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjym1r_rmkSRt12jYMUx5xgV3tQmJYY5TcJTIvgJefKTlI1RQAcpMV1vV9EM-wX2En0wPk4Cpqjw0PTfA1nUF3Cmein153gd_shyphenhyphenCuengqgu1RuNp81InaI-RsWKq4L3F04si_WOgPlTm/s640/LEUKOGR300.jpg
" class="logo" />
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">ΛΕΥΚΟ</span>
<span class="catcher">Επίσημη ιστοσελίδα Λαϊκών Ενώσεων Υπερκομματικών Κοινωνικών Ομάδων</span>
</div>
</div>
</a>

<!-- ΔΩΡΟΛΑΧΝΟΣ    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<a href="http://dorolaxnos.blogspot.gr/" target="_parent">
<div class="content" id="horoscoop_1">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAIgh1WUAa1k63MkkC4uOJvPM8BSReftEjyKS-gKmT51L6pWjY06ewnvUInZX9zO-kEUFdxFmgcdpf3hrm47mBHVRaEr5-JvDjDpdgKHuPCNXAE4rjuBrddNAYhgnwVv1GQlbUwZY_zQI/s1600/%CE%94%CE%A9%CE%A1%CE%9F%CE%9B%CE%91%CE%A7%CE%9D%CE%9F%CE%A3+60+60.jpg
" class="logo" />
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">ΔΩΡΟΛΑΧΝΟΣ</span>
<span class="catcher">Ενδιαφέρουσα προσπάθεια για διαφήμιση αλλά και με προεκτάσεις κοινωνικές</span>
</div>
</div>
</a>

<!-- ΕΝΩΣΗ ΑΝΕΡΓΩΝ          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<a href="http://enosianergon.blogspot.gr" target="_parent">
<div class="content" id="horoscoop_2">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_sc3Pl2diumUQ_8XHV2J5m6leW_ER8iqgqK9sedQDgJrXqPLmyQ_49hvTK8JrnxM_ktBefM6C31qi3Xscz5TF3w3BpDH0fYo1lch4MmSQAExgh7OdNJDAUW0rRd3z-ThA3NJTBE-fYuA/s320/%CE%91%CE%9D%CE%95%CE%A1%CE%93%CE%9F%CE%99_%CE%9D%CE%95%CE%9F+500.jpg" class="logo" />
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">ΕΝΩΣΗ ΑΝΕΡΓΩΝ</span>
<span class="catcher">Επίσημη ιστοσελίδα Λαϊκών Ενώσεων Υπερκομματικών Κοινωνικών Ομάδων</span>
</div>
</div>
</a>

<!-- ΕΝΩΣΕΙΣ ΕΛΛΗΝΩΝ          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<a href="http://enosianergon.blogspot.gr" target="_parent">
<div class="content" id="horoscoop_3">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMeRU9ksA8lBAxPGxB83X9rK6Bz45U9eguigeXjhiA4C14oqqjz-XwIZ9BaBzLwtmPkl2QecTrlYiHP_rHy5UNpJ0dEc2ZP4tiueDJ5O2SMy1cjyPgPCdIfuP0MSbKyMt15bgQgfx2z8/s200/%CE%95%CE%95+300+300.jpg" class="logo" />
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">ΕΝΩΣΕΙΣ ΕΛΛΗΝΩΝ</span>
<span class="catcher">ΟΙ Ενώσεις των Λαϊκών Ενώσεων Υπερκομματικών Κοινωνικών Ομάδων</span>
</div>
</div>
</a>

<!-- ΕΦΗΜΕΡΙΔΑ ΤΗΣ HELLENICAGORA    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<a href="http://hellenicagora.blogspot.gr" target="_parent">
<div class="content" id="horoscoop_4">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="http://www.hellenicagora.gr/shared/img/home/logo.png" class="logo" />
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">ΕΦΗΜΕΡΙΔΑ ΤΗΣ HELLENICAGORA</span>
<span class="catcher">Κάθε μέρα όλο και κάτι που έχει ενδιαφέρον</span>
</div>
</div>
</a>

<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<span class="footer">ΘΕΜΑΤΑ ΜΕ ΕΝΔΙΑΦΕΡΟΝ</span>
</div>
</div>
</div>