Widget personalizado

Detalhes da questão

Endereço do fórum: http://aquariumbrasil.forumeiro.com
Versão do fórum: phpBB3

Descrição

Criei um Widget com esse codigo abaixo porém o mesmo deu erro na hora de logar e cadastrar, como faço para que ele funcione sem dar esse problema novamente?

Código:

 <style>
button.accordion {
    background-color: #D9EFFF;
    color: #d9efff;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ADDEDE;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: #D9EFFF;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
<h2>
</h2>
<p>
</p>
<button class="accordion">
    <strong><a href="http://aquariumbrasil.forumeiro.com/">Inicio</a></strong>
</button>
<button class="accordion">
    <strong><a href="http://aquariumbrasil.forumeiro.com/c5-category">Administração</a></strong>
</button>
 
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c3-category"><strong>Aquapaisagismo e Projetos</strong></a>
</button>
 
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Aquarismo Doce</strong></a>
</button>
<div class="panel">
      
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Peixes de Água Doce</strong></a>
   </button>
      
   <div class="panel">
      
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c13-caracideos-tetras-neons-e-mais"><strong>Caricídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c8-ciclideos"><strong>Ciclídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c10-guppies-e-poeciliideos"><strong>Lebistes</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c11-killifishes-cyprinodontiformes"><strong>Killifishes</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c16-betta-e-anabantideos"><strong>Betta</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c17-peixe-arco-iris"><strong>Arco-íris</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c18-cobitideos-botias-e-dojos"><strong>Cobtídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c19-peixes-gato-cascudos-peixes-de-fundo"><strong>Cascudos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c20-ciprinideos-kinguios-carpas-e-lagos"><strong>Kinguios</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c14-invertebrados"><strong>Invertebrados</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c9-outras-especies"><strong>Outros</strong></a>
      </button>
      
   </div>
      
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c21-album-de-fotos"><strong>Álbum de Fotos</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c22-alimentos-vivos-e-receitas"><strong>Alimentos</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c23-aquarismo-doce"><strong>Aquarismo Geral</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c26-faca-voce-mesmo"><strong>Faça você Mesmo</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c27-lojas-e-links"><strong>Lojas e Links</strong></a>
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
</div>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c15-aquarismo-marinho"><strong>Aquarismo Marinho</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c1-submissoes-ao-forum"><strong>Submissões ao fórum</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c12-parceiros"><strong>Parceiros</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c7-vendas-e-anuncios"><strong>Vendas e Anúncios</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c33-revista-aquarium-brasil"><strong>Revista Aquarium Brasil</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c32-lixeira"><strong>Lixeira</strong></a>
</button>
 <script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
</script>

Olá,

Não vejo o Widget que se referi ativo. O senhor poderia ativa-lo para que eu possa verificar o que esta ocorrendo.

Até mais!

Acabei de ativar o mesmo, caso vc não esteja logada não irá conseguir visualizar a área de loguin ou cadastro.


Edit: Deixei o widget desabilitado para que os usuários tenham acesso ao fórum.

@Ketholy

Boa tarde, se você ou qualquer outro puder me dar um suporte estou online, o que realmente quero é um menu no estilo sanfona vertical (accordion) se for possível por favor me ensinem a melhor forma pois o que fiz bugou meu fórum na pagina de loguin.

Nota: quero esse menu para colocar junto aos Widgets do forum

BrunoLemos escreveu:@Ketholy

Boa tarde, se você ou qualquer outro puder me dar um suporte estou online, o que realmente quero é um menu no estilo sanfona vertical (accordion) se for possível por favor me ensinem a melhor forma pois o que fiz bugou meu fórum na pagina de loguin.

Nota: quero esse menu para colocar junto aos Widgets do forum

Boa tarde BrunoLemos,

Peço que o senhor tenha um pouco de paciência, o código repassado contém algumas falhas, precisarei editar e testa-lo para que ele funcione corretamente e o seu problema seja sanado. Porém irei precisar de algumas informações: Esse código foi o senhor que elaborou? Caso não de onde o retirou?.

Aguardo as informações, até mais.

@Ketholy

Grato pelo seu retorno

O codigo eu que editei porem a base tirei deste site: https://www.w3schools.com/howto/howto_js_accordion.asp

BrunoLemos escreveu:@Ketholy

Grato pelo seu retorno

O codigo eu que editei porem a base tirei deste site: https://www.w3schools.com/howto/howto_js_accordion.asp

Troque o código por esse:

Código:

<style>
button.accordion {
  background-color: #D9EFFF;
  color: #d9efff;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
  background-color: #ADDEDE;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  background-color: #D9EFFF;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<h2>
</h2>
<p>
</p>
 
<button class="accordion">
     <strong><a href="http://aquariumbrasil.forumeiro.com/">Inicio</a></strong>
</button>
 
<button class="accordion">
     <strong><a href="http://aquariumbrasil.forumeiro.com/c5-category">Administração</a></strong>
</button>
 
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c3-category"><strong>Aquapaisagismo e Projetos</strong></a>
</button>
 
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Aquarismo Doce</strong></a>
</button>
<div class="panel">
          
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Peixes de Água Doce</strong></a> 
   </button>
          
   <div class="panel">
                 
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c13-caracideos-tetras-neons-e-mais"><strong>Caricídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c8-ciclideos"><strong>Ciclídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c10-guppies-e-poeciliideos"><strong>Lebistes</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c11-killifishes-cyprinodontiformes"><strong>Killifishes</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c16-betta-e-anabantideos"><strong>Betta</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c17-peixe-arco-iris"><strong>Arco-íris</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c18-cobitideos-botias-e-dojos"><strong>Cobtídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c19-peixes-gato-cascudos-peixes-de-fundo"><strong>Cascudos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c20-ciprinideos-kinguios-carpas-e-lagos"><strong>Kinguios</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c14-invertebrados"><strong>Invertebrados</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c9-outras-especies"><strong>Outros</strong></a>     
      </button>
             
   </div>
          
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c21-album-de-fotos"><strong>Álbum de Fotos</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c22-alimentos-vivos-e-receitas"><strong>Alimentos</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c23-aquarismo-doce"><strong>Aquarismo Geral</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c26-faca-voce-mesmo"><strong>Faça você Mesmo</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c27-lojas-e-links"><strong>Lojas e Links</strong></a> 
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
</div>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c15-aquarismo-marinho"><strong>Aquarismo Marinho</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c1-submissoes-ao-forum"><strong>Submissões ao fórum</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c12-parceiros"><strong>Parceiros</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c7-vendas-e-anuncios"><strong>Vendas e Anúncios</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c33-revista-aquarium-brasil"><strong>Revista Aquarium Brasil</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c32-lixeira"><strong>Lixeira</strong></a>
</button><script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function() {
  this.classList.toggle("active");
  var panel = this.nextElementSibling;
  if (panel.style.maxHeight){
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
 }
}
</script>

Creio que agora vá funcionar, testei e todos os links estão ativos e com o redirecionamento funcional.

Infelizmente o problema permanece o mesmo tem algo que possamos fazer, para melhorar este código simplesmente algum tutorial que me ensine a fazer este tipo de menu funcionar?

Edit: O Widget também faz com que a pagina de postagem não funcione

BrunoLemos escreveu:Infelizmente o problema permanece o mesmo tem algo que possamos fazer, para melhorar este código simplesmente algum tutorial que me ensine a fazer este tipo de menu funcionar?

Edit: O Widget também faz com que a pagina de postagem não funcione

Estranho, ele está completamente funcional no meu fórum de teste, queira checar: http://jogosrpg-com-br.forumeiros.com/forum. O senhor se referia aos links que não estava funcionando ou eu entendi errado seria a aparência que queria mudar?

Acessei seu forum de testes e não consigo visualizar a área de loguin também uso o Chrome Atualizado, o widget funciona porem ele buga outras áreas do meu fórum.


Basicamente o que eu quero fazer é isso aqui ó:

Primeiramente seria contra as regras copiar alguma funcionalidade do FDF, em segundo tenho algo parecido com o que deseja, mais o senhor que terá que edita-lo a seu gosto.

Código:

Código:

 <script src="http://illiweb.com/fa/js_16/collapsible_faq.js" type="text/javascript"></script>
    <script>
    jQuery(document).ready(function() {
      jQuery('.toggleable').css('display', 'none');
     
      jQuery('#forunslist').click( function() {
          jQuery('#toggle1').animate({
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);

          jQuery('#toggle2').animate({
            width: '0px',
            height: '0px',
            opacity: '0%',
            display: 'block',
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);
      });
     
      jQuery('#forunslist2').click( function() {
          jQuery('#toggle2').animate({
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);

          jQuery('#toggle1').animate({
            width: '0px',
            height: '0px',
            opacity: '0%',
            display: 'block',
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);
      });
    });
    </script><div id="toggle1">

    <dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onclick="return CFAQ.display('l1', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l1', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/questions.png" style="width: 15px;height: 15px" border="0"> Forumeiros e você</div></dd><dd style="display:none;" id="l1"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Regulamento-e-staff-f4/">Regulamento e staff</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Anuncios-e-atualizacoes-f1/">Anúncios e atualizações</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t23.htm">Perguntas e respostas...</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t6745.htm">Tutoriais e astúcias</a></span></dd><dd onclick="return CFAQ.display('l2', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l2', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/admin.png" style="width: 15px;height: 15px" border="0"> Ajuda e suporte</div></dd><dd style="display:none;" id="l2"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-de-conexao-f6/">Problemas de conexão</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-um-script-f7/">Questões sobre códigos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-o-painel-de-controle-f8/">Questões sobre Painel C...</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../administrar-a-aparencia-do-seu-forum-f9/">Questões sobre a aparência</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-diversos-f10/">Questões diversas</a></span></dd><dd onclick="return CFAQ.display('l3', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l3', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/magic.png" style="width: 15px;height: 15px" border="0"> Serviços para usuários</div></dd><dd style="display:none;" id="l3"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/criacoes-graficas-f71/">Criações Gráficas</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="/-h2.htm">Galeria de trabalhos gráficos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../hitskincom-tire-suas-duvidas-f24/">Hitskin.com</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-c9/">Espaço publicidade</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/forum-de-analises-f50/">Fórum de análises</a></span></dd><dd onclick="return CFAQ.display('l4', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l4', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/fenetres.png" style="width: 15px;height: 15px" border="0"> Miscelânea</div></dd><dd style="display:none;" id="l4"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/sugestoes-e-melhoras-f48/">Sugestões / Melhoras</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../discussoes-gerais-f12/">Discussões gerais</a></span></dd><dd onclick="return CFAQ.display('l5', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l5', true);" onfocus="this.blur();"><img src="http://i47.tinypic.com/1115fmg.png" style="width: 15px;height: 15px" border="0"> Forumeiros</div></dd><dd style="display:none;" id="l5"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/" target="_blank">Criar Fórum grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/criar-forum/condicoes-gerais.htm" target="_blank">Condições Gerais</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/ferramentas/" target="_blank">Ferramentas de usuário</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/litigation/" target="_blank">Litígio</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.directorioforuns.com/" target="_blank">Diretório dos fóruns</a></span></dd><dd onclick="return CFAQ.display('l6', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l6', true);" onfocus="this.blur();"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" style="width: 15px;height: 15px" border="0"> Outros serviços</div></dd><dd style="display:none;" id="l6"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://pt.hitskin.com/" target="_blank">HitSkin</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.criarumblog.com/" target="_blank">Criar Blog grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.servimg.com/" target="_blank">Servimg</a></span></dd></dl><div style="font-size:110%; margin-top: 8px;"><a href="http://www.orkut.com/Main#Community.aspx?cmm=81505901" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Orkut</a><br><a href="http://www.facebook.com/s.php?q=portugueses&amp;init=q#/pages/Forumeiros/49653389908" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Facebook</a></div><div style="font-size:110%; margin-top: 8px;"><a href="javascript:if%20(%20navigator.appName%20!=%20'Microsoft%20Internet%20Explorer'%20){window.sidebar.addPanel('F%C3%B3rum%20dos%20F%C3%B3runs','http://ajuda.forumeiros.com','');}else{%20window.external.AddFavorite('http://www.forumeiros.com','F%C3%B3rum%20dos%20F%C3%B3runs');}" target="_blank"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Adicionar aos favoritos</a>

    <br><a href="javascript:" id="forunslist"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Lista dos fóruns de suporte oficiais</a>

    <br><a href="javascript:" onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Definir página inicial...</a><div onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';" id="hp" style="display: none; padding: 5px; margin: 6px; border: 1px dashed #FFF; cursor: pointer;"><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://forumeiros.com');" alt="Definir o Forumeiros como página inicial" title="Definir o Forumeiros como página inicial">Forumeiros</a><br><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://ajuda.forumeiros.com');" alt="Definir o FDF como página inicial" title="Definir o FDF como página inicial">Fórum dos fóruns</a></div></div><div align="center" style="margin-top: 6px;"><a href="http://www.forumeiros.com/" target="_blank"><img src="http://i86.servimg.com/u/f86/11/66/91/15/creer_10.png"></a></div>

    </div><div id="toggle2" class="toggleable" style="font-size: 120%; display: none; ">

    <img src="http://i62.servimg.com/u/f62/11/22/70/40/750px-10.png"> <a href="http://help.ahlamontada.com/">Árabe</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_f12.png"> <a href="http://forum.forumactif.com">Francês</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_e10.png"> <a href="http://help.forumotion.com">Inglês</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c14.png"> <a href="http://cz.forumotion.com">Tcheco</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_g10.png"> <a href="http://hilfe.forumieren.com">Alemão</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_s18.png"> <a href="http://asistencia.foroactivo.com">Espanhol</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_i16.png"> <a href="http://aiuto.forumattivo.com">Italiano</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r11.png"> <a href="http://help.forum2x2.ru">Russo</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_p13.png"> <a href="http://ajuda.forumeiros.com">Português</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r10.png"> <a href="http://help.forumgratuit.ro">Romeno</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c12.png"> <a href="http://help.longluntan.cn">Chinês</a><br>
    <img src="http://i62.servimg.com/u/f62/11/22/70/40/turkey10.png"> <a href="http://destek.yetkin-forum.com">Turco</a>

    <br><br><a href="javascript:" id="forunslist2"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Fechar</a>

    </div>

Recomendo que leia esse tutorial: https://ajuda.forumeiros.com/t16592-tutorial-inserir-widget-cliques-rapidos

Até mais!

Bem Ketholy é mais ou menos isso que seu código faz porém eu queria com um design mais moderno.

BrunoLemos escreveu:Bem Ketholy é mais ou menos isso que seu código faz porém eu queria com um design mais moderno.

A personalização o senhor mesmo pode optar por fazer, assim o senhor saberá como deixa-la a seu gosto. O mais difícil lhe repassei, tanto o código como o tutorial dá pra personalizar a seu gosto.

Tentei mudar apenas o primeiro icone e o menu perdeu o "efeito sanfona":

Veja a imagem:

eu só mudei a imagem mais nada...

BrunoLemos escreveu:Tentei mudar apenas o primeiro icone e o menu perdeu o "efeito sanfona":

Veja a imagem:

eu só mudei a imagem mais nada...

Retire a alteração realizar por você e me informe uma personalização básica que queira aplicar, como por exemplo: Cor, espessura, etc.

Obs: Deixe o mesmo ativado em seu fórum, irei realizar as alterações por lá mesmo.

No caso eu só queria meus links mesmo fiz um outro teste lá no forum logo abaixo do seu codigo mais ou menos como eu gostaria que ficasse um design mais moderno.


Edit: Ketholy obrigado pela disponibilidade porém sanei minha questão com o procedimento abaixo:

Inserir na aba CSS:

Código:

/* Menu Vertical Sanfona
----------------------------------------------- */
.verticalsanfona ul {
margin: 0;
padding: 0;
list-style:none;
width: auto;
}
.verticalsanfona ul li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: auto;
background-color:#f0f0f0;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalsanfona ul li h3 {
display:block;
margin: 0;
padding:10px;
padding-left:20px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:capitalize;
color: #000;
background: #cccccc url(ENDEREÇO-DA-SUA-IMAGEM) repeat;
text-align: left;
font-size:16px;
}
.verticalsanfona ul li h3 a{
color: #000;
}

.verticalsanfona ul li h3 a:hover{
color: #fff;
}

.verticalsanfona ul li div {
margin:0;
overflow: auto;
padding:10px;
padding-left:20px;
height:220px;
}

.verticalsanfona ul li:hover {
height: 280px;
}

.verticalsanfona:hover ul li:hover h3 {
color:#fff;
background: #000000 url(ENDEREÇO-DA-SUA-IMAGEM) repeat;;
}

.verticalsanfona ul li h3:hover {
cursor:pointer;
}

Inserir HTML no conteúdo do novo Widget:

Código:

<div class="verticalsanfona">
<ul>
<li>
<h3>Título 1</h3>
<div>Coloque aqui o conteúdo para o Titulo 1.</div></li>
<li><h3>Titulo 2</h3>
<div>Coloque aqui o conteúdo para o Titulo 2</div></li>
<li><h3>Titulo 3</h3>
<div>Coloque aqui o conteúdo para o Titulo 3.</div></li>
<li><h3>Titulo 4</h3>
<div>Coloque aqui o conteúdo para o Titulo 4</div></li>
</ul>
</div>

Agora é só acrescentar seus títulos e conteúdo ao seu menu e pronto!

Deixo aqui para alguém que queira o mesmo efeito que eu!

Resultado:

Disponha!