Solved

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

Posted on 2013-05-22
10
367 Views
Last Modified: 2013-05-22
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
Comment
Question by:bbdesign
  • 4
  • 4
  • 2
10 Comments
 
LVL 6

Expert Comment

by:mickey159
ID: 39188232
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
 

Author Comment

by:bbdesign
ID: 39188337
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39188375
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
 

Author Comment

by:bbdesign
ID: 39188406
That doesn't appear to do anything except get rid of the "slide" effect.
0
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
ID: 39188415
Try replace my previous comment with this:

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

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 6

Expert Comment

by:mickey159
ID: 39188426
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39188467
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
 

Author Comment

by:bbdesign
ID: 39188478
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
 
LVL 6

Expert Comment

by:mickey159
ID: 39188612
Sorry for that but I need to sleep now. :-(  (I am in GMT+08:00)
I will answer that tomorrow. :-)
0
 

Author Comment

by:bbdesign
ID: 39188885
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now