[TUTORIAL] Sub-links nos menus

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

[TUTORIAL] Sub-links nos menus Empty [TUTORIAL] Sub-links nos menus

Mensagem por Shek em 11.07.14 21:03


[TUTORIAL] Sub-links nos menus Magic

Sub-links nos menus

Uma lista de links torna-se fundamental para o desenvolvimento do website, porque através desta lista o internauta pode acessar várias páginas rapidamente, gerando conforto e principalmente tráfego. Neste tutorial, vamos aplicar de forma elegante de menu com links em lista.


--> Tutoriais, dicas e astúcias <--
Sub-links nos menus



- Código JS:
Código:
jQuery(document).ready(function(){
    jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
    });
O javascript pode ser editado para o endereço que você deseja. Contudo, tenha atenção para não colocar nos links incorretos.
No lugar de profile?mode=editprofile coloque o endereço do link do menu que você deseja que os sub-links apareçam.


- Noção básica da função:
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 >>
[TUTORIAL] Sub-links nos menus Painel13
[TUTORIAL] Sub-links nos menus 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Sub-links nos menus 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-links nos menus 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Sub-links nos menus 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.


- Aplicando o código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS

[TUTORIAL] Sub-links nos menus 1114

Código:
ul.linklist li {
    position: relative;
    }
   
    li:hover #prof-content {
    opacity: 1;
    visibility: visible;
    margin-top: -5px;
    }
   
    #prof-content {
    margin-top: 5px;
      margin-left: 1450%;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 29px;
    z-index: 999;
    background-color: #fff;
    padding: 5px;
    -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
   
    #prof-content a {
    display:block;
    width: 150px;
    text-align: left !important;
    margin-left: 5px;
    }


- Aplicando o código HTML no Widget:
Muitos efeitos precisam de um HTMl para funcionar. Você precisará adicionar o HTML em um widget personalizado ou em algum local que esteja habilitado para aparecer em todas as suas páginas. Vamos supor então que você tem um widget.
Painel de Controle > Módulos > Portal e Widgets > Gestão dos widgets do fórum > Criar um widget personalizado > e desmarque o Table-type para que o widget fique invisível. Vamos colar e modificar o código abaixo:
<div style="display:none"><div id="prof-content">
<a href="ENDERECO">NOME_DO_LINK</a>
</div>
</div>


  • Resultado:
    [TUTORIAL] Sub-links nos menus Result14





© Fórum dos Fóruns


[TUTORIAL] Sub-links nos menus Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Sub-links nos menus
Shek

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18231
Pontos Ativos : 22183

Ver perfil do usuário https://shiftactive.blogspot.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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