[TUTORIAL] Efeito de menu nas categorias

Nesse tutorial iremos colocar um efeito na imagem da categoria que, ao clicar no botão surgirá um menu com diversos links.

Esses links poderá ser editado pelo próprio fundador do fórum, desde que tenha um conhecimento básico de HTML, para fazer as devidas mudanças.

1º - Adicionando Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos no Indice.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScriptAo selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Aplicação do código:
Em seguida marcar as opções do Investimento como informado, vamos adicionar o seguinte script:

Código:


$(function(){
var conteudo2 = $('#conteudo2');
var quadrado2 = $('.quadrado2');
var quadrado1 = $('.quadrado1');
conteudo2.hide();
quadrado2.click(function(){
conteudo2.show('slow');
quadrado1.css('background','#333');
quadrado2.css('background','#3ac3c3');
});
quadrado1.click(function(){
conteudo2.hide('slow');
$('#categoria-img-alex').show('slow');
quadrado1.css('background','#3ac3c3');
quadrado2.css('background','#333');
});
var blinkMenu = $('.quadrado2');

blinkMenu.prepend('<div id="menu1">Menu</div>');
var menuBlink = $('#menu1');

menuBlink.css({
color: 'red',
position: 'relative',
'margin-left': '-42px',
'font-weigth': 'bold',
'font-size': '12px',
'margin-top': '-2px'
});
function blinker() {
    $('#menu1').fadeOut(500);
    $('#menu1').fadeIn(500);
}

setInterval(blinker, 1000);
});


3º - Adicionando o HTML na descrição desejada.
Após colocarmos o código JavaScript que irá esconder e aparecer o nosso menu, temos que inserir a imagem e o menu na descrição para isso aceda a:

Painel de controle >> Geral >> Categorias e fóruns >>

- Clique no icone: na categoria desejada onde será o efeito do menu.

- Na Descrição coloque o código abaixo:

Código:



<div id="conteudo">

    <div class="botão-alex">    
        <div class="quadrado1"></div>
        <div class="quadrado2"></div>
    </div>

 <div id="categoria-img-alex">
  <img src="http://i.imgur.com/W8Sqo9U.png" />  
 </div>

 <div id="conteudo2">
 <table>
             <tr>

 <td id="pw-quicklinks">
              <a href="Link">#Texto</a> <a href="Link">#Titulo do link</a> <a href="Link">#Texto</a><a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a>    
 </td>

                 <td id="pw-quicklinks">
              <a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a><a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a>    
 </td>

                 <td id="pw-quicklinks">
              <a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a><a href="Link">#Titulo do link</a> <a href="Link">#Titulo do link</a>    
 </td>
                
                 </tr>
        </table>
        
<style>
    #conteudo2 {
        background-color: #ddd;
        padding: 8px;
            position: absolute;
        margin-left: 20px;
        opacity: 0.9;
        max-width: 376px;
    }
    div#categoria-img-alex img {
float: left;
margin-left: 20px;
}
    div#categoria-img-alex img {
float: left;
position: relative;
width: 95%;
}.botão-alex {
float: left;
margin-top: 60px;
position: absolute!important;
}
    .quadrado1 {
     background-color: #3ac3c3;  
    }
    .quadrado2{
    background-color: #333;    
    }
        .quadrado1, .quadrado2 {
            height: 10px;
            width: 10px;
            cursor: pointer;
            border: 1px solid #000;
        }
    .quadrado2 {
        margin-top: 2px;    
    }
        
    .botao-alex
#pw-dexstarr a {
text-decoration: none;
}
#pw-dexstarr, #pw-quicklinks a {
color: #ddd;
}
#pw-quicklinks a {
background: rgba(51,51,51,0.6);
display: block;
font-family: calibri;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 3px;
margin-top: 1px;
opacity: .7;
text-align: center;
text-transform: uppercase;
    padding: 2px 4px 0;
    margin-right: 20px;
    height: 12px;
    text-decoration: none;
}#pw-quicklinks a:hover {
opacity: 1;
}
#pw-quicklinks *, .pw-ds-award * {
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}#pw-quicklinks {
margin-top: 3px;
}#pw-ds-botones {
bottom: 0;
left: -312px;
position: absolute;
}</style>  
 </div>
</div>


• Resultado:
  
  
  
  

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Efeito de menu nas categorias