Javascript-форум - Выдвижная панель

Sav2907,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body{

}
#button {
    position: fixed;
    top: 0px;
    left: 0px;
    background: #ff7700;
    width: 70px;
    height: 70px;
    font: 40px Georgia;
    color: #fff;
    text-align: center;
    border-radius: 0 5px 5px 0;
    background-image: url(http://www.qwa7.net/images/user_upload/homepage.png);
    background-repeat: no-repeat;
    background-position: center;
    transition: width .6s linear .9s, height .8s  linear .3s;

    }
#button:hover{
   transition: width .3s  linear, height .2s  linear .3s;
   width: 180px;
   height: 220px;
}

#button:hover .item{
  left: 0px;
}

.item{
    position:  relative;
    top: 0px;
    left: -150px;
    background: #ff7700;
    width: 150px;
    height: 60px;
    padding: 10px 0 0 0;
    transition: left .2s  linear;
}
#test0 {
  transition-delay: .4s;
}
#test1 {
   transition-delay: .2s;
}
#test2 {
  transition-delay: 0s;
}
#button:hover #test0 {
  transition-delay: 0s;
}
#button:hover #test1 {
  transition-delay: .2s;
}
#button:hover #test2 {
  transition-delay: .4s;
}
  </style>

</head>

<body>
<div id="button">
    <div id="test0" class="item">
        <a href="">Test0</a>
    </div>
    <div id="test1" class="item">
        <a href="">Test1</a>
    </div>
    <div id="test2" class="item">
        <a href="">Test2</a>
    </div>
</div>


</body>
</html>