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>

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *