Destacar link para página corrente
Publicado em: 2009-08-12 — 6.745 visualizacoes
As boas práticas do desenvolvimento web preconizam, entre outras técnicas, que se forneça ao usuário um meio rápido de identificação da página onde ele se encontra. Tal técnica é conhecida como: iluminar a página atual ou destacar a página corrente.
O método consagrado para destacar a página corrente consiste em estilizar de modo diferente o link do menu de navegação que aponta para ela e adicionalmente retirar a funcionalidade de visualizar o cursor indicativo de link (uma “mãozinha” – 
) quando o usuário coloca o ponteiro do mouse sobre o link para a página corrente.
Neste tutorial vamos estudar duas técnicas que permitem obter o efeito de destaque para o link da página corrente conforme mostrado na figura, na qual apresentamos um menu de navegação com quatro links com o usuário visualizando a Página um.
Vamos concentrar nosso raciocínio no fato de que para estilizar de modo diferente um dos links do menu temos que descobrir um meio de atribuir um identificador id ou uma classe class única e exclusiva para o link que aponta para a página corrente. Existem duas maneiras distintas para se atingir o objetivo: com CSS e com linguagem de programação dinâmica. Vejamos as duas:
Destacar com CSS
Para identificar de forma única cada uma das páginas de um menu de navegação podemos atribuir um id ou uma class ao elemento body da página.
De forma semelhante, para identificar de forma única cada um dos links do menu de navegação podemos atribuir um id ou uma class ao elemento a do menu.
Observe o código a seguir:
... <body id="pagina-um"> ... <ul id="nav"> <li><a href="home.html" id="ho">Home</a></li> <li><a href="pagina-um.html" id="p1">Página um</a></li> <li><a href="pagina-dois.html" id="p2">Página dois</a></li> <li><a href="pagina-tres.html" id="p3">Página três</a></li> </ul> ...
Notar que atribuimos o id="pagina-um" para o elemento body da Página um, bem como atribuimos id's para cada um dos elementos a do menu.
Assim, se quisermos estilizar exclusivamente o link que aponta para a Página um usamos o seletor CSS body#pagina-um #nav li a#p1 e nosso problema está resolvido!
Observe as regras CSS completas para destacar a página corrente do menu exemplo deste tutorial:
body#home a#ho, body#pagina-um a#p1,
body#pagina-dois a#p2, body#pagina-tres a#p3 {
cursor: default;
border-left: 10px solid #3172d5;
border-right: 10px solid #c1d5f2;
background-color: #6f9ce2;
color: #fff;
}
Notar a presença da declaração para estilizar o cursor.
Ver o exemplo funcionando on-line. (abre em outra janela)
Não esqueça de inspecionar o código-fonte das páginas.
Destacar com PHP
Usaremos PHP para demonstrar a outra maneira para destacar o link corrente.
A técnica com uso de programação consiste em se inserir dinamicamente um identificador no elemento a que aponta para a página corrente, sem necessidade de identificadores para o elemento body e para cada um dos links do menu.
Uma das funcionalidades nativas do PHP fornece um array de variáveis predefinidas conhecido como super globais. Uma destas variáveis é o caminho absoluto, em relação à raiz do site, da página corrente e que pode ser recuperado com a declaração $_SERVER['SCRIPT_NAME'].
Por exemplo: Considere uma página web denominada pagina-um.php hospedada no subdiretorio denominado layout do diretório denominado tutorial do site http://www.maujor.com. Ou seja, o endereço completo da página é: http://www.maujor.com/tutorial/layout/pagina-um.php.
Neste caso a variável $_SERVER['SCRIPT_NAME'] retornará /tutorial/layout/pagina-um.php.
Para extrair o nome do arquivo usaremos a função nativa do PHP denominada basename(). Fazendo basename($_SERVER['SCRIPT_NAME']) iremos obter pagina-um.php. Agora, tendo o nome do arquivo, fica fácil incluir dinamicamente uma classe denominada corrente no link da página atual como mostrado a seguir:
...
...
...
<?php $paginaCorrente = basename($_SERVER['SCRIPT_NAME']);?>
<ul id="nav">
<li><a href="home.php" <?php if($paginaCorrente == 'home.php') {echo 'class="corrente"';} ?>>Home</a></li>
<li><a href="pagina-um.php" <?php if($paginaCorrente == 'pagina-um.php') {echo 'class="corrente"';} ?>>Página um</a></li>
<li><a href="pagina-dois.php" <?php if($paginaCorrente == 'pagina-dois.php') {echo 'class="corrente"';} ?>>Página dois</a></li>
<li><a href="pagina-tres.php" <?php if($paginaCorrente == 'pagina-tres.php') {echo 'class="corrente"';} ?>>Página três</a></li>
</ul>
...
Observe as regras CSS completas para destacar a página corrente do menu exemplo deste tutorial:
#nav li a.corrente {
cursor: default;
border-left: 10px solid #3172d5;
border-right: 10px solid #c1d5f2;
background-color: #6f9ce2;
color: #fff;
}
Notar a presença da declaração para estilizar o cursor.
Ver o exemplo funcionando on-line. (abre em outra janela)
Não esqueça de inspecionar o código-fonte das páginas.
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
Esta matéria foi publicada em: 2009-08-12 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/trackback no seu site.
Mto legal a matéria, adoro css, e agora estou aprendendo PHP e to curtindo pacas tb
grande abraço
Olá Maujor!
Gostei muito desse artigo, na verdade já apliquei essa técnica de destaque da página corrente em alguns sites, mas como ainda não conhecia a função basename do php, por comodismo acabei desenvolvendo uma função com o mesmo objetivo:
function pgName() {
$pg = $_SERVER['PHP_SELF'];
$pg = explode(’/’,$pg);
$pgNav = $pg[count($pg)-1];
return str_replace(’.php’,”,$pgNav);
}
Vou agora atualizá-la!!! rsrs
Abração Maujor!
Bacana sua iniciativa, parabéns mestre Maujor!
Abraço.
Maujor, como sempre parabéns!!!
Gostei muito deste post, parabéns, vou utilizar
olá Maujor, bem legal as dicas, costumo usar uma variavel passando pelo menu um ID, e depois um interpretador, parecido como tu usou no tuto.
grande abraço,
Fabiano
Olá Maujor!
Gostei muito desse artigo
Beijs Ana
Sempre utitilizei essa técnica em css e atualmente dinamicamente com php. Mas como o amigo de cima, não conhecia a função basename, e fazia uma gambiarra para obter a página corrente. Vlw!
Bom dia Maujor!
Fico feliz de ler sobre este assunto aqui, pois recentemente aplicamos o mesmo efeito a um site, e como o menu era formado por imagens, fizemos desta maneira:
HTML
no CSS
.menu ul li.clicado{
background-image: url(../img/menu_hover.gif);
background-repeat: repeat-x;
background-position: top;
}
Apenas criamos uma class para o menu em lista, e aplicamos à linha da lista que correspondia ao link aberto.
Espero ter colaborado de alguma forma, haha.
Abraço.
Boa tarde, adorei o post, realmente o blog MAUJOR ja me ajudou muito e continua me ajudando… obrigado!
Maujor, você é o meu guru.
Muito bom tutorial!
Att,
Muito bom artigo
Só uma observação o css se adapta perfeitamente ao php.
Usei a o css no php como se fosse html e funcionou normalmente.
Lembrando que php funciona do lado do servidor e “retorna” html, só que com a extensão .php
Eu só discordo no que diz respeito a desabilitar o cursor de link, já que o elemento vai continuar redirecionando pra página se clicado.
To sempre aprendendo alguma coisa qndo passo por aqui.
Deborah
Muito bom existirem pessoas como você pra ensinar!
Bruna