Menu Flutuante com Efeito

[FusioN]

Bom para quem não sabe esse menu é aquele que fica do lado da pagina, para ver melhor o que é veja no final do tópico o resultado do tutorial:

# TUTORIAL #

1° Acesse seu AdminCP -> Look & Feel -> sua skin -> GlobalTemplate -> globalTemplate

2° Vamos procurar por:

        </body>
</html> 

3° Logo acima dele adicione este código abaixo:

<div id="menuflutuante" class="hide">
<img id="mfimagem" src="SUA IMAGEM" width="33" height="82">
<iframe id="mfframe" scrolling="no" frameborder="0"  style="overflow:hidden; width:238px; height:365px;background:#FFF;"  allowTransparency="false"></iframe>
</div>
<script type="text/javascript">
var animating=false,
effect_in=false,
effect_out=false,
inout=false;

Event.observe(window, 'load', function()
{
$('menuflutuante').className='show';
Event.observe($('mfimagem'), 'click', function()
{
if ( inout )
{
if( typeof effect_in == 'object' )
{
effect_in.cancel();
}

effect_out = new Effect.Morph('menuflutuante',
{
style: {
right: '-242px'
},
transition: Effect.Transitions.spring
});
inout = false;
} else {
if ( !$('mfframe').src )
{
$('mfframe').src='PÁGINA DO MENU';
}

if( typeof effect_out == 'object' )
{
effect_out.cancel();
}

effect_in = new Effect.Morph('menuflutuante',
{
style: {
right: '-2px'
},
transition: Effect.Transitions.spring
});
inout = true;
}
});
}
);
</script> 

4° Agora vamos acessar a aba CSS -> ipb_styles.css

5° No final de todo o código do "ipb_styles.css"iremos adicionar o seguinte código abaixo:

#menuflutuante
{
        width:272px;
        height:370px;
        position: fixed;
        top: 60px;
        right: -240px;
        overflow: hidden;
        z-index:9999;
}

#menuflutuante iframe
{
        float: left;
}

#menuflutuante img
{
        float: left;
        cursor: pointer;
} 

6° Agora edite o "LINK DA IMAGEM" e "LINK DO MENU". Vamos por passos, pegue uma imagem que quer utilizar, por exemplo a imagem abaixo:

Ela ficará flutuando no lado direito do fórum!

7° Agora o "LINK DO MENU", você deverá fazer qualquer html com seu menu, e faser upload para o seu ftp.

8° Agora pegue o link do seu iframe, e adicione corretamente ao primeiro código citado acima.

Ex.: "[Somente usuários registrados podem vem os links. ]

Resultados:

Informação

Você pode obter resultados mais interessantes usando CSS!

Creditos: Gustavo
Fonte: SOS INVISION