Stacked Social sharing buttons with jstackmenu

Jstackmenu is a jquery plugin providing a feature to stack the items into a menu.Its a very cool plugin to make a stack menu.So implementing the stacked effect to social buttons and adding them to your blogger or website

DEMO1 DEMO2

.

<div id="stack">
<div class="trigger">
<img alt="share" src="http://moronicbajebus.com/blog/jstackmenu/files/icons/heart-64x64.png" /></div>
<ul>
<li><a href="http://twitter.com/"><span class="title">Twitter</span><img alt="Twitter" src="https://sites.google.com/site/fuzionproblogger/home/twitter.png" /></a></li>
<li><a href="http://digg.com/"><span class="title">Digg</span><img alt="Digg" src="https://sites.google.com/site/fuzionproblogger/home/digg.png" /></a></li>
<li><a href="http://www.facebook.com/"><span class="title">Facebook</span><img alt="Facebook" src="https://sites.google.com/site/fuzionproblogger/home/facebook.png" /></a></li>
<li><a href="http://reddit.com/"><span class="title">Reddit</span><img alt="Reddit" src="https://sites.google.com/site/fuzionproblogger/home/reddit.png" /></a></li>
<li><a href="http://stumbleupon.com/"><span class="title">StumbleUpon</span><img alt="StumbleUpon" src="https://sites.google.com/site/fuzionproblogger/home/stumble.png" /></a></li>
<li><a href="http://delicious.com/"><span class="title">Delicious</span><img alt="Delicious" src="https://sites.google.com/site/fuzionproblogger/home/delicious.png" /></a></li>
<li><a href="http://flickr.com/"><span class="title">Flickr</span><img alt="Flickr" src="https://sites.google.com/site/fuzionproblogger/home/flickr.png" /></a></li>
</ul>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript">
</script>
<script src="http://moronicbajebus.com/blog/jstackmenu/files/jstackmenu.js" type="text/javascript">
</script>
<script>
 
  jQuery( document ).ready( function( ){
   var stack = jQuery( '#stack ul' ).stackmenu( ); 
   jQuery( '#stack .trigger' ).click( function( ){
    stack.stackmenu( 'toggle' );
   } );
  } );
</script>
<style>

#stack {
   padding: 0;
   position: fixed;
   left: 100px;
   bottom: 100px;
  }

#stack .trigger {
   position: absolute;
   z-index: 50;
   height: 64px;
   width: 64px;
   padding: 2px;
   left: 0;
   top: 0;
   
   cursor: pointer;
   
   
  }
  
  #stack ul {
   position: absolute;
   top: 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: absolute;
   right: 38px;
   top: 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;
  }
.ui-stackmenu {
 position: relative;
}

.ui-stackmenu-item {
 position: absolute;
}
</style>