04.09.2009

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>

15 respostas a "Destacar link da página atual com PHP"

  1. Mau caráter disse:

    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!

  2. Pedro Laerte disse:

    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

  3. Bruno disse:

    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

  4. Ruan Mér disse:

    @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

  5. Fernando disse:

    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.

  6. Fernando disse:

    Pelo menos eu testei exatamente como está no exemplo, e funcionou dessa forma que eu expliquei.

  7. Ruan Mér disse:

    @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

  8. fndoliveira disse:

    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

  9. Ruan Mér disse:

    @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ê.

  10. Sandro disse:

    Funcionou perfeito

    Demo fora do ar

  11. Mairnho disse:

    Olá Ruan, antes de mais nada, parabéns pelos posts. Qualidade nota 10. Bom, eu precisava fazer em wordpress, como você comentou que tem os códigos para o wordpress (e que nesse caso é mais complicado), fico no aguardo, ok?

    []s
    Marinho

  12. Jean disse:

    Amigo tenho um menu em php dessa forma, como eu aplico um destaque pra ele:
    Home
    desde já agradeço!

  13. Leo disse:

    Muito obrigado pelo tutorial Ruan! Consegui implementar o código php no menu que eu já tinha. Valeu mesmo!

  14. Aline Rodrigues disse:

    Olá tudo bom? Gostei muito do seu artigo, porém tenho um dúvida uso url amigável, este método funcionaria tbm? Obrigada :)

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>