[TUTORIAL] Efeito de menu nas categorias

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

[TUTORIAL] Efeito de menu nas categorias

Mensagem por nikka em 14/12/14, 08:58 am



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.

--> Tutoriais, dicas e astúcias <--
Efeito de menu nas categorias



- 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 >>
(carregue na imagem para aumentar)

Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta 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.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta 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.
- 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);
});


- 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:





© Fórum dos Fóruns & Alex Habilidade

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

nikka
Ex-Admineiro
Ex-Admineiro

Feminino
Inscrito dia : 16/12/2008
Mensagens : 15621
Pontos Ativos : 19895

Ver perfil do usuário http://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

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


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