Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</script>
   <script type="text/javascript">
    $(function () {
   // Stack initialize
   var openspeed = 300;
   var closespeed = 300;
   $('.stack>img').toggle(function(){
      var vertical = 0;
      var horizontal = 0;
      var $el=$(this);
      $el.next().children().each(function(){
         $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
         vertical = vertical + 55;
         horizontal = (horizontal+.75)*2;
      });
      $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
        .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
      $el.animate({paddingTop: '0'});
   }, function(){
      //reverse above
      var $el=$(this);
      $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
      $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
      $el.animate({paddingTop: '35px'});
   });
   
   // Stacks additional animation
   $('.stack li a').hover(function(){
      $("img",this).animate({width: '56px'}, 100);
      $("span",this).animate({marginRight: '30px'});
   },function(){
      $("img",this).animate({width: '50px'}, 100);
      $("span",this).animate({marginRight: '0'});
   });
});
    </script>


Code:


.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute;   right:-40px; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   display:block;
   height: 14px;
   position:absolute;
   top: 17px;
   right:60px;
   line-height: 14px;
   border: 0;
   background-color:#000;
   padding: 3px 10px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   color: #fcfcfc;
   text-align: center;
   text-shadow: #000 1px 1px 1px;
   opacity: .85;
   filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }


Code:


   <div class="stack">
      <img src="http://i50.tinypic.com/23gxp2p.png" alt="stack"/>
      <ul id="stack">
         <li><a href=""><span>Aperture</span><img src="http://img109.imageshack.us/img109/1750/apertures.png" alt="Aperature" /></a></li>
         <li><a href="#"><span>All Examplsssssssses</span><img src="http://img63.imageshack.us/img63/987/photoshopy.png" alt="Photoshop" /></a></li>
         <li><a href="example3.html"><span>Example 3</span><img src="http://img190.imageshack.us/img190/7320/safariw.png" alt="Safari" /></a></li>
         <li><a href="example2.html"><span>Example 2</span><img src="http://img404.imageshack.us/img404/943/codaz.png" alt="Coda" /></a></li>
         <li><a href="index.html"><span>Example 1</span><img src="http://img339.imageshack.us/img339/7783/finder.png" alt="Finder" /></a></li>         
      </ul>
   </div>

ankillien wrote:Hello,

I think just giving away a code for copy-pasting can't be considered as a tutorial. A tutorial should contain something to learn from.

ankillien wrote:Installing jQuery plug-ins is very easy. I don't think it should be accepted unless there is something to learn about coding or hot it works etc.

Did you write the whole code(JS,CSS,HTML)? or it is taken from other site?