Artigo: Destacar link do menu que está ativo - Gigasystems

Blog

Em por

destacar-link-do-menu-que-esta-ativo
Destacar link do menu que está ativo

Existem diversas maneiras de destacar um link do menu, deixando o menu ativo de cor ou fundo com aparência diferente das outras paginas. Pode ser um em Java script, que poderá não funcionar se o usuário estiver desabilitado script de página, css que poderá ter problemas dependendo da versão do navegador do usuário, etc...

Depois de bastante pesquisa, utilizando alguns plugins que funciona local e quando sobe para o servidor já não nos proporciona o mesmo feedback e nos deixa com dor de cabeça numa implementação tão simples.

Dentre as pesquisadas a que achei mais eficiente foi a implementação feita com o PHP, que é; uma linguagem muito utilizada nos dias de hoje, segue uso:

Por exemplo:

// atribui a uma variável $paginaLink toda a URL da página

Se a URL toda for:

//www.seusite.com.br/artigo/11/pagina1.php

O código PHP acima retorna:

/artigo/11/pagina1.php


Para pegar apenas o nome da página, sem todo o caminho da URL usamos a função PHP basename():

// atribui a variável $paginaLink apenas o nome da página

Neste caso o retorno de $paginaLink será:

pagina1.php


Para o CSS basta acrescentar uma classe com o nome "ativo" :

/*[...]*/

ul#menu li a { display:block; padding:5px 10px; background-color:#CCC;  }

ul#menu li a:hover,

ul#menu li a.ativo { background-color:#EEE; /* coloque aqui sua cor */}

/*[...]*/

Para que tudo funcione corretamente o código é bem simples. Faz-se um if no qual se retornar true, adiciona a class="ativo" na tag :

$paginaLink = basename($_SERVER['SCRIPT_NAME']);
<ul>
	<li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 1</a></li>
	<li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 2</a></li>
	<li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 3</a></li>
	<li><a <?php if($paginaLink == "pagina1.php") {echo 'class="link ativo"';}else{echo 'class="link"';} ?> href="pagina1.php" >P&aacute;gina 4</a></li>	
</ul>

Com esta pequena implementação você com certeza terá êxito em todos os navegadores, pois não depende de versão do navegador e nem se preocupar se o usuário deixou desabilitado o SCRIPT em seu navegador.

Caso esteja usando com URL amigável, para pegar o seu $paginaLink, use uma função da sua página inicial, no meu por exemplo, usei $paginaLink = pegaParametro();

Olá, deixe seu comentário para Destacar link do menu que está ativo

Já temos 3 comentário(s). DEIXE O SEU :)
Adeilson Silva

Adeilson Silva

Olá estou com problemas no meu código, meu menu não se sobressai sobre as demais páginas, por exemplo quando clico em quando clico no menu contatos a paginas de contatos fica na frente do menu "dropdown" , tipo o menu categorias e o minhaconta, ficam por trás das demais paginas, e outro problema que meu template diminue de tamanho quando é mostrado a página de contatos. Podem me ajudar?
Index.tpl :






















































{$TITULO_SITE}











&#9776;









Buscar














Registre-se








Login











Carrinho















Home
Minha Conta

Cadastre-se

Login



Categorias


Popular Files


Featured Files


Top New Files


Follow Feed


Top Authors


Top New Authors





Contato


Sobre

Carrinho















{php}

Rotas::get_Pagina();

{/php}






{$TITULO_SITE}
Todos os Direitos Reservados - Nome Loja - 2020










Index.css:

/*CSS menu */

*{
margin: 0;
padding: 0;


}


.menu{
width: 100%;
height: 50px;
background-color: #fef45d;
font-family: 'Arial';
font-size: 15px;
border: 30px;


}

.menu ul{
list-style: none;
position: relative;
margin: 0;

}

.menu ul li{

width: 250px;
float: left;

}






.menu a{

padding:9px;
display: block;
text-decoration: none;
text-align: center;
background-color: #fef45d;
color:black;





}
.menu ul ul{
position: absolute;
visibility: hidden;


}

.menu ul li:hover ul{
visibility: visible;

}

.menu a:hover{
background-color: #C0C0C0;
color: #555;



}
.menu ul ul li{
float: none;
border-bottom: solid 2px #ccc;
margin-top: 0;


}
.menu ul ul li a{
background-color: #069;
max-height: 200px;



}

label[for="bt_menu"]{

padding: 5px;
background-color: #222;
color: #fff;
font-family: "Arial";
text-align: center;
font-size: 33px;
cursor: pointer;
width: 50px;
height: 50px;

}

#bt_menu{
display: none;

}

label[for="bt_menu"]{
display: none;

}

@media(max-width: 800px){
label[for="bt_menu"]{
display: block;
}

#bt_menu:checked ~ .menu{
margin-left: 0;
}



.menu{
margin-top: 5px;
margin-left: -100%;
transition: all .4s;

}



.menu ul li{
width: 100%;
float: none;

}
.menu ul ul{
position: static;
overflow: hidden;
max-height: 0;
transition: all .4s;
}

.menu ul li:hover ul{
height: auto;
max-height: 200px;

}
}



/*CSS campos de pesquisa*/

.container {

position: relative;
padding: 10px;
left:2px;




}

.container input {

width: 65%;
padding: 1%;
background-color: white;
border: 2px solid #73AD21;

right: 6%;
left: 6%;




}



form {
background-color: white;
padding-top: 0;





}

.rodape{


margin-top: 500px;
min-height: 150px;
background-color: #204d74;
color: #fff;
padding-top: 30px;


}

/*CSS especifico para o menu categorias*/
.navbar-link{
padding-top: 9px;
min-height: 40px;

}



.navbar-link{
background-color: black;
max-height: 20px;
font-size: 16px;

}
.navbar-item{
background-color: white;
text-align: center;
}







contatos.tpl:
























Firstname *






Lastname *








Email *






Phone








Message *




























contatos.css:



body {
padding: 0px 0;
font-family: Lato, sans-serif;
text-align: justify;

}






O .tpl é por que estou usando o smarty com MVC, porém é como um html.



Obrigado.
★★★★★DIA 29.01.20 22h21RESPONDER
N/A
Enviando Comentário Fechar :/
Jaclinton Silva

Jaclinton Silva

Marcos, estou estudando justamente esta forma de marcar a pagina corrente do menu. Contudo, sou novo na área e gostaria de obter mais informações de como colocar este código em PHP no meu html. Você pode compartilhar um link ativo?
★★★★★DIA 22.05.18 10h35RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
Marcos Martins

Marcos Martins

Bom dia Jaclinton,


não entendi direito sua pergunta "colocar este código em PHP no meu HTML". Se for o que eu entendi, você quer um código HTML para usar um menu dinâmico? Se for isso, não é possível. Páginas dinâmicas não dá para fazer em HTML puro, é preciso usar alguma outra linguagem que seja dinâmica, pois o HTML não aceita condição.


No caso de um link ativo para estudo, lamento, mas mudamos recentemente todo o site e ainda existem coisas que precisam ser corrigidas, que não dá pra ser feito neste momento.


 


Att Marcos

★★★★★DIA 22.05.18 11h37RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: Blog

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.