Menu Flutuante com Efeito
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 -> [Only registered and activated users can see links. Click Here To Register...] Look & Feel -> sua skin -> GlobalTemplate -> globalTemplate
2° Vamos procurar por:
Código PHP:
</body>
</html>
3° Logo acima dele adicione este código abaixo:
Código PHP:
<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:
Código PHP:
#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.
Resultados:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Informação
| |
Você pode obter resultados mais interessantes usando CSS! |  |
Creditos: Gustavo
Fonte: SOS INVISION
