1

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!

2
  • 1
    Tem sim. Obrigado por perguntar 7/03/2016 às 13:27
  • @Zoom, e como eu consigo fazer? poderia me explicar ou indicar uma pesquisa? 7/03/2016 às 13:39

1 Resposta 1

1

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/

3
  • 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.
    – user41722
    7/03/2016 às 17:50
  • Consegui Eduardo!! Muito obrigado pela paciência!! 7/03/2016 às 18:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .