Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Chorão

avatar
Membro
  [Tutorial] Hover permanente no Menu principal

Descrição
Permite que o ítem selecionado no menu fique permanente!
Funcionalidade: PunBB, PhpBB2.

1º - Editando Templates
Aceda em: Painel de Controle Seta Visualização Seta Templates Seta Geral

Selecione 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 <div> que foi aberta!

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


Desenvolvido por JScript | Wesley
Editado e Postado por Copyright® 2012 Staffer Group BR™️
Ver perfil do usuário

#2
 Vargas

avatar
Moderador
Havia um pequeno erro na formatação, mas já editei.

Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!
Ver perfil do usuário

#3
 Chorão

avatar
Membro
Muito Obrigado Vargas !!!
Ver perfil do usuário

#4
 'Fusion

avatar
Membro
Parabéns, gostei bastante do efeito.
Ver perfil do usuário samuca_akira@hotmail.com

#5
 fascicularia

avatar
Membro
thanks
Ver perfil do usuário

#6
 estevanle

avatar
Novato
Obrigada.
Ver perfil do usuário

#7
 fascicularia

avatar
Membro
nada de lo que describe es en el overall_header de phpbb2
Ver perfil do usuário

#8
 Conteúdo patrocinado