Menu lateral

Qual é minha questão:
Alguem sabe se há a possibilidade de colocar um menu como esse no meu forum?

http://www.andrewsellick.com/examples/sliding-side-bar/#



Medidas que eu tomei para corrigir o problema:
-

Links e imagens do meu problema:
-

Endereço do meu fórum:


Versão do meu fórum:
PHPBB3

Tem como sim, mas, eu tenho o da esquerda! Este código aqui:

Código:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script>
 <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script>
 <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script>
 <style>
 body{
 font-size:75%;
 }
 a{
 outline: none;
 }
 a:active{
 outline: none;
 }
 #sideBar{
 text-align:left;
 }
 #sideBar h2{
 color:#F0FFFF;
 font-size:110%;
 font-family:arial;
 margin:10px 10px 10px 10px;
 font-weight:bold !important;
 }
 #sideBar h2 span{
 font-size:125%;
 font-weight:normal !important;
 }
 #sideBar ul{
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px;
 }
 #sideBar li{
 margin:0px 5px 5px 10px;
 padding: 0 0 0 10px;
 list-style-type:none;
 display:block;
 background-color:#DA1074;
 width:177px;
 color:#FFFFFF;
 }
 #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:0 0 0 20px;
 width:100%;
 }
 #sideBar li a:hover{
 color:#FFFF00;
 text-decoration:underline;
 }
 #sideBar{
 position: fixed;
 width: auto;
 height: auto;
 top: 140px;
 left:0px;
 background-image:url(http://2.bp.blogspot.com/-nUGCKbZIyb4/Tvq4n0Ix8CI/AAAAAAAAACk/cPMmEKDYqto/s320/left.collapse.border.png);
 background-position:top right;
 background-repeat:repeat-y;
 }
 #sideBarTab{
 float:left;
 height:137px;
 width:28px;
 }
 #sideBarTab img{
 border:0px solid #FFFFFF;
 }
 #sideBarContents{
 float:left;
 overflow:hidden !important;
 width:200px;
 height:320px;
 }
 #sideBarContentsInner{
 width:200px;
 }</style>
 <div id="sideBar">
 <div id="sideBarContents" style="display:none;">
 <div id="sideBarContentsInner">
 <h2>Menu<span> HJ</span></h2>
 <ul>
 <li><a href="Link 1">Nome 1</a></li>
 <li><a href="Link 2">Nome 2</a></li>
 <li><a href="Link 3">Nome 3</a></li>
 <li><a href="Link 4">Nome 4</a></li>
<li><a href="http://habbojoy.forumeiros.com/h2-hj-etiqueta">HJ Etiqueta</a></li>
 </ul>
 </div> </div>
 <a id="sideBarTab" href="#"><img alt="sideBar" src="http://1.bp.blogspot.com/-gPACiBoLjnI/TxPJ-2PsgfI/AAAAAAAAAIw/mQGIlkBHf_4/s320/sidebarcollapse.png" title="sideBar" /></a>
 </div>

Note que no código tem isto:

<li><a href="Link 1">Nome 1</a></li>
<li><a href="Link 2">Nome 2</a></li>
<li><a href="Link 3">Nome 3</a></li>
<li><a href="Link 4">Nome 4</a></li>

No "Link", coloque o link que irá redirecionar ao clicar! Em "Nome", coloque o nome do menu! Exemplo:

Código:

<li><a href="www.ajuda.forumeiros.com">FDF</a></li>

Agora, para colocar este código, crie em um novo Widget! Caso não saiba criar um novo Widget, veja este tutorial:

https://ajuda.forumeiros.com/t15885-faq-gerenciar-os-widgets-do-forum

NOTA: Este Widget causa alguns bugs na página! O mesmo terá que ser editado por você ou alguém que conheça do assunto!

Espero ter ajudado!

Valeu, resolvido!