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” –
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:
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.
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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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