Hola foro!!! He optado por poner en un botón "Compartir" los dibujos de mi galería manga, las redes sociales aparecen en una caja, pero a menudo, cuando pincho en el botón se despliega y cuando intento poner el ratón encima de cierra la caja...
Os pongo el código que he utilizado:
Código:
<script>
$(document).ready(function(){
$("ul.subShare").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subShare*)
$("ul.topShare li").click(function() { //When trigger is clicked...
//Following events are applied to the subShare itself (moving subShare up and down)
$(this).parent().find("ul.subShare").slideDown('fast').show(); //Drop down the subShare on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subShare").slideUp('slow'); //When the mouse hovers out of the subShare, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
el css:
Código:
ul.topShare {
display: table;
float: left;
list-style: none outside none;
margin: 0;
padding: 5px;
}
ul.topShare li {
float: left;
/*height: 30px;*/
margin: 0;
padding: 0;
position: relative;
}
ul.topShare li a {
/*color: #FFFFFF;*/
display: block;
float: left;
/*height: 30px;*/
text-decoration: none;
}
ul.topShare li a:hover {
}
ul.topShare li .subhover {
cursor: pointer;
}
ul.topShare li ul.subShare {
background: none repeat scroll 0 0 #ffffff;
border-radius: 15px 15px 15px 15px ;
-moz-border-radius:15px 15px 15px 15px ;
-webkit-border-radius: 15px 15px 15px 15px ;
-o-border-radius: 15px 15px 15px 15px ;
border: thin solid #007FFF;
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 10px;
padding: 5px;
position: absolute;
top: 15px;
width: 141px;
z-index: 1000;
}
ul.topShare li ul.subShare li {
clear: both;
margin: 0;
padding: 0;
width: 150px;
z-index: 1000;
}
html ul.topShare li ul.subShare li a {
/*
background: url("dropdown_linkbg.gif") no-repeat scroll 10px center #487B1E;
float: left;
padding-left: 20px;
width: 180px;
*/
}
html ul.topShare li ul.subShare li a:hover {
background: url("dropdown_linkbg.gif") no-repeat scroll 10px center #ADE187;
color: #487B1E;
}
Y por último la "caja" con el botón:
Código HTML:
<div>Compartir: <b>"Últimos fanarts de jugadorx en FanArt"</b>
<ul class="topShare">
<li><a href="#null">[compartir]</a>
<ul class="subShare">
<li><div class="fb-like" data-href="http://www.fanart.nippon-tour.com%2Fultimosde%2Fjugadorx%2F55%2F" data-send="false" data-layout="button_count" data-width="121" data-show-faces="false"></div></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tinyurl.com/blsgzsk" data-text="" data-lang="es" data-hashtags="">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<li><!-- Coloca esta etiqueta donde quieras que se muestre el botón +1. --> <g:plusone size="medium" href="http://www.fanart.nippon-tour.com%2Fultimosde%2Fjugadorx%2F55%2F"></g:plusone></li>
<li><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=%DAltimos+fanarts+de+jugadorx+en+FanArt&u=http://www.fanart.nippon-tour.com%2Fultimosde%2Fjugadorx%2F55%2F" target="_blank" title="Añadir a Yahoo! MyWeb"><img src="http://www.nippon-tour.com/blogs/imagenes/icosBlogs/v2/yahoo_32.png" alt="Añadir a Yahoo! MyWeb" vspace="1" hspace="1" align="left"></a></li>
<li><a href="http://meneame.net/submit.php?url=http://www.fanart.nippon-tour.com%2Fultimosde%2Fjugadorx%2F55%2F" target="_blank" title="Añadir a Menéame"><img src="http://www.nippon-tour.com/blogs/imagenes/icosBlogs/v2/meneame_32.png" alt="Añadir a Menéame" vspace="1" hspace="1" align="left"></a></li>
</ul>
</li>
</ul>
</div>
El ejemplo está online aquí:
http://www.fanart.nippon-tour.com/item/2435/he-vuelto/
Gracias!!!