Php

Jquery definir item menu current | Javascript current menu item

Algumas boa práticas recomendam separar interface dos arquivos de programação. Com Jquery essa tarefa quase sempre torna-se menos custosa. Neste artigo vou demostrar uma forma simples de definir o item de menu atual, ou, current.

Suponha que você possui o seguinte menu:

<div id="menu"> 
    <ul class="menu">
        <li class="first"><a href="/">home</a></li>
         <li><a href="a-empresa.php">Empresa</a></li>
         <li><a class="current" href="/produtos.php">Produtos</a></li>
         <li><a href="/equipe.php">Equipe</a></li>
         <li class="last"><a href="contato.php">Contato</a></li>
    </ul>
</div>

Observe que a página current é produtos. Provavelmente esse current foi definido via programação no servidor. A seguinte rotina ‘automatiza’ a definição da classe current (necessário jquery):

<script>
     function replaceAll(str, de, para){
         var pos = str.indexOf(de);
         while (pos > -1){
             str = str.replace(de, para);
             pos = str.indexOf(de);
         }
         return (str);
     }

     $(function() {
         var s = replaceAll($(location).attr('pathname'), "/", "");
        $('#menu a').each(function(){
             var test = $(this).attr('href');
             test = replaceAll(test, "/", "");
            if (test == s){
                 $(this).addClass('current');
                 $(this).parent().addClass('current');
             } else {
                 $(this).removeClass('current');
             }
         });
     });
 </script>

A primeira função replaceAll substituí todos os caracteres ‘de’ pelo valor de ‘para’. Existem outras formas de fazer.

E na função jquery:

  • é definida uma variável s, que recebe o valor da url atual;
  • então é feito um loop em todos os elementos ‘a’ do elemento com o nome ‘menu’;
  • para cada elemento é criado a variável ‘test’ que recebe o valor do link;
  • então é verificado se ‘test ‘ é igual a ‘s’;
  • se sim, adiciona current ao elemento atual ‘a’ e a seu parent (pai), que no caso é o li;
  • se não, remove a classe current.

veja o código completo no pastebin:
http://pastebin.com/BAQavFj8
é isso, obrigado por ler 🙂

Anúncios
Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s