Link to home
Start Free TrialLog in
Avatar of Brad Bansner
Brad Bansner

asked on

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!
Avatar of mickey159
mickey159
Flag of United States of America image

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.
Avatar of Brad Bansner
Brad Bansner

ASKER

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!
Avatar of Jagadishwor Dulal
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

That doesn't appear to do anything except get rid of the "slide" effect.
ASKER CERTIFIED SOLUTION
Avatar of mickey159
mickey159
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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

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!
Sorry for that but I need to sleep now. :-(  (I am in GMT+08:00)
I will answer that tomorrow. :-)
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!