<link rel="stylesheet" type="text/css" href="/css/jstackmenu.css" />
<style>
#stack {  
width: 68px;  
height: 68px;  
padding: 0;  
position: absolute;  
left: 100px;  
bottom: 10px;  
}  

#stack .trigger {  
position: fixed;  
z-index: 50;  
height: 64px;  
width: 64px;  
padding: 2px;  
left: 0;  
bottom: 0;  
cursor: pointer;  

}  

#stack ul {  
position: fixed;  
bottom: 0;  
left: 18px;  
height: 64px;  
width: 32px;  
bottom: 0;  
margin: 0;  
padding: 0;  
}  

#stack ul li {  
display: block;  
padding: 0px;  
width: 32px;  
height: 32px;  
margin: 6px 0;  
}  

#stack ul li .title {  
display: none;  
}  

#stack ul li a:hover .title {  
display: block;  
position: fixed;  
right: 38px;  
bottom: 8px;  
padding: 1px 8px;  
height: 14px;  
font-size: 11px;  
background-color: #fff;  
color: #333;  
font-family: Arial, sans-serif;  
-moz-border-radius: 8px;  
-webkit-border-radius: 8px;  
border-radius: 8px;  

}  

#stack ul li img {  
border-radius: 3px;  
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
box-shadow: 0 0 5px #222;  
-webkit-box-shadow: 0 0 5px #222;  
-moz-box-shadow: 0 0 5px #222;  
-o-box-shadow: 0 0 5px #222;  
border: none 0;  
padding: 2px;  
background-color: #fff;  
}  

#stack ul li a:hover img,  
#stack ul li a:hover .title {  
box-shadow: 0 0 10px #00a;  
-webkit-box-shadow: 0 0 10px #00a;  
-moz-box-shadow: 0 0 10px #00a;  
-o-box-shadow: 0 0 10px #00a;  
}  

#stack .trigger {  
border-radius: 5px;  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
box-shadow: 0 0 3px #222;  
-webkit-box-shadow: 0 0 3px #222;  
-moz-box-shadow: 0 0 3px #222;  
-o-box-shadow: 0 0 3px #222;  
background-color: #7ee6ff;  
}  
</style>

<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.js"></script>

<script type="text/javascript" src="/js/jquery-css-transform.js"></script>
<script type="text/javascript" src="/js/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="/js/jstackmenu.js"></script>

<script>
jQuery( document ).ready( function( ){  
var stack = jQuery( '#stack ul' ).stackmenu( );
jQuery( '#stack .trigger' ).click( function( ){  
stack.stackmenu( 'toggle' );  
} );  
} );  
</script>

<div id="stack">
<div class="trigger"><img src="/images/heart-64x64.png" alt="share" /></div>
<ul>
<li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="/images/twitter-32x32.png" alt="Twitter"></a></li>

<li><a href="http://digg.com/"><span class="title">Digg</span><img src="/images/digg-32x32.png" alt="Digg"></a></li>
<li><a href="http://www.facebook.com/"><span class="title">Facebook</span><img src="/images/facebook-32x32.png" alt="Facebook"></a></li>
<li><a href="http://reddit.com/"><span class="title">Reddit</span><img src="/images/reddit-32x32.png" alt="Reddit"></a></li>
<li><a href="http://stumbleupon.com/"><span class="title">StumbleUpon</span><img src="/images/stumbleupon-32x32.png" alt="StumbleUpon"></a></li>
<li><a href="http://delicious.com/"><span class="title">Delicious</span><img src="/images/delicious-32x32.png" alt="Delicious"></a></li>
<li><a href="http://flickr.com/"><span class="title">Flickr</span><img src="/images/flickr-32x32.png" alt="Flickr"></a></li>

</ul>

</div>