Widget retrátil

3 participantes

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

Tópico resolvido Widget retrátil

Mensagem por Gabriel D. Sperb 02.07.14 17:13

  • Descrição:
Olá galera. Eu tentei de algumas maneiras com um code que eu tinha e saiu bem desconfigurado, mas eu queria saber se alguém poderia me ajudar numa questão. Tipo... Eu estava querendo que parte dos widgets do meu fórum fossem retráteis. No meu fórum há widget cheios de botões, pois há várias área e tópicos que o jogadores estão sempre indo e precisam ver. Por isso, pra não ficar aquele monte de botões um abaixo do outro, pensei em fazer com que eles ficassem retraídos e, assim que alguém clicasse com o cursor encima de algum botão, eles se expandissem. 


Meu fórum é esse: xmenmarvelrpg.forumeiros.com


e os botões que eu pensei em ficar retráteis são esses:

Widget retrátil Foto_210


Se alguém puder ajudar, eu fico muito agradecido. Mas caso contrário, agradeço mesmo assim pela atenção. Obrigado.

  • Informações:
Fórum:xmenmarvelrpg.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:Widget,retrátil



Última edição por Gabriel D. Sperb em 05.07.14 3:08, editado 1 vez(es)
Gabriel D. Sperb

Gabriel D. Sperb
*

Membro desde : 29/04/2013
Mensagens : 34
Pontos : 64

http://xmenmarvelrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Dr. 02.07.14 18:29

Olá, queira ler este tópico:

Até mais.
Dr.

Dr.
Hiper Membro

Membro desde : 04/02/2013
Mensagens : 3072
Pontos : 3415

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Gabriel D. Sperb 02.07.14 21:30

Cara, vlw pela dica, mas eu criei os dois widgets que o cara mandou, com os codes e tudo mais, os arrastei pra area dos widgets do fórum e não aconteceu nada. eles nem aparecem na coluna da esquerda, local no qual eu os coloquei. Mas obrigado mesmo assim Piscada
Gabriel D. Sperb

Gabriel D. Sperb
*

Membro desde : 29/04/2013
Mensagens : 34
Pontos : 64

http://xmenmarvelrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Alex Habilidade 03.07.14 1:02

Olá,

Deixa-me ver se entendi, vamos com base na imagem indicada em sua questão, o senhor quer que ao clicar no botão Regras apareça mais opções que no caso seria os links dos tópicos?
Caso seja positiva a resposta, peço que forneça o código desse seu widget e também alguns links para que ue poça fazer os sub botões já com alguns links para você Feliz
Alex Habilidade

Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Gabriel D. Sperb 03.07.14 1:08

Na verdade eu queria que estes botões que você está vendo ficassem retraídos em um outro botão. Entende? Tipo, ao clicar em um botão, vamos dizer que nome seria "MENU", estes botões que eu demonstrei na imagem iriam deslizar, expandindo, como aqueles templates que retraem e expandem os posts, mas nesse caso seriam só alguns botões. Abaixo estarei colocando o code do widget que eu utilizo. Mas já te agradeço pela atenção. Vlw cara.

Código:
<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: #660000; opacity:1.0px; font-size: 10px; letter-spacing: 1px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style>
<div class="sidebar">
   
   <table valign="relative">
      
      <tbody>
         <tr>
            
            <td>
               
               <div style="width: 230px; padding:10px; height: 100%; background-color: #000; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
                   <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #ffffff;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong> </strong>
                  </div><br /> <img src="http://i39.servimg.com/u/f39/17/68/38/04/menu_p15.jpg" border="0" alt="" /> Bem vindo ao <strong><span style="color: #A4D3EE;">X-MEN MARVEL RPG</span></strong>. "Nosso RPG é baseado no Universo XMarvel. O Universo XMarvel é uma criação exclusiva desse RPG. É uma ruptura dimensional do Universo 616, universo principal dos Quadrinhos da Marvel, baseado no mundo real, utilizado como pano de fundo em comum para histórias de diferentes séries em quadrinhos, e de cenário para encontros entre os personagens. Ou seja, a maioria das leis que valem para o 616 valem aqui, mas nosso Universo caminha independente do 616. Além disso, alguns personagens mortos no Universo 616, voltaram à vida no Universo XMarvel, sem contudo que alguém tenha conhecimento sobre suas mortes, nem sobre o que aconteceu no período que estiveram mortos no 616. Em outros termos é como se nunca tivessem morrido. É nesse contexto que nos encontramos. <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/nmenu212.jpg" /> <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #FFFFFF;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong></strong>
                  </div><br />
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f40-regras-e-tutoriais" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Regras</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t444-trama" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Trama</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t489-lista-de-cannons" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Cannons</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f41-registros-avatares-poderes" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Registros</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f11-protocolo-de-poderes" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Poderes</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f39-fichas-dos-personagens" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Fichas</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t333-lista-de-desvantagens" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Desvantagens</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t308-pericias" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Perícias</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t608-nos-queremos-voce-torne-se-um-narrador-estagiario#1199" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Estágio</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t484-area-de-transacoes#1594" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Área de Transações</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t713-area-de-uniformes-de-combate#1595" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Uniformes de Combate</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                   <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/arsena15.jpg" /> <br />
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t510-arsenal-da-shield#978" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da S.H.I.E.L.D.</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t420-arsenal-de-armas?highlight=arsenal" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Thunderbolts</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t548-arsenal-dos-vingadores?highlight=arsenal" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Vingadores</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t481-arsenal-de-equipamentos#916" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da HYDRA</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t735-arsenal-da-x-factor#1706" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Factor</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t579-arsenal-da-x-force#1092" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Force</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t543-arsenal-de-combate-asgardiano#" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal Asgardiano</span></span></a>
                  </div>
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t823-arsenal-do-clube-do-inferno#2144" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal do Clube do Inferno</span></span></a>
                  </div>
                  
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
Gabriel D. Sperb

Gabriel D. Sperb
*

Membro desde : 29/04/2013
Mensagens : 34
Pontos : 64

http://xmenmarvelrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Alex Habilidade 05.07.14 0:18

Olá,

Troque por este e veja se é isto que o senhor quer:
Código:

<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: #660000; opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style> <script>
jQuery(function () {
    jQuery('#menu1, #menu2').hide();
    jQuery('#botaomenu1').click(function () {
        jQuery('#menu1').toggle('slow');
    });
    jQuery('#botaomenu2').click(function () {
        jQuery('#menu2').toggle('slow');
    });
});
</script>
<div class="sidebar">
   
   <table valign="relative">
      
      <tbody>
         <tr>
            
            <td>
               
               <div style="width: 230px; padding:10px; height: 100%; background-color: #000; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
                   <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #ffffff;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong> </strong>
                  </div><br /> <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/menu_p15.jpg" /> Bem vindo ao <strong><span style="color: #A4D3EE;">X-MEN MARVEL RPG</span></strong>. "Nosso RPG é baseado no Universo XMarvel. O Universo XMarvel é uma criação exclusiva desse RPG. É uma ruptura dimensional do Universo 616, universo principal dos Quadrinhos da Marvel, baseado no mundo real, utilizado como pano de fundo em comum para histórias de diferentes séries em quadrinhos, e de cenário para encontros entre os personagens. Ou seja, a maioria das leis que valem para o 616 valem aqui, mas nosso Universo caminha independente do 616. Além disso, alguns personagens mortos no Universo 616, voltaram à vida no Universo XMarvel, sem contudo que alguém tenha conhecimento sobre suas mortes, nem sobre o que aconteceu no período que estiveram mortos no 616. Em outros termos é como se nunca tivessem morrido. É nesse contexto que nos encontramos. <img src="http://i39.servimg.com/u/f39/17/68/38/04/nmenu212.jpg" border="0" alt="" /> <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #FFFFFF;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong></strong>
                  </div><br />
                  <div id="botaomenu1" class="wid">
                      <a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Menu</span></span></a>
                  </div>
                  
                  <div id="menu1">
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f40-regras-e-tutoriais"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Regras</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t444-trama"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Trama</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t489-lista-de-cannons"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Cannons</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f41-registros-avatares-poderes"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Registros</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f11-protocolo-de-poderes"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Poderes</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f39-fichas-dos-personagens"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Fichas</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t333-lista-de-desvantagens"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Desvantagens</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t308-pericias"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Perícias</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t608-nos-queremos-voce-torne-se-um-narrador-estagiario#1199"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Estágio</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t484-area-de-transacoes#1594"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Área de Transações</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t713-area-de-uniformes-de-combate#1595"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Uniformes de Combate</span></span></a>
                     </div>
                     
                  </div>
                  
                  <p>
                     
                  </p>
                   <img src="http://i39.servimg.com/u/f39/17/68/38/04/arsena15.jpg" border="0" alt="" /> <br />
                  <p>
                     
                  </p>
                  
                  <div id="botaomenu2" class="wid">
                      <a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Menu Arsenais</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div id="menu2">
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t510-arsenal-da-shield#978"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da S.H.I.E.L.D.</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t420-arsenal-de-armas?highlight=arsenal"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Thunderbolts</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t548-arsenal-dos-vingadores?highlight=arsenal"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Vingadores</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t481-arsenal-de-equipamentos#916"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da HYDRA</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t735-arsenal-da-x-factor#1706"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Factor</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t579-arsenal-da-x-force#1092"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Force</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t543-arsenal-de-combate-asgardiano#"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal Asgardiano</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t823-arsenal-do-clube-do-inferno#2144"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal do Clube do Inferno</span></span></a>
                     </div>
                     
                  </div>
                  
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
Alex Habilidade

Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget retrátil

Mensagem por Gabriel D. Sperb 05.07.14 3:02

Bah cara. ficou perfeito. era exatamente isso que eu queria. muito obrigado pela ajuda brow. vlw mesmo!!!  Positivo Positivo Positivo Positivo Positivo Positivo Positivo 
Gabriel D. Sperb

Gabriel D. Sperb
*

Membro desde : 29/04/2013
Mensagens : 34
Pontos : 64

http://xmenmarvelrpg.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos