VSEpodrad.ru

<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>