Howto: Menu com include em PHP – Com CSS para destacar link da página ativa

 

Howto: Menu com include em PHP – Com CSS para destacar link da página ativa
===============================================================

Eu sempre preferi utilizar um arquivo separado com menu em meus projetos, como um sidebar, em vez de repetir em todas as páginas, pela razão óbvia de que os ítens do menu, por vezes podem mudar de URL e é mais fácil alterar um arquivo apenas do que mudar os links em todas as páginas que mostram esse menu.

Enfim, recentemente eu também queria usar CSS para destacar os links ativos ou da página atual que o usuário esteje, isso é fácil de se fazer quando o menu é em cada página, mas requer um pouco de código extra quando se utiliza um único menu incluídos em seu site.

Então, de qualquer forma aqui está a minha solução:

Opção I

Aqui está o código para o menu de navegação – e salvei esse trecho com o nome menu.php.

[code=php]
< ?php $active[$current] = "class=active"; ?>

[/code]

Se você estiver utilizando o class diretamente no Link, pode-se mover o echo, assim:

[code=php]
< ?php $active[$current] = "class=active"; ?>

[/code]

Em seguida, basta incluir o menu em suas páginas e indicar qual dos links no menu que pretende atribuir o estilo CSS “active”:

[code=php] < ?php $current = 3; include("menu.php"); ?> [/code]

Por fim, não esqueça de criar uma classe CSS chamada “active” para fazer o link da página atual se destacam dos demais.

VARIAÇÃO – Você também pode alterar o código do menu para a tornar a página ativa não linkável, destacando-se ainda mais das demais opções do menu. Aqui está um exemplo do código que você usaria para os links:

[code=php]

  • >
    < ?php if ($current != 1) { echo "home”; } else { echo “home”; } ?>
  • >
    < ?php if ($current != 2) { echo "
    web”; } else { echo “web”; } ?>
  • [/code]

    Opção II

    Para saber em qual link esta ativo é necessário saber em qual página estamos, então a primeira coisa que precisamos fazer é obter a URL da página atual. Isto em PHP pode ser feito com um comando simples:

    [code=php]$_SERVER[“REQUEST_URI”][/code]

    Este comando retorna a URL completa do servidor, juntamente com a página atual.
    Agora que temos a informação de que precisamos, podemos começar a fazer o nosso menu:

    [code=php]

    [/code]

    O código acima verifica se a página atual é a mesmo que o link e se for ele adiciona a classe active. Agora nós podemos simplesmente criar o estilo ativo em CSS.

    [code=css]
    .active a:link {
    background-image: url(images/button_active.jpg);
    }
    [/code]

    E pronto, seu menu agora terá links ativos diferentes.

    Problemas:
    Eu entendo que esta solução está longe de ser perfeita e que não irá trabalhar em grandes sites. Eu só achei muito útil meus projetos pequenos. Mantem-se os menus dinâmicos e fácil de alterar.

    Caso você utilize subpasta para organizar seus arquivos, você pode utilizar o comando abaixo para retonar o nome da pasta também:

    [code=php] basename(dirname($_SERVER[“REQUEST_URI”])) [/code]

    Provavelmente este método funcione melhor.

    Espero que seja útil pra você também…

    7 thoughts to “Howto: Menu com include em PHP – Com CSS para destacar link da página ativa”

    1. Olá,

      Eu utilizei o código acima e está me retornado o serguinte erro:

      Notice: Undefined offset: 1 in C:\Program Files (x86)\EasyPHP5.3.0\www\Marcela Bifano\includes\nav.php on line 6

      pelo que pesquisei na internet parece que falta declarar as variaveis [1], [2], etc. Não sei se é assim, sou iniciante em php.

      Abraços
      Atenciosamente,
      Carlos Eduardo Sully
      Front-End Designer
      http://www.flickr.com/ceodesign

    2. Preciso montar um menu simples na horizontal, apenas com 5 ou 6 itens.. mas gostaria de destacar o link da pagina atual, utilizando o dreamweaver e tendo como pagina mestra um modelo.
      Já consegui fazer isso, mas não consigo tirar aquela cor roxa que fica quando o link é visitado…segue o código:

      Destacar link da página atual

      <a href="A.php" >A
      <a href="B.php" >B
      <a href="C.php" >C

    3. Olá Nilson, obrigado pelo comentário. Isso que você quer é simples de se resolver com CSS, por meio do classe a:visited, basta acrescentar isso em seu arquivo de estilos, dá pra você controlar a cor do link para cada momento, veja:

      /* LINKS NÃO VISITADOS */
      a:link {
      color: #FF0000;
      }

      /* LINKS VISITADOS */
      a:visited {
      color: #00FF00;
      }

      /* LINKS AO RECEBER O FOCO DO MOUSE */
      a:hover {
      color: #FF00FF;
      }

      /* LINK ATIVO */
      a:active {
      color: #0000FF;
      }

      É isso.

    Leave a Reply

    Your email address will not be published. Required fields are marked *