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…
Eu geralmente uso uma constante com o endereço do site.
Obrigada por esclarecer minha dúvida também. Vou colocar esse site nos meus favoritos.
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
Carlos, para ajudar, precisamos ver o código, e não apenas a linha onde ocorreu o erro.
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
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.
não consegui seguir seu tutorial não sei onde adicionar o $_SERVER[“REQUEST_URI”]