Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas | Hover permanente no Menu principal |
 | Créditos: Desnecessário, apesar de ter sido criado por mim! Nota: Só testei na versão PunBB! Versão beta. Só faça esse tutorial se tiver noções de HTML!!! |
--> Tutoriais, dicas e astúcias <--
Hover permanente no Menu principal
Hover permanente no Menu principal
1º - Editando Templates
Aceda em:
Painel de Controle
Visualização
Templates GeralSelecione o template overall_header!
Localize a seção do menu principal e retire todos as barras / dos href="/", exemplo:
- Código:
<li id="nav_app_forums" class="left active"><a href="forum" title="Go to Forums">Fórum</a></li>
Em meu fórum está da seguinte forma:
- Código:
<li id="nav_home" class="left"><a href="portal" title="Homepage" rel="home">Home</a></li>
<li id="nav_app_forums" class="left active"><a href="forum" title="Go to Forums">Fórum</a></li>
<li id="nav_app_members" class="left "><a href="memberlist" title="Go to Members">Membros</a></li>
<li id="nav_app_calendar" class="left "><a href="calendar" title="Go to Calendar">Calendar</a></li>
Localize a tag:
- Código:
<div class="pun">
Adicione em cima dela o seguinte código:
- Código:
<!-- #region Menu_Pagination -->
<div class="menu_pagination">
Ficando assim:
- Código:
<!-- #region Menu_Pagination -->
<div class="menu_pagination">
<div class="pun">
Localize as seguintes tags:
- Código:
</div>
</div>
</div>
</body>
E substitua pelo código abaixo:
- Código:
</div>
</div>
<!-- #endregion Menu_Pagination -->
</div>
</div>
</body>
Nota: É apenas para fechar a tag
que foi aberta!
No final do template, adicione o seguinte código:
Não esqueça de publicá-lo!
2º - Resultado
Essas linhas horizontais foram problemas na captura da tela!
Link para visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
No final do template, adicione o seguinte código:
- Código:
<!-- #region Run_Menu -->
<!-- ***********************************************************************
* Hover permanente no Menu principal - by JScript *
****************************************************************************
* Permite que o ítem selecionado no menu fique permanente! *
************************************************************************ -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".main_width left:first").addClass("active").show();
$(".main_width .left").click(function(){
$(".main_width .left").removeClass("active");
$(this).addClass("active");
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
$(".menu_pagination").load("/"+activeTab+" .pun", function() {
});
return false;
});
});
//]]>
</script>
<!-- #endregion Run_Menu -->
Não esqueça de publicá-lo!
2º - Resultado
Essas linhas horizontais foram problemas na captura da tela!
Link para visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
