[TUTORIAL] Sub-links nos menus (PHPBB3)
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Sub-links nos menus (PHPBB3)
Lista de links |
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 <--
Sub-links nos menus
Sub-links nos menus
1º - Código CSS:
Vamos adicionar o código CSS em um widget personalizado, ou na sua folha de estilo CSS.
Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >
- 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;
}
</style>
Agora, vamos aplicar o código JavaScript.
2º - Aplicação do javascript:
O javascript pode ser editado para o endereço que você deseja. Contudo, tenha atenção para não colocar nos links incorretos.
- Código:
jQuery(document).ready(function(){
jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
});
3º - 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 previsto:
© ShiftActif
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 |
Tópicos semelhantes
» [TUTORIAL] Encurtar links nos tópicos
» [TUTORIAL] Modificar links de download externos por imagem
» [TUTORIAL] Legenda personalizada (PHPBB3)
» [TUTORIAL] Estatísticas de PHPBB3 no formato de Punbb
» [TUTORIAL] Marcação da melhor resposta em tópicos (+ PHPBB3)
» [TUTORIAL] Modificar links de download externos por imagem
» [TUTORIAL] Legenda personalizada (PHPBB3)
» [TUTORIAL] Estatísticas de PHPBB3 no formato de Punbb
» [TUTORIAL] Marcação da melhor resposta em tópicos (+ PHPBB3)
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|