[TUTORIAL] Efeito de menu nas categorias

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

Ex-Admineiro

[TUTORIAL] Efeito de menu nas categorias Empty [TUTORIAL] Efeito de menu nas categorias

Mensagem por nikka 14.12.14 10:58


[TUTORIAL] Efeito de menu nas categorias Chatbo10

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.

[TUTORIAL] Efeito de menu nas categorias Act_bottomEsses 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)
[TUTORIAL] Efeito de menu nas categorias Painel13

[TUTORIAL] Efeito de menu nas categorias 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Efeito de menu nas categorias 110210Seta 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.
[TUTORIAL] Efeito de menu nas categorias 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Efeito de menu nas categorias 110410Seta 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: [TUTORIAL] Efeito de menu nas categorias Editer 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:
    [TUTORIAL] Efeito de menu nas categorias Result36





© Fórum dos Fóruns & Alex Habilidade

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

nikka
Ex-Admineiro
Ex-Admineiro

Feminino
Inscrito dia : 17/12/2008
Mensagens : 15621
Pontos ativos : 19898

https://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

Ir para o topo Ir para baixo

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


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