Destacar link da página atual com PHP
Uma maneira de melhorar a navegação do usuário pelo seu site, é destacando nos menus do site o link referente a página que ele se encontra. Assim o usuário não se sente perdido, tendo ele um ponto de referência.
Existe diversas maneiras de se destacar um link em uma página. Aqui vamos abordar uma das possibilidade desse efeito usando o PHP.
Visualize o DEMO e acompanhe a explicação abaixo:
Demo
PHP
Inicialmente vamos usar um código PHP para pegar a URL da página atual do usuário:
// atribui a variável paginaLink toda a URL da página
<?php $paginaLink = $_SERVER['SCRIPT_NAME'];?>
Por exemplo:
Se a URL toda é http://www.ruanmer.com.br/demos/php/2009-09-04/pagina1.php, o código PHP retorna /demos/php/2009-09-04/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
<?php $paginaLink = basename($_SERVER['SCRIPT_NAME']);?>
Neste caso o retorno de http://www.ruanmer.com.br/demos/php/2009-09-04/pagina1.php será pagina1.php.
HTML e CSS
O código HTML é bem simples:
<ul id="menu">
<li><a href="pagina1.php">Página 1</a></li>
<li><a href="pagina2.php">Página 2</a></li>
<li><a href="pagina3.php">Página 3</a></li>
<li><a href="pagina4.php">Página 4</a></li>
</ul>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; }
/*[...]*/Para visualizar todo o CSS, acesse o DEMO e veja o código-fonte.
PHP + HTML – Exemplo 1
O primeiro exemplo será trabalhado com o nome das páginas, que é o mesmo do exemplo exibido no DEMO. Faz-se um if no qual se retornar true adiciona a class=”ativo” na tag a.
<?php $paginaLink = basename($_SERVER['SCRIPT_NAME']);?>
<ul id="menu">
<li><a href="pagina1.php" <?php if($paginaLink == 'pagina1.php') {echo 'class="ativo"';} ?>>Página 1</a></li>
<li><a href="pagina2.php" <?php if($paginaLink == 'pagina2.php') {echo 'class="ativo"';} ?>>Página 2</a></li>
<li><a href="pagina3.php" <?php if($paginaLink == 'pagina3.php') {echo 'class="ativo"';} ?>>Página 3</a></li>
<li><a href="pagina4.php" <?php if($paginaLink == 'pagina4.php') {echo 'class="ativo"';} ?>>Página 4</a></li>
</ul>PHP + HTML – Exemplo 2
Já o segundo exemplo será trabalhado com as URLs das páginas, que é a uma forma parecida com a que eu utilizei neste site, é bom para quem trabalha nomeando pastas (seusite.com/contato) em vez de páginas (seusite.com/contato.php). Por exemplo:
<?php $paginaLink = $_SERVER['SCRIPT_NAME'];?>
<ul id="menu">
<li><a href="/blog/" <?php if($paginaLink == '/blog/index.php') {echo 'class="ativo"';} ?>>Página 1</a></li>
<li><a href="/blog/contato/" <?php if($paginaLink == '/contato/index.php') {echo 'class="ativo"';} ?>>Página 2</a></li>
<li><a href="/portfolio/" <?php if($paginaLink == '/portfolio/index.php') {echo 'class="ativo"';} ?>>Página 3</a></li>
</ul>
haha mentira que é você quem escreve os posts. quase não tem erro de português! TÕ zunado! Tá maneiro lek! maneiro o passarinho lá em cima hjAUAHuA!
Cara mandou muito bem, usei o exemplo1 mas vou pesquisar mais para entender o exemplo2 que fica melhor visualmente na barra de endereços.
Valeu mesmo
Tem um jeito bem mais facil e elegante utilizando jquery.
$(function() {
$(‘ul > li’).click(function() {
$(‘#menu > ul > li’).removeClass(“ativo”);
$(this).parents(‘li’).addClass(“ativo”);
});
});
Bruno
@Bruno
A maneira que você apresentou em JS não iria fazer o link começar ativo quando se carregasse uma página nova. Por exemplo, no menu no topo desse Blog existe 3 opções (BLOG, PORTFOLIO e CONTATO), quando eu clico em PORTFOLIO, a página de portfolio é apresentada com o link PORTFOLIO em destaque. Nessa função JS que você falou só iria executar a ação do script na página que estiver.
Claro que também existe uma solução JS para fazer o link começar ativo de acordo com o que você clicou na página anterior. Mas nesse caso abordei a solução em PHP.
Abs
Este exemplo em PHP não funciona e vou explicar porque. Por exemplo: Estou na pagina1.php e vou para pagina2.php: Quando eu clico no link “Página 2″ eu ainda estou na pagina1.php. Então quem vai ficar com a classe ativo é a pagina1.php. Quando o PHP fizer o carregamento para a Página 2, o link “Página 1″ vai estar selecionado. Para a página 2 ficar selecionada, tenho que clicar mais uma vez no mesmo link.
Essa solução funciona melhor com Javascript mesmo. Ainda não vi uma maneira em PHP que funcione.
Pelo menos eu testei exatamente como está no exemplo, e funcionou dessa forma que eu expliquei.
@Fernando você tem algum erro no seu código… como você clica para ir para a página2 e ele não carrega de imediato??
Você ou ta usando Ajax ou tem um erro.
Veja o exemplo aqui onde funciona o que eu citei no post http://www.ruanmer.com.br/demos/php/2009-09-04/pagina1.php
Abs
Gostaria de saber quando for mais de uma página?
Por exemplo link empresa tem a pagina missao e historico, quando tiver em missao ou em historico deixar o “EMPRESA” ativado.
coloquei assim:
e
não funcionou! =/
abraço
@fndoliveira
ai vai depender… se você for trabalhar com isso dinamicamente ou não..
se no caso você só tem essas 2 páginas dentro de empresa, você pode fazer um OR no código PHP, por exemplo:
< ?php if($paginaLink == 'empresa.php' || $paginaLink == 'missao.php' || $paginaLink == 'historico.php') {echo 'class="ativo"';} ?>
assim funcionará, mas toda vez que você adicionar uma nova página vai ter de adicionar um novo OR.
Para fazer isso pelo WordPress, é um pouco mais complexo. Se for o caso, me mande um email que eu respondo com alguns códigos que já usei e podem ser uteis a você.