[TUTORIAL] Sub-fóruns em modo hover

Ir para baixo

[TUTORIAL] Sub-fóruns em modo hover Empty [TUTORIAL] Sub-fóruns em modo hover

Mensagem por .Danni. 20.03.13 16:22


[TUTORIAL] Sub-fóruns em modo hover Js10 

Sub-fóruns

Adicione sub-fóruns aos fóruns existentes, os mesmos serão exibidos quando passar o mouse por cima do fórum selecionado em modo de slid.


--> Tutoriais, dicas e astúcias <--
Sub-fóruns em modo hover



- Código a ser utilizado:
/* Sub-fóruns - Início */

jQuery(document).on('ready', function() {
/* Sub-fóruns que irão ser exibidos */
var subforuns = '<a href="Endereço do sub-fórum" id="subforum">Título do sub-fórum</a>';
/* Sub-fóruns que irão ser exibidos */

var forum = 2;
var css = "#topicsmsgs{display:none;}#subforum{padding:7px 7px 7px 7px;}";

jQuery(document).ready(function() {
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").append("<style>" + css + "</style><div id='topicsmsgs'>" + subforuns + "</div>")
});
jQuery(document).each(function() {
jQuery('li.row:eq(' + forum + '), td.tcl:eq(' + forum + '), td.row2.icon:eq(' + forum + '), td.row1.over:eq(' + forum + ')').mouseover(function(){
jQuery("#topicsmsgs").slideDown("fast");
});
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").mouseleave(function(){
jQuery("#topicsmsgs").slideUp("fast");
});
});
}  

);
/* Sub-fóruns - Fim */
Vermelho ->  Endereço do sub-fórum.
Laranja -> Título do sub-fórum.
Negrito -> É a parte que terá de multiplicar caso queira adicionar mais sub-fóruns, ex:
Código:
<a href="Endereço do fórum 1" id="subforum">Título do sub-fórum 1</a><a href="Endereço do fórum 2" id="subforum">Título do sub-fórum 2</a>
Verde -> Número do fórum que irá adicionar os sub-fóruns.Entenda a partir da imagem abaixo:
[TUTORIAL] Sub-fóruns em modo hover Sem_t109

  • A contagem dos fóruns irá começar pelo número 0;
  • De forma crescente poderá se obter o número;
  • Para cada fórum deverá multiplicar todo o código.


- Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
[TUTORIAL] Sub-fóruns em modo hover Painel13
[TUTORIAL] Sub-fóruns em modo hover 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Sub-fóruns em modo hover 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as páginas.
[TUTORIAL] Sub-fóruns em modo hover 110310Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Sub-fóruns em modo hover 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao 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.

  • Resultado:
    [TUTORIAL] Sub-fóruns em modo hover Ooo10







©️ Fórum dos Fóruns & seender


[TUTORIAL] Sub-fóruns em modo hover Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Sub-fóruns em modo hover
.Danni.
.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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