Manter Hover Selecionado.

Kr3w^ · Dezembro 20, 2013

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!

Marcielo · Dezembro 20, 2013

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:

$(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
    });
});

Creio que seja isso que você precisa, qualquer dúvida poste aí. :thumbsup:

Kr3w^ · Dezembro 20, 2013

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;
}

e meu menu ficou assim:

		<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>

mais não esta dando, eu clico no menu, ele me mostra o hover normal mais não fica selecionado após clicar, onde estou errado??

Abraços e obrigado!

OBS: usei os mesmo parametros que me passou para testar... CTRL+C, CTRL+V haha

Marcielo · Dezembro 20, 2013

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, após baixá-la importe para a sua página dentro da tag <head> assim:

<script src="CAMINHO_DO_JQUERY.js">

Kr3w^ · Dezembro 21, 2013

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; }

Marcielo · Dezembro 21, 2013

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;

Kr3w^ · Dezembro 21, 2013

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!

Marcielo · Dezembro 21, 2013

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.

Kr3w^ · Dezembro 21, 2013

bom a lógica que eu usei foi correta, fiz isso:

ul li:hover a, ul li.active a {
    color: #fff;
}

só que precisou de important e por isso não tinha pegado do jeito que tinha feito

agora foi certinho, obrigado denovo parça! ajudou muito e tirou várias dúvidas!!

Tópico Respondido! abração! obg novamente!

Marcielo · Dezembro 21, 2013

Opa! Feliz em ajudar :joia:

Abraços.

Ronald Sena · Fevereiro 3, 2015

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.

Arquivado

Manter Hover Selecionado.

Recommended Posts

Kr3w^ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcielo 108

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kr3w^ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcielo 108

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kr3w^ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcielo 108

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kr3w^ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcielo 108

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kr3w^ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcielo 108

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronald Sena 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Fóruns

Tempo Real

Informação importante