Destacar link para página corrente
Publicado em: 2009-08-12 — 15.978 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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.
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
alguem pode me ajudar 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
Gostei do post mas tenho uma dúvida.
E se o link for como o exemplo abaixo?
index.php?item=subitem
Como fazer para funcionar?
Obrigado!
Já resolvi. Basta trocar o:
($_SERVER['SCRIPT_NAME']);
por
($_SERVER['REQUEST_URI']);
Mas ainda tenho uma dúvida. E quando acessar diretamento o endereço do domínio? Por exemplo: http://www.dominio.com.br
Como fica?
Cara, muito bacana essa técnica, valeu demais pela dica! =)
Sou novato… teria como passar o código completo funcionando, pode ser bem simples…
é que eu copiei e colei as duas listas de codigos num documento PHP do dreamweaver, mas não funcionou…
Gostaria, tipo um codigo completo para eu colar numa página em branco PHP e ai vou incrementando como puder..
Obrigado!
Olá, desculpe… eu utilizo um modelo.dwt no dreamweaver como base para todas as páginas… teria que utilizar talvez uma outra técnica..
Nilson, até tentei enviar o exemplo, mas acho que o blog não aceita que se post código.
OLá, me envia no email: centerprint@pow.com.br
Como ficaria os botoes ativos sendo orientados pelo frame que fica abaixo.
muito bom, estava procurando isso a muito tempo e com algumas adaptações consegui usar em vários projetos, obrigado e sucesso a você maujor.
Boa noite camarada! Vi que publicou o post em 2009, mas estou escrevendo para agradecer e informar que ainda hoje em 2011 continua ajudando! Valeu
Bom dia!
Muito bom este tutorial!
Tenho uma dúvida:
E se fosse um menu com muitos submenus verticais organizados em estações?
Como faríamos para ter os links correntes onde com diversas páginas um mesmo link seria preenchido?
Valeu!
Faço minhas as palavras do colega M.P.Junior.
Obrigado mesmo.
É sempre bom entrar aqui e ver suas dicas. Valeu!
Precisava urgente de saber como aplicar isso em um iframe. Tem como me ajudar?