Artigo: Destacar link do menu que está ativo - Gigasystems

Blog

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.

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();

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

Já temos 2 comentário(s). DEIXE O SEU :)
Jaclinton Silva

Jaclinton Silva

Marcos, estou estudando justamente esta forma de marcar a pagina corrente do menu. Contudo, sou novo na área e gostaria de obter mais informações de como colocar este código em PHP no meu html. Você pode compartilhar um link ativo?
★★★★★DIA 22.05.18 10h35RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
Marcos Martins

Marcos Martins

Bom dia Jaclinton,


não entendi direito sua pergunta "colocar este código em PHP no meu HTML". Se for o que eu entendi, você quer um código HTML para usar um menu dinâmico? Se for isso, não é possível. Páginas dinâmicas não dá para fazer em HTML puro, é preciso usar alguma outra linguagem que seja dinâmica, pois o HTML não aceita condição.


No caso de um link ativo para estudo, lamento, mas mudamos recentemente todo o site e ainda existem coisas que precisam ser corrigidas, que não dá pra ser feito neste momento.


 


Att Marcos

★★★★★DIA 22.05.18 11h37RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: Blog

Soluções

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


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.