Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Destacar link para página corrente

Publicado em: 2009-08-12 — 46.567 visualizacoes         

menuAs 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” – cursor pointer ) 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

44 comentários na matéria: “Destacar link para página corrente”

  1. Diogo TomazettiNo Gravatar disse:

    Top!!! Deu certo!!!

  2. Buque de Casamento NobreNo Gravatar disse:

    Sua dica ajudou bastante o programador aqui do site.

  3. Rafael MeiraNo Gravatar disse:

    Muito bom o artigo, fera demais, sempre tive essa dúvida

    Abs.

  4. nilsonNo Gravatar disse:

    este codigo funciona no Chrome, no edge, IE.. mas não funciona no Firefox?

    <a href="../rbel.php" >RBEL

  5. ElizaNo Gravatar disse:

    Parabéns! Muito boa a publicação

  6. RodrigoNo Gravatar disse:

    Código bastante objetivo e explicação sem enrolação. Muito obrigado pelo apoio.

  7. DavidNo Gravatar disse:

    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

  8. MatheusNo Gravatar disse:

    Desta maneira o código funciona perfeitamente.

    <a title="" class="” href=”home.php”>Home

  9. MatheusNo Gravatar disse:

    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.

  10. NilsonNo Gravatar disse:

    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

  11. MaujorNo Gravatar disse:

    @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 body com um ID ou uma classe.

  12. NilsonNo Gravatar disse:

    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.

  13. PabloNo Gravatar disse:

    Obrigado!

  14. AdamNo Gravatar disse:

    Muito obrigado! Me ajudou bastante!

  15. MateusNo Gravatar disse:

    Precisava urgente de saber como aplicar isso em um iframe. Tem como me ajudar?

  16. Guarda MóveisNo Gravatar disse:

    É sempre bom entrar aqui e ver suas dicas. Valeu!

  17. WalderNo Gravatar disse:

    Faço minhas as palavras do colega M.P.Junior.
    Obrigado mesmo.

  18. RodrigoNo Gravatar disse:

    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!

  19. M. P. JuniorNo Gravatar disse:

    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

  20. LuizNo Gravatar disse:

    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.

  21. MATEUS VALGASNo Gravatar disse:

    Como ficaria os botoes ativos sendo orientados pelo frame que fica abaixo.

  22. NilsonNo Gravatar disse:

    OLá, me envia no email: centerprint@pow.com.br

  23. k00dezNo Gravatar disse:

    Nilson, até tentei enviar o exemplo, mas acho que o blog não aceita que se post código.

  24. NilsonNo Gravatar disse:

    Olá, desculpe… eu utilizo um modelo.dwt no dreamweaver como base para todas as páginas… teria que utilizar talvez uma outra técnica..

  25. NilsonNo Gravatar disse:

    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!

  26. PauloNo Gravatar disse:

    Cara, muito bacana essa técnica, valeu demais pela dica! =)

  27. k00dezNo Gravatar disse:

    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?

  28. k00dezNo Gravatar disse:

    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!

  29. fernandoNo Gravatar disse:

    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

  30. MotoboyNo Gravatar disse:

    Muito bom existirem pessoas como você pra ensinar!

    Bruna

  31. Vidro TemperadoNo Gravatar disse:

    To sempre aprendendo alguma coisa qndo passo por aqui.

    Deborah

  32. HazNo Gravatar disse:

    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.

  33. Marcelo ThomazNo Gravatar disse:

    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

  34. fábioNo Gravatar disse:

    Maujor, você é o meu guru.
    Muito bom tutorial!

    Att,

  35. MudançasNo Gravatar disse:

    Boa tarde, adorei o post, realmente o blog MAUJOR ja me ajudou muito e continua me ajudando… obrigado!

  36. RenataNo Gravatar disse:

    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.

  37. Luiz Gustavo MartinsNo Gravatar disse:

    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!

  38. Ar CondicionadoNo Gravatar disse:

    Olá Maujor!
    Gostei muito desse artigo
    Beijs Ana

  39. Fabiano DNo Gravatar disse:

    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

  40. AdrianoNo Gravatar disse:

    Gostei muito deste post, parabéns, vou utilizar

  41. ClaudioNo Gravatar disse:

    Maujor, como sempre parabéns!!!

  42. SérgioNo Gravatar disse:

    Bacana sua iniciativa, parabéns mestre Maujor!
    Abraço.

  43. Tiago FaccoNo Gravatar disse:

    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!

  44. AndréNo Gravatar disse:

    Mto legal a matéria, adoro css, e agora estou aprendendo PHP e to curtindo pacas tb

    grande abraço

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo