Sidebar переделка с слева на верх

Здравствуйте помогите пожалуйста переделать сидебар в оригенале http://www.andrewsellick.com/examples/sliding-side-bar-scriptaculous/

вот что я переделал

Код (Text):

1. #sideBar{
2. text-align:left;
3. }
4.  
5. #sideBar h2{
6.     color:#FFFFFF;
7.     font-size:110%;
8.     font-family:arial;
9.     margin:10px 10px 10px 10px;
10.     font-weight:bold !important;
11. }
12.  
13. #sideBar h2 span{
14.     font-size:125%;
15.     font-weight:normal !important;
16. }
17.  
18. #sideBar ul{
19.     margin:0px 0px 0px 0px;
20.     padding:0px 0px 0px 0px;
21. }
22.  
23. #sideBar li{
24.     margin:0px 10px 3px 10px;
25.     padding:2px;
26.     list-style-type:none;
27.     display:block;
28.     background-color:#DA1074;
29.     width:177px;
30.     color:#FFFFFF;
31. }
32.  
33. #sideBar li a{
34.     width:100%;
35. }
36.  
37. #sideBar li a:link,
38. #sideBar li a:visited{
39.  
40.     color:#FFFFFF;
41.     font-family:verdana;
42.     font-size:100%;
43.     text-decoration:none;
44.     display:block;
45.     margin:0px 0px 0px 0px;
46.     padding:0px;
47.     width:100%;
48. }
49.  
50. #sideBar li a:hover{
51.  
52.     color:#FFFFFF;
53.     text-decoration:underline;
54. }
55.  
56. #sideBar{
57.     width:93px;
58.     height:30px;
59.     position: relative;
60.     margin-left:283px;
61.     margin-top:-86px;
62.     }
63.  
64. #sideBarTab{
65.  
66.     height:137px;
67.     width:28px;
68. }
69.  
70. #sideBarTab img{
71.     border:0px solid #FFFFFF;
72. }
73.  
74. #sideBarContents{
75.     margin-left:-83px;
76.     overflow:hidden !important;
77.     width:300px;
78.     height:120px;
79. }
80.  
81. #sideBarContentsInner{
82.  
83.     width:200px;
84. }

в итоге панель выезжает не как в оригинале, а именно кнопка остается на верху и просто сбоку появляется скрытая область, и еще не могу найти куда прописать копку актив