PHP

Em por

Existem diversas maneiras de destacar um link do menu, deixando o menu ativo de cor ou fundo com aparência diferente das outras paginas. Pode ser um em Java script, que poderá não funcionar se o usuário estiver desabilitado script de página, css que poderá ter problemas dependendo da versão do navegador do usuário, etc...

Depois de bastante pesquisa, utilizando alguns plugins que funciona local e quando sobe para o servidor já não nos proporciona o mesmo feedback e nos deixa com dor de cabeça numa implementação tão simples.

Dentre as pesquisadas a que achei mais eficiente foi a implementação feita com o PHP, que é; uma linguagem muito utilizada nos dias de hoje, segue uso:

Por exemplo:

 // atribui a uma variável $paginaLink toda a URL da página 

Se a URL toda for:

//www.seusite.com.br/artigo/11/pagina1.php

O código PHP acima retorna:

/artigo/11/pagina1.php


Para pegar apenas o nome da página, sem todo o caminho da URL usamos a função PHP basename():

 // atribui a variável $paginaLink apenas o nome da página 

Neste caso o retorno de $paginaLink será:

pagina1.php


Para o CSS basta acrescentar uma classe com o nome "ativo" :

 /*[...]*/ ul#menu li a { display:block; padding:5px 10px; background-color:#CCC; } ul#menu li a:hover, ul#menu li a.ativo { background-color:#EEE; /* coloque aqui sua cor */} /*[...]*/

Para que tudo funcione corretamente o código é bem simples. Faz-se um if no qual se retornar true, adiciona a class="ativo" na tag :

 $paginaLink = basename($_SERVER['SCRIPT_NAME']); <ul> <li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 1</a></li> <li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 2</a></li> <li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 3</a></li> <li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 4</a></li> </ul>

Com esta pequena implementação você com certeza terá êxito em todos os navegadores, pois não depende de versão do navegador e nem se preocupar se o usuário deixou desabilitado o SCRIPT em seu navegador.

Visualize a DEMO funcionando corretamente.

Caso esteja usando com URL amigável, para pegar o seu $paginaLink, use uma função da sua página inicial, no meu por exemplo, usei $paginaLink = pegaParametro();

Veja Também:

Artigos Relacionados a categoria: PHP

Olá, deixe seu comentário para Destacar link do menu que está ativo

Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora