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…
