Menu estiloso

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Menu estiloso

Mensagem por #d0C em 17/09/13, 01:48 am

Qual é minha questão:
Olá a todos!
Neste fórum como podem ver, tem um menu com quatro imagens que ao passar o mouse um texto aparece!
Eu já há muito que estou a procura deste efeito mas nunca ninguém me conseguiu ajudar!
Espero que agora alguem me possa ajudar porque é muito importante!

Cumprimentos & Obrigado, Corrente Gráfica!

Endereço do meu fórum:
http://corrente-grafica.forumeiro.com

Versão do fórum:
PUNBB
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Menu estiloso

Mensagem por Diego XD em 17/09/13, 08:46 am

Coloque o codigo no templete "index_body".

Código:
<style>#vertical_slider {color: #999;font-family: Georgia,"Times New Roman",Times,serif;font-size: 1.2em;font-style: italic;font-variant: normal;font-weight:

normal;line-height: 1.2em;list-style: none;margin-bottom: 10px;margin-top: 4px;padding: 0;text-align: center;}
                #vertical_slider li {display: inline;height: 90px;list-style: none;margin: 0 15px 0 0;padding: 0;}
                #vertical_slider li a.rss_feed {background: url(http://i72.servimg.com/u/f72/18/00/02/37/110.png) top left no-repeat;}
                #vertical_slider li a {display: inline-block!important;height: 90px;line-height: 90px;overflow: hidden;text-align: left;white-space:

nowrap;width: 128px;}
                #vertical_slider li a.news {background: url(http://i72.servimg.com/u/f72/18/00/02/37/210.png) top left no-repeat;}
                #vertical_slider li a.suport {background: url(http://i72.servimg.com/u/f72/18/00/02/37/310.png) top left no-repeat;}
                #vertical_slider li a.portfolio {background: url(http://i72.servimg.com/u/f72/18/00/02/37/410.png) top left no-repeat;}
                #vertical_slider li a p {line-height: normal;padding: 0 0 0 135px;}
                #vertical_slider li a p strong {color: #360;font-size: 24px;}</style>


                <script>$(function(){$("#vertical_slider li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"},

{queue:false, duration:450});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450});});});/*To use this you need to load jquery

easing plugins*/$("#vertical_slider.easing li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false,

duration:450, easing:'easeOutBack'});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});});});});</script>
               
<ul id="vertical_slider"><li><a href="/f2-regulamento-staff" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Regulamento</strong>
<br>Antes de participar leia o nosso <br> Regulamento para começar bem <br>nem ser punido.<br></p></a></li>

<li><a href="/f3-anuncios-e-atualizacoes" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Anúncios</strong><br>Venha

ver os nossos anúncios<br> e atualizações feitas durante <br>o fórum.<br> </p></a></li>

<li><a href="/t3-" class="suport" style="width: 128px; overflow: hidden;"><p><strong>Equipe</strong><br>Conheça a equipe que lhe <br>vai ajudar sempre, e

tirar <br>suas dúvidas. </p></a></li>

<li><a href="/f6-espaco-publicidade" class="portfolio" style="width: 128px; overflow: hidden;"><p><strong>Publicidade</strong><br>Divulgue o seu fórum, sem

<br>problemas para evoluir mais <br>o seu fórum e claro é grátis ! </p></a></li></ul>



<link rel="stylesheet" href="http://programando.forum-pro.net/80-ltr.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://illiweb.com/rsc/76/frm/lang/pt.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){});//]]></script>
<script src="/99048.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/11951.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/13980.js" type="text/javascript">
</script><script src="http://programando.forum-pro.net/27425.js" type="text/javascript"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/76/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/76/frm/jquery/toolbar/FAToolbar.js"></script>


<![endif]-->
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
avatar

Diego XD
Nível 7

Masculino
Inscrito dia : 19/03/2013
Mensagens : 95
Pontos Ativos : 173

Ver perfil do usuário http://ultrasims.forum.st/ http://www.facebook.com/diegoqueiroz1234

Resolvido Re: Menu estiloso

Mensagem por #d0C em 17/09/13, 10:11 am

Nao funciona, ao contrario entraga o meu menu todo
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Menu estiloso

Mensagem por Sking em 17/09/13, 10:49 am

Olá,

isso é o simples fato do tema ser você está alterado terá dificuldades para deixa do jeito do menu da Programando.

Até mais!

Sking
Membro do Fórum

Masculino
Inscrito dia : 10/10/2011
Mensagens : 1750
Pontos Ativos : 2484

Ver perfil do usuário https://www.facebook.com/davis.natsu

Resolvido Re: Menu estiloso

Mensagem por #d0C em 17/09/13, 11:02 am

Cara, nao e esse menu aue eu estou falando...
Estou falando daquele menu com quatro imagens, que ao passar o mou a direita um texto e exibido.
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Resolvido Re: Menu estiloso

Mensagem por MateusA em 17/09/13, 11:06 am

Olá,

Nada posso lê fornecer por aqui, apesar do código estar no meu fórum.
É necessário códigos javascript para obter este efeito. Porém, o fdf, não da suporte a códigos javascript.

Cordialmente,
Crazy.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Menu estiloso

Mensagem por Sking em 17/09/13, 11:40 am

Olá,

Ser estive falado dos quadrados está aqui
http://ajuda.forumeiros.com/t84205-espaco-no-quadrados

Até mais!

Sking
Membro do Fórum

Masculino
Inscrito dia : 10/10/2011
Mensagens : 1750
Pontos Ativos : 2484

Ver perfil do usuário https://www.facebook.com/davis.natsu

Resolvido Re: Menu estiloso

Mensagem por #d0C em 17/09/13, 01:24 pm

O crazy já falou tudo, infelizmente não pode dar suporte ao que eu desejo...

Obrigado na mesma.
avatar

#d0C
Membro do Fórum

Masculino
Inscrito dia : 13/09/2013
Mensagens : 1058
Pontos Ativos : 1452

Ver perfil do usuário http://vortextips.wix.com/vortex

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum