Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 388
  • Last Modified:

Using jQuery/Javascript to open and close a graphical drop-down menu

This is my test page:
http://partnersdesign.net/test

Script to open and close the menu '#contact':

$('#contactbtn').mouseover(function(){
	if (!$('#contact').is(':visible')){
		$('#contact').slideDown(500);
	}
});

$('#contactbtn').mouseout(function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window


Here is the markup of the upper-right navigation area:

<h1>PARTNERS DESIGN<span class="smallhead">, INC.</span>&nbsp;&nbsp;/&nbsp;&nbsp;<a id="contactbtn">MAKE CONTACT</a><div id="contact">
	610.488.7611
	<div class="blackline"></div>
	<a id="contacthover1" href="mailto:info@partnersdesign.net">EMAIL</a>
	<div class="blackline"></div>
	<a id="contacthover2" href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</a>
</div></h1>

Open in new window


The only problem is that the menu doesn't stay open when you move the mouse down over the menu itself. I tried some rather complicated checks against both '#contactbtn' and '#contact', but then had issues because a mouseover on one of the <a> links within '#contact' was counting as a mouseout of '#contact'. I was also running into browser inconsistencies in that same regard, and I think my code was overly complex.

There must be some relatively simple way to do an if/then such as:

If 'mouseout' on both '#contactbtn' and '#contact' (plus its child elements) = slideUp menu?

Would appreciate any advice. Thank you!
0
Brad Bansner
Asked:
Brad Bansner
  • 4
  • 4
  • 2
1 Solution
 
mickey159Commented:
Try this:

$('#contact').mouseout(function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window


Feel free to ask if you have any further questions.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
That is along the lines of what I want to do, and I installed it here:
http://partnersdesign.net/test

However, if you mouseover EMAIL or FACEBOOK, it closes the menu. This is one of the problems I was having before.

Thanks!
0
 
Jagadishwor DulalBraces MediaCommented:
Just for reference try this:

$(document).ready(function() {
$("#contactbtn").mouseover(function () {
   $('#contact').show().slideDown('slow');
});
 
$("#contactbtn").mouseout(function () {
   $('#contact').hide().slideUp(2000);
});
 });    

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Brad BansnerWeb DeveloperAuthor Commented:
That doesn't appear to do anything except get rid of the "slide" effect.
0
 
mickey159Commented:
Try replace my previous comment with this:

$('#contact').on("mouseleave",function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window

0
 
mickey159Commented:
If you want reasons, this is it: (from jQuery Docs)

mouseout fires when the pointer moves out of the child element as well, while mouseleave fires only when the pointer moves out of the bound element.
0
 
Jagadishwor DulalBraces MediaCommented:
Oh ok see this :

<script>
$(document).ready(function() {
$("#contactbtn").mouseover(function () {
   $('#contact').show().slideDown('slow');
});
 $("#contact").mouseup(function(){
	$('#contact').css('display','block');
})

$("#contactbtn").mouseout(function () {
   $('#contact').hide().slideUp(2000);
});
});
</script>

Open in new window


And Your HTML I have changed a id to div please change it:
<h1>PARTNERS DESIGN<span class="smallhead">, INC.</span>&nbsp;&nbsp;/&nbsp;&nbsp;<br>
<div id="contactbtn">MAKE CONTACT
<div id="contact" style="display:none">
	610.488.7611
	<div class="blackline"></div>
	<a id="contacthover1" href="mailto:info@partnersdesign.net">EMAIL</a>
	<div class="blackline"></div>
	<a id="contacthover2" href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</a>
</div></h1>
</div>

Open in new window

0
 
Brad BansnerWeb DeveloperAuthor Commented:
Ah, "mouseleave"... I was not even aware of that trigger. That helps a lot. There is one final issue: if you mouseover the MAKE CONTACT and then mouseout of that, the menu does not go away. Because you have not done a "mouseleave" on the menu because you were never over it in the first place.

Is there a more elegant way to do that, rather than have a whole separate "mouseout" function on MAKE CONTACT?

Thanks!
0
 
mickey159Commented:
Sorry for that but I need to sleep now. :-(  (I am in GMT+08:00)
I will answer that tomorrow. :-)
0
 
Brad BansnerWeb DeveloperAuthor Commented:
I think I have solved this, using your "mouseleave" idea. I wish I had known that was an option. I encapsulated #contact within #contactbtn (changed the <a> to a <span>) and put the "mouseleave" on #contactbtn instead of #contact... now it reacts as it should. Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now