All you need, you can find in the page source.
You can try to add this and modify on your page:
<div class="additional-resources">
<div class="content">
</div>
<a href="javascript:void(0)" class="pull-button"></a>
</div>
<script type="text/javascript">
$(document).ready(function () {
jQuery(".pull-button").click(function () {
jQuery(".additional-resources").toggleClass("show-content");
}
);
});
</script>
And you need to add this in your CSS file (and, of course, you need to adjust this code to your environment ):
.additional-resources
{
height: 208px;
position: fixed;
top: 50%;
margin-top: -85px;
left: -200px;
z-index: 1000;
-webkit-transition: left 50ms;
transition: left 50ms;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.additional-resources.show-content
{
left: 0px;
-webkit-transition: left 50ms;
transition: left 50ms;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.additional-resources .content
{
background: url(img/add-res-bg.png) repeat-x;
height: 160px;
float: left;
padding: 25px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
line-height: normal;
}
.additional-resources .content A,
.additional-resources .content A:focus
{
width: 167px;
display: block;
font-family: 'BebasNeueRegular';
font-size: 19px;
text-decoration: none;
margin: 8px 0px;
padding-left: 10px;
border-left: solid 3px #119cd6;
clear: both;
float: left;
line-height: normal;
color: #119cd6;
}
.additional-resources .content A:hover
{
color: #fff;
border-left: solid 3px #fff;
}
.additional-resources A.pull-button
{
background: url(img/add-res-buttons.png) no-repeat center left transparent;
display: block;
width: 81px;
height: 208px;
position: absolute;
top: 0px;
right: -81px;
}
.additional-resources a:hover
{
background-position: center right;
}