Bom dia galera Eu estive pensando em como estilizar meu menu, e tive uma ideia, gostaria de saber se é possível Tem como eu usar algum efeito no css que faça com que, parte do meu menu fique selecionado? Por exemplo: Supondo que meu menu seja composto dessa maneira : HOME - ENDEREÇOS - SERVIÇOS - CONTATO Quando o usuário estiver em alguma dessas páginas, por exemplo, "HOME", eu usar alguma maneira de o hover em "HOME" ficar marcado. Se ele tiver na pagína HOME, marca em HOME, e assim, para as outras páginas. É possível? Obrigado!
1 Resposta
Tem mais de uma maneira de se fazer isso, eu não sei como está o seu site. Uma das formas de se fazer isso é atribuir um id ao body da sua página e aos links do menu e então encontrá-los na folha de estilos:
Sua página html por exemplo:
<body id="home">
<ul id="menu">
<li><a href="home.html" id="homeLink">Home</a></li>
<li><a href="enderecos.html" id="enderecosLink">Endereços</a></li>
<li><a href="servicos.html" id="servicosLink">Serviços</a></li>
<li><a href="contto.html" id="contatoLink">Contato</a></li>
</ul>
</body>
Agora você precisa identificar e estilizar esses elementos lá na sua folha de estilos:
body#home a#homeLink, body#enderecos a#enerecosLink,
body#servicos a#servicosLink, body#contatoLink a#contatoLink {
cursor: default;
background-color: red;
color: white;
}
JsFiddle: https://jsfiddle.net/91qsdsza/
-
Eduardo, a sua solução funcionou, porém, ele só me deixa selecionado na minha página home, conforme eu faço a navegação, ele não deixa marcado, poderia me ajudar mais uma vez? 7/03/2016 às 17:48
-
Exato, note que a tag body está com o id "home". Para funcionar com as outras páginas, você tem que atribuir um id diferente para cada página de forma que ele corresponda ao css. Ex: Na página servicos.html você coloca o id servicos na tag body da página e assim por diante.– user417227/03/2016 às 17:50
-