Destacar link para página corrente
Publicado em: 2009-08-12 — 65.884 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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/trackback no seu site.
Top!!! Deu certo!!!
Sua dica ajudou bastante o programador aqui do site.
Muito bom o artigo, fera demais, sempre tive essa dúvida
Abs.
este codigo funciona no Chrome, no edge, IE.. mas não funciona no Firefox?
<a href="../rbel.php" >RBEL
Parabéns! Muito boa a publicação
Código bastante objetivo e explicação sem enrolação. Muito obrigado pelo apoio.
Aonde eu insiro este código? Style.css?
No meu site não há nenhum tipo de código parecido
to perdido precisava disso funcionando
Desta maneira o código funciona perfeitamente.
<a title="" class="” href=”home.php”>Home
Obrigado pela informação. Infelizmente meu problema era parecido com o do Nilson.
Vou continuar acompanhando o site, achei ele bem completo.
Parabéns pelo post.
Isso que eu temia..
Pense que existiria alguma forma de identificar a URL..
mas, muito obrigado mesmo pelas suas dicas e Tutoriais
Parabéns pelo trabalho
@Nilson
Para destacar a página corrente com uso de CSS precisamos criar um seletor CSS cujo “alvo” seja o link para a página corrente.
Como, à princípio, todos os links (menu) estão em todas as páginas a maneira de identificar o link para a página é identificando a página e os links como mostrado no post.
Com PHP identifica-se o URL da página e com isso atribui-se dinamicamente um identificador ao link, mas com CSS isso não é possível, portanto não vejo outra alternativa a não ser identificar os links individualmente e o elemento
bodycom um ID ou uma classe.Olá, estou novamente quebrando a cabeça com: destacar link da pagina atual.
Em PHP é fácil, blz.
mas em html, com pagina mestre + css… tá difícil…
achei uma solução mas funciona somente se eu colocar em cada pagina um ID,
mas não é produtivo.. pois cada pagina do site teria que ter seu ID.
mas se é assim que funciona, esta seria a única maneira, tudo certo… mas, gostaria de ter certeza..
Gostaria de uma função na pagina mestremque detectasse a pagina atual e aplicasse uma regra css especifica para o link a pagina atual, e assim se eu criasse uma nova pagina com base na pag mestre, o destaque do link atual seria automático.
Obrigado!
Muito obrigado! Me ajudou bastante!
Precisava urgente de saber como aplicar isso em um iframe. Tem como me ajudar?
É sempre bom entrar aqui e ver suas dicas. Valeu!
Faço minhas as palavras do colega M.P.Junior.
Obrigado mesmo.
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!
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
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.
Como ficaria os botoes ativos sendo orientados pelo frame que fica abaixo.
OLá, me envia no email: centerprint@pow.com.br
Nilson, até tentei enviar o exemplo, mas acho que o blog não aceita que se post código.
Olá, desculpe… eu utilizo um modelo.dwt no dreamweaver como base para todas as páginas… teria que utilizar talvez uma outra técnica..
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!
Cara, muito bacana essa técnica, valeu demais pela dica! =)
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?
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!
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
Muito bom existirem pessoas como você pra ensinar!
Bruna
To sempre aprendendo alguma coisa qndo passo por aqui.
Deborah
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.
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
Maujor, você é o meu guru.
Muito bom tutorial!
Att,
Boa tarde, adorei o post, realmente o blog MAUJOR ja me ajudou muito e continua me ajudando… obrigado!
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.
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!
Olá Maujor!
Gostei muito desse artigo
Beijs Ana
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
Gostei muito deste post, parabéns, vou utilizar
Maujor, como sempre parabéns!!!
Bacana sua iniciativa, parabéns mestre Maujor!
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!
Mto legal a matéria, adoro css, e agora estou aprendendo PHP e to curtindo pacas tb
grande abraço