jQuery Show / hide div

[SnakeX 1]

Olá tudo bem?

 

Estou com um pequeno problema, é o seguinte, tenho um link, que passando o rato sobre ele, ele mostra uma div, e quando se passa o rato sobre essa div e depois se passa o rato sobre outro lugar na janela a div esconde, o que eu pretendia era, passar o rato sobre o link, aparece a div e se não kisesse ver a div se passa-se o rato noutro lugar da janela a div escondia e não ter de passar o rato sobre a div para esconde-la, dá para entender?

 

Aqui vai o código jquery, css e html

$(document).ready(function(){
		$("#link").mouseover(function(){
			$('#popup_menu').show();
			return false;
		});	
		$("#popup_menu").mouseover(function() {
			$('#popup_menu').show();
			return false;
		});
		$("#popup_menu").mouseout(function() {
			$('#popup_menu').hide();
		});

	});

<style type="text/css">
	#popup_menu 
	{ 
	display: none; 
	position: absolute; 
	left: 333px; 
	top: 60px; 
	background: gray; 
	color: white; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; 
	}
</style>

<a id="link" href="#" title="Tools">Tools</a><div id="popup_menu">Teste</div>

 

Ele funciona bem, mas tenho de passar o rato sempre sobre a div para a esconder, mas às vezes posso não querer ir à div e assim ela fica sempre visivel =(

[SnakeX 1]

Respondendo ao meu próprio tópico.

 

Já consegui fazer o que queria, fiz assim:

 

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$('.menu').click(function() { $('#menu-cnts').hide();$(this).next().show();return false; });
$('body, #menu-cnts a').click(function() { $('#menu-cnts').hide();});

});
</script>

<style type="text/css">
	.popup_menu 
	{ 
	display: none; 
	position: absolute; 
	left: 353px; 
	top: 60px; 
	background: #fff; 
	border: 1px solid #CCC;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; padding: 5px; z-index: 999999;
	}
</style>

<a class="menu" href="#">Menu</a>
<div id="menu-cnts" class="popup_menu">
 <div><a href="#">Menu option 1</a></div>
 <div><a href="#">Menu option 2</a></div>
</div>

E prontos funciona da maneira que eu preciso :)

[SnakeX 1]

Boas, refiz este código e criei uma função jQuery, está bem simples, mas funciona bem, pelo menos comigo.

 

Função jQuery:

jQuery.fn.DivMenu = function(){
	
	var element = this;
	
	var offset = $(element).offset();
	var left = offset.left;
	var top = offset.top; 
	var currentId = $(this).attr('id'); 

	$(element).click(function() { $('.' + currentId + '-cnts').hide(); $(this).next().show();return false; });
	$('body, .' + currentId + '-cnts a').click(function() { $('.' + currentId + '-cnts').hide();});
	
	
	
	$('.' + currentId + '-cnts').css({
		"position" : "absolute",
		"left" : left + "px",
		"top"  : top + 15 + "px"
	});
};

 

Iniciar a função:

$(document).ready(function(){
	$('.menu').DivMenu();
});

 

HTML:

<a class="menu" id="menu" href="#">Menu</a>
			<div class="menu-cnts" id="menu-cnts">
				<div><a href="#">Menu option 1</a></div>
				<div><a href="#">Menu option 2</a></div>
			</div>

 

CSS:

.menu-cnts 
	{ 
	display: none; 
	position: absolute; 
	left: 353px; 
	top: 60px; 
	background: #fff; 
	border: 1px solid #CCC;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; padding: 5px; z-index: 999999;
	}

 

Está bem simples, ela agora posiciona a div por debaixo do link que for clicado, espero que melhorem a função pois eu percebo pouco de criação de funções em jQuery, fui pesquisando e fazendo :)

 

Abraço ;)