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
50
ms;
transition:
left
50
ms;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.additional-resources.show-content
{
left
:
0px
;
-webkit-transition:
left
50
ms;
transition:
left
50
ms;
-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
;
}