Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá boa noite pessoal do iMasters tudo beleza??
estou precisando de uma ajuda de vocês aqui..
tenho um menu da seguinte forma:
<div class="menu-itens">
<ul>
<li><a href="pages/index.html" target="iframe">INÍCIO</a></li>
<li><a href="pages/contato.html" target="iframe">CONTATO</a></li>
<li><a href="#">PRODUTOS</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">PROJETOS</a></li>
<li><a href="#">DÚVIDAS</a></li>
<li><a href="#">CADASTRE-SE</a></li>
</ul>
</div>ao passar o mouse em cima de um menu, ele me da um efeito hover... esse menu está formatado todo em CSS
o que eu preciso é.
Após clicar no menu, por exemplo; cliquei no menu contato!
Ele fique selecionado com o efeito hover, para o usuário saber onde e qual página ele esta..
Eu vi alguns topicos relacionados aqui mais não consegui compreender muito bem...
Alguem pode dar uma ajuda de como fazer isso e uma explicação para eu entender?
Abraços até mais!
No meu style.css ficou assim... está correto?
#ul li:hover, ul li.active {
background-color:#F02;
border:1px;
border-radius:10px;
height:20px;
color:#F2F2F2;
text-decoration:none;
} <div class="menu-itens">
<ul>
<li><a href="pages/index.html" target="iframe" class="active">INÍCIO</a></li>
<li><a href="pages/contato.html" target="iframe" class="active">CONTATO</a></li>
<li><a href="#">CURSOS</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">PROJETOS</a></li>
<li><a href="#">DÚVIDAS</a></li>
<li><a href="#">CADASTRE SEU CURRICULO</a></li>
</ul>
</div>e a função java assim...
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {
$('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
$(this).addClass("active"); //aqui adicionamos a class ao item clicado
});
});
</script>Abraços e obrigado!
OBS: usei os mesmo parametros que me passou para testar... CTRL+C, CTRL+V haha
Seu CSS está correto, apenas remova o "#" do início, o "#" no início se trata de uma id e no caso estamos nos referindo a uma tag. Também não é necessário adicionar a class no HTML, o Javascript fará isso por você. Os demais códigos parecem estar corretos.
Você baixou e importou a biblioteca do JQuery? Se não tiver feito isso você pode baixá-la no próprio site do JQuery: [link](http://jquery.com/download/), após baixá-la importe para a sua página dentro da tag <head> assim:
<script src="CAMINHO_DO_JQUERY.js">agora deu certo, ficou marcado após clicar... só um detalhe...
o hover não pegou o MENU todo
por exemplo no menu contato ele fico até a metade só... porque sera?
Abraços e obrigado!
consegui resolver, aumentei o atributo height.... muito obrigado Marcielo, agradecido mesmo!!
Respondido!
unico problema é que ele o menu Selecionado não quer ficar com o texto dele na cor branca.. to usando:
color:#FFF; dentro do :
ul li:hover, ul li.active {
background-color:#F02; border:1px; border-radius:10px; height:20px; -> color:#F2F2F2; <- text-decoration:none; }
Pra exemplificar, quando você tem um elemento que possui formatação CSS de forma estática e você usa outra formatação usando o pseudo hover, ele faz a troca dos valores do hover automaticamente quando acionado, porém se você aplica uma class em um elemento assim ele não sobrescreverá os valores contidos estaticamente. Então uma solução é dizer a ele que o valor do parâmetro color ou outro parâmetro é importante e deve ser sobrescrito.
Segue como ficaria:
color: #fff !important;
ja havia tentado esse metodo por uma outra solução online e não funcionou, mesmo assim ele continua não identificando a cor como branco quando está no pseudo hover...
mais de qualquer forma ja ajudou bastante por todas as explicações e soluções... muito obrigado novamente!
Creio que seja porque você está formatando o item da lista e não o link, essa cor do texto que você está falando é a cor do link.
Então, formate o link:
ul li:hover a, ul li.active a {
color: #fff;
}Se for preciso use !important.
bom a lógica que eu usei foi correta, fiz isso:
ul li:hover a, ul li.active a {
color: #fff;
}agora foi certinho, obrigado denovo parça! ajudou muito e tirou várias dúvidas!!
Tópico Respondido! abração! obg novamente!
Opa! Feliz em ajudar :joia:
Abraços.
Amigo teria como re-escrever esse codigo usando apenas JavaScript puru.
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {$('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
$(this).addClass("active"); //aqui adicionamos a class ao item clicado
});
});
</script>
.Ou seja mostra uma forma de fazer sem usar nenhum framework..
Ficarei muito agradecido.
Pelo visto você está utilizando frames para exibir o conteúdo certo?
Se for assim você poderia tentar deixar o seu CSS dessa forma:
ul li a:hover, ul li a:active {
/ parâmetros de formatação /
...
}
Além do hover acrescentar um active, assim quando o link for clicado ele estará ativo e será assumido a mesma formatação do hover. Teste e veja se é isso que você procura.
Hmm, pude entender melhor, creio que o pseudo active não resolverá, talvez o que você queira pode ser feito somente com Javascript.
Você pode utilizar JQuery para facilitar. Apenas adicione um selector ao bloco ul li a.active, ficaria dessa forma:
ul li:hover, ul li.active {
/ parâmetros de formatação /
...
}
Agora é só usar, a parte Javascript seria assim:
Creio que seja isso que você precisa, qualquer dúvida poste aí. :thumbsup: