Menú desplegable con efecto deslizante

#sideBar{
text-align:left;
}

#sideBar h3{
margin:10px 10px 10px 10px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
font-weight:bold !important;
}

#sideBar h3 span{
font-size:125%;
font-weight:normal !important;
}

#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074; /* Color de fondo de las pestañas */
width:177px;
color:#FFFFFF; /* Color del texto de las pestañas */
}

#sideBar li a{
width:100%;
}

#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

#sideBar li a:hover{
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:underline; /* Subrayado en el link al pasar el cursor */
}

#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQjWiFy4Tb6yAA48bvWQ3upZjU1JxR_w6BS50Sra1cjA8mWBBdNePxl6P1B2heRWQnXmjMTuXuupcMOaIvVOkmLHlkPoNcIFbxhyphenhyphenY6dolYh4k6sLY8cRxRDutXm4Cbl83CQr7nqnBr_2M/s1600/background.png);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0;
}

#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px; /* Alto del menú */
}

#sideBarContentsInner{
width:200px;
}

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

<script type='text/javascript'>
var isExtended = 0;
function slideSideBar(){
new Effect.toggle(&#39;sideBarContents&#39;, &#39;blind&#39;, {scaleX: &#39;true&#39;, scaleY: &#39;true;&#39;, scaleContent: false});
if(isExtended==0){
new Effect.Fade(&#39;sideBarContents&#39;,
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
new Effect.Fade(&#39;sideBarContents&#39;,
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}}
function init(){
Event.observe(&#39;sideBarTab&#39;, &#39;click&#39;, slideSideBar, true);
}
Event.observe(window, &#39;load&#39;, init, true);
</script>

<div id='sideBar'>
<a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_IbqQsIyY348kgW8GqFaTCd2KAuSOC4HVbHtacXF-KgrBtXomacbKhdw-OpT-IO2qA3ov5aZQFVav1gp_5kYmCPC8XfcrJQ0vvxS1SO75fNi1NZ-CSH5t6LllcdKsTbTx09sGiCmN4ZU/s1600/slide-button.gif' title='sideBar'/></a>
<div id='sideBarContents' style='display:none;'>
<div id='sideBarContentsInner'>
<h3><span>Contenido</span></h3>
<ul>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a href='URL del enlace'>Pestaña 3</a></li>
<li><a href='URL del enlace'>Pestaña 4</a></li>
<li><a href='URL del enlace'>Pestaña 5</a></li>
<li><a href='URL del enlace'>Pestaña 6</a></li>
</ul>
</div>
</div>
</div>