Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

João Gabriel G.

[Resolvido] Menu dropdown c/ jQuery

Por , em Javascript

Recommended Posts

João Gabriel G.    0

João Gabriel G.
Postado

E ae mestres do javascript! Estou aqui pq tenho um pequeno problema. Trata-se do seguinte: fiz um menu dropdown usando jQuery, e até a página 2 deu certo. Quando eu passo o mouse por uma determinada opção do menu principal, abre o dropdown perfeitamente, só que quando tiro o cursor do mouse da opção do menu principal para cima do menu dropdown, ele sobe (slideUp) e não consigo navegar no dropdown. Como eu tenho q fazer pra que, enquanto eu estiver com o mouse em cima do dropdown ele não "suba pra cima"? Coloco abaixo o meu script. Espero que exista uma luz no fim do túnel! rsrs

 

$(function() {
	$('li.menu a.dropdown').bind('mouseover', function() {
		$('div.dropdown').slideDown('fast');
	});
	$('li.menu a.dropdown').bind('mouseout', function() {
		$('div.dropdown').slideUp('fast');
	});
});

 

Valeuu !

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

como está o HTML disso ?

 

o correto seria aplicar no LI, e não no a.

$('li.menu').bind('mouseover', function() {

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Gabriel G.    0

João Gabriel G.
Postado

Então, apliquei no li e ficou tudo na mesma. O código js ficou assim:

 

$(function() {
	$('li.dropdown').bind('mouseover', function() {
		$('div.dropdown').slideDown('fast');
	});
	$('li.dropdown').bind('mouseout', function() {
		$('div.dropdown').slideUp('fast');
	});
});

O html tá assim:

 

<div id="menu">
			<ul>
				<li class="menu"><a href="/index2.php">Home</a></li>
				<li class="menu"><a href="/staff.php">Staff</a></li>
				<li class="menu dropdown"><a href="javascript:;">O que fazemos</a></li>
				<li class="menu"><a href="/fale.php">Fale</a></li>
			</ul>
			<div class="dropdown">
				<ul>
					<li class="internet"><a href="/internet.php">Internet</a></li>
					<li class="hospedagem"><a href="/hospedagem.php">Hospedagem</a></li>
					<li class="idvisual"><a href="/idvisual.php">Identidade visual</a></li>
				</ul>
			</div>
		</div>

Obs.: a opção do menu principal que ativa o dropdown é "O que fazemos", que abre as opções "Internet", "Hospedagem" e "Identidade visual". A div "dropdown" tá dentro da div "menu", porque o dropdown tem posicionamento absoluto em relação à div "menu", que tá como relativo.

 

> O que eu quero é que o dropdown fique aberto exatamente durante o tempo que eu estiver com o mouse em cima dele, sem timeout's ou delay's. Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O HTML está errado. O seletor jQuery foi mal usado.

 

Estude CSS.

Exemplo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#menu li ul").css({display: 'none'});
	$("#menu > li").hover(
		function(){
			$( this ).find('ul').slideDown('fast');
		},
		function(){
			$( this ).find('ul').slideUp('fast');			
		}
	);
});
</script>
<style>
* { margin: 0; padding: 0; list-style: none; }
a { color: #fff; text-decoration: none; }
a:hover { color: #0ff; text-decoration: underline; }
#menu li {
	float: left;
	position: relative;
	padding: 10px;
	background: #f0f;
}
#menu li ul {
	position: absolute;
	top: 35px;
}
#menu li ul li {
	float: none;
	padding: 5px;
}
</style>
</head>
<body>
	<ul id="menu">
		<li><a href="/index2.php">Home</a></li>
		<li><a href="/staff.php">Staff</a></li>
		<li><a href="#">O que fazemos</a>
			<ul>
				<li class="internet"><a href="/internet.php">Internet</a></li>
				<li class="hospedagem"><a href="/hospedagem.php">Hospedagem</a></li>
				<li class="idvisual"><a href="/idvisual.php">Identidade visual</a></li>
			</ul>	
		</li>
		<li><a href="/fale.php">Fale</a></li>
	</ul><!-- /menu -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Gabriel G.    0

João Gabriel G.
Postado

Seguinte: mudei o html, porém, a lógica do seu javascript é a mesma. Vamos por partes: eu sei que tenho que dar um "slideDown" para o evento "hover". A questão é: o que eu tenho que fazer para que a ul do dropdown não vá para cima enquanto eu tiver com o mouse sobre ela. É nisso que estamos errando. Tem algum segredo aí que não estou descobrindo o que é. Tem que dar um "stop()" em algum lugar talvez?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não... não é bem assim..

 

você entendeu como ficou o HTML?

 

estamos ativando o DropDown enqnto o mouse estiver em cima de #menu li, e simplesmente isso.

o submenu está dentro de #menu li ! por isso que no meu código funciona, você testou ?

 

O teu erro, foi fazer o HTML de forma errada, e fazer com que a função fosse disparada numa tag <a>, que não tem muito a ver com o submenu.

 

Não precisa de nenhum 'stop'. Apenas de entender direito como funciona.

Rodou o meu código ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Gabriel G.    0

João Gabriel G.
Postado

Agora funcionou! Me diga 1 coisa: se eu quiser usar, ao invés do slideDown e slideUp, um dos efeitos da biblioteca "easing" por ex., como eu poderia fazer?

 

Valeu aí pelo código. Já me arrumei aki ! ;D

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

um dos efeitos da biblioteca "easing" por ex., como eu poderia fazer?

 

Não sei, não conheço essa biblioteca.

 

Tente fazer, e retorne com as dúvidas caso não consiga.(em outro tópico neste caso)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito